From aae1a9ac6c3541d7218f457970bc3102c1dacbcd Mon Sep 17 00:00:00 2001
From: David Pine <david.pine@microsoft.com>
Date: Mon, 26 Jan 2026 14:40:48 -0600
Subject: [PATCH] feat: enhance PivotSelector component with marginTop prop for
 better layout control

docs: update Polyglot AppHost documentation with new features and usage examples

docs: add link to Polyglot AppHost in resource model documentation

docs: include Polyglot AppHost reference in get-started guide for broader language support

style: import utility classes for padding and margin in site CSS

style: create utils.css for reusable padding and margin utility classes
---
 src/frontend/config/sidebar/docs.topics.ts    |   4 +
 .../src/components/PivotSelector.astro        |   8 +-
 .../docs/app-host/polyglot-apphost.mdx        | 910 ++++++++++--------
 .../docs/architecture/resource-model.mdx      |   4 +
 .../src/content/docs/get-started/app-host.mdx |   5 +
 src/frontend/src/styles/site.css              |   3 +-
 src/frontend/src/styles/utils.css             | 507 ++++++++++
 7 files changed, 1050 insertions(+), 391 deletions(-)
 create mode 100644 src/frontend/src/styles/utils.css

diff --git a/src/frontend/config/sidebar/docs.topics.ts b/src/frontend/config/sidebar/docs.topics.ts
index dbbf52c7c..7c918c618 100644
--- a/src/frontend/config/sidebar/docs.topics.ts
+++ b/src/frontend/config/sidebar/docs.topics.ts
@@ -720,6 +720,10 @@ export const docsTopics: StarlightSidebarTopicsUserConfig = {
           label: 'Configuration',
           slug: 'app-host/configuration',
         },
+        {
+          label: 'Polyglot AppHost',
+          slug: 'app-host/polyglot-apphost',
+        },
         {
           label: 'Certificate configuration',
           slug: 'app-host/certificate-configuration',
diff --git a/src/frontend/src/components/PivotSelector.astro b/src/frontend/src/components/PivotSelector.astro
index ce4836b68..e0af92c4d 100644
--- a/src/frontend/src/components/PivotSelector.astro
+++ b/src/frontend/src/components/PivotSelector.astro
@@ -9,9 +9,10 @@ type Props = {
   options: Option[];
   key: string;
   title?: string;
+  marginTop?: number | null;
 };
 
-const { options, key, title } = Astro.props;
+const { options, key, title, marginTop } = Astro.props;
 ---
 
 <div class="pivot-container not-content">
@@ -58,14 +59,14 @@ const { options, key, title } = Astro.props;
   </button>
 </div>
 
-<style>
+<style define:vars={{ marginTop: marginTop !== null && marginTop !== undefined ? `${marginTop}rem` : '0rem' }}>
   .pivot-container {
     background: var(--sl-color-bg-nav);
     border: 1px solid var(--sl-color-gray-5);
     border-radius: 0.5rem;
     padding: 1rem;
     box-shadow: var(--sl-shadow-sm);
-    margin-top: 0;
+    margin-top: var(--marginTop);
     margin-bottom: 1.5rem;
     --pivot-float-x: -50%;
   }
@@ -79,6 +80,7 @@ const { options, key, title } = Astro.props;
     box-shadow: var(--sl-shadow-md);
     border-color: var(--sl-color-gray-4);
     max-width: min(calc(100vw - 2rem), 800px);
+    margin-top: 0;
     width: auto;
     opacity: 1;
     animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/frontend/src/content/docs/app-host/polyglot-apphost.mdx b/src/frontend/src/content/docs/app-host/polyglot-apphost.mdx
index 611af099f..dab82cc49 100644
--- a/src/frontend/src/content/docs/app-host/polyglot-apphost.mdx
+++ b/src/frontend/src/content/docs/app-host/polyglot-apphost.mdx
@@ -1,29 +1,88 @@
 ---
-title: Polyglot AppHost (Preview)
+title: Polyglot AppHost
 description: Learn how to write Aspire AppHosts in TypeScript, Python, Go, Rust, and Java to orchestrate your cloud-native applications.
 lastUpdated: true
 tableOfContents: true
 ---
 
-import { Aside, Code, Steps, Tabs, TabItem, FileTree } from '@astrojs/starlight/components';
+import {
+  Aside,
+  Badge,
+  Code,
+  Steps,
+  Tabs,
+  TabItem,
+  FileTree,
+} from '@astrojs/starlight/components';
 import LearnMore from '@components/LearnMore.astro';
 import OsAwareTabs from '@components/OsAwareTabs.astro';
+import PivotSelector from '@components/PivotSelector.astro';
+import Pivot from '@components/Pivot.astro';
+
+<Badge
+  text="Preview feature"
+  variant="danger"
+  size="large"
+  class:list={'mb-4'}
+/>
 
 Aspire's polyglot support allows you to write AppHosts in languages other than C#. This enables teams to use their preferred programming language while still benefiting from Aspire's orchestration capabilities, including access to 40+ hosting integrations (Redis, PostgreSQL, Azure services, and more).
 
-<Aside type="caution" title="Preview Feature">
-Polyglot AppHost support is currently in preview. Not all features are supported, and the API may change. We welcome your feedback to help improve language support—please share your experiences and suggestions on the [Aspire GitHub repository](https://github.com/dotnet/aspire/issues).
+<Aside type="note" title="Enable preview feature">
+Polyglot AppHost support is currently in preview. Not all features are supported, and the API may change.
+
+To enable this feature, run the following command:
+
+```bash title="Enable polyglot support"
+aspire config set features:polyglotSupportEnabled true --global
+```
+
+<LearnMore>
+For more information, see [aspire config command reference](/reference/cli/commands/aspire-config-set/)
+</LearnMore>
 </Aside>
 
 ## How it works
 
 When you create a polyglot AppHost:
 
+<Steps>
+
 1. The Aspire CLI scaffolds a language-specific AppHost project
 2. A .NET AppHost Server runs in the background, handling orchestration
 3. Your code communicates with the server via JSON-RPC over Unix sockets (or named pipes on Windows)
 4. The server manages containers, service discovery, and the Aspire Dashboard
 
+</Steps>
+
+```mermaid
+flowchart LR
+    subgraph YourCode["Your Code"]
+        TS["TypeScript"]
+        PY["Python"]
+        GO["Go"]
+        RS["Rust"]
+        JV["Java"]
+    end
+
+    subgraph Server[".NET AppHost Server"]
+        RPC["JSON-RPC"]
+        ORCH["Orchestration"]
+        SD["Service Discovery"]
+    end
+
+    subgraph Resources["Managed Resources"]
+        DASH["Aspire Dashboard"]
+        CONT["Containers"]
+        INT["40+ Integrations"]
+    end
+
+    TS & PY & GO & RS & JV --> RPC
+    RPC --> ORCH
+    ORCH --> SD
+    SD --> DASH & CONT & INT
+```
+
 This architecture gives you access to the full power of Aspire's orchestration while writing code in your preferred language.
 
 ## Prerequisites
@@ -32,588 +91,660 @@ Before creating a polyglot AppHost, ensure you have the following installed:
 
 ### Required for all languages
 
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [.NET SDK](https://dotnet.microsoft.com/download/dotnet/10.0) | 10.0+ | Required for the AppHost server |
-| [Aspire CLI](/get-started/install-cli/) | Latest | Install using the install script |
-| [Docker](https://docs.docker.com/get-docker/) | Latest | Required for container resources |
+| Requirement                                                   | Version | Notes                            |
+| ------------------------------------------------------------- | ------- | -------------------------------- |
+| [.NET SDK](https://dotnet.microsoft.com/download/dotnet/10.0) | 10.0+   | Required for the AppHost server  |
+| [Aspire CLI](/get-started/install-cli/)                       | Latest  | Install using the install script |
+| [Docker](https://docs.docker.com/get-docker/)                 | Latest  | Required for container resources |
+
+## Language-specific setup
+
+Select your preferred language to see the specific requirements and setup instructions:
+
+<PivotSelector
+  title="Select your language"
+  key="polyglot-language"
+  marginTop="1"
+  options={[
+    { id: 'typescript', title: 'TypeScript' },
+    { id: 'python', title: 'Python' },
+    { id: 'go', title: 'Go' },
+    { id: 'rust', title: 'Rust' },
+    { id: 'java', title: 'Java' },
+  ]}
+/>
 
-### Enable polyglot support
-
-Polyglot support must be enabled in the Aspire CLI:
+### Runtime requirements
 
-```bash title="Enable polyglot support"
-aspire config set features:polyglotSupportEnabled true --global
-```
+<Pivot id="typescript">
 
-## TypeScript
+| Requirement                    | Version | Notes                   |
+| ------------------------------ | ------- | ----------------------- |
+| [Node.js](https://nodejs.org/) | 20+     | LTS version recommended |
+| npm or pnpm                    | Latest  | Package manager         |
 
-### Runtime requirements
+</Pivot>
+<Pivot id="python">
 
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [Node.js](https://nodejs.org/) | 20+ | LTS version recommended |
-| npm or pnpm | Latest | Package manager |
+| Requirement                                 | Version | Notes                         |
+| ------------------------------------------- | ------- | ----------------------------- |
+| [Python](https://www.python.org/downloads/) | 3.10+   | `python3` or `python` command |
+| [uv](https://docs.astral.sh/uv/)            | Latest  | Python package manager        |
 
-### Create a TypeScript AppHost
+Install uv if not already installed:
 
-<Steps>
+```bash title="Install uv"
+curl -LsSf https://astral.sh/uv/install.sh | sh
+```
 
-1. Create a new directory and initialize the AppHost:
+</Pivot>
+<Pivot id="go">
 
-    ```bash title="Initialize TypeScript AppHost"
-    mkdir my-apphost && cd my-apphost
-    aspire init -l typescript
-    ```
+| Requirement              | Version | Notes                       |
+| ------------------------ | ------- | --------------------------- |
+| [Go](https://go.dev/dl/) | 1.23+   | Required for module support |
 
-2. The following project structure is created:
+</Pivot>
+<Pivot id="rust">
 
-    <FileTree>
-    - my-apphost/
-        - .aspire/
-            - settings.json
-        - .modules/  Generated SDK (created on first run)
-        - apphost.ts  Your AppHost code
-        - apphost.run.json
-        - package.json
-        - tsconfig.json
-    </FileTree>
+<Aside type="caution" title="Experimental">
+  Rust support is experimental and may have compilation issues with some
+  integrations. Please report any issues on the [Aspire GitHub
+  repository](https://github.com/dotnet/aspire/issues).
+</Aside>
 
-3. Review the generated `apphost.ts`:
+| Requirement                | Version       | Notes              |
+| -------------------------- | ------------- | ------------------ |
+| [Rust](https://rustup.rs/) | Latest stable | Via rustup         |
+| Cargo                      | Latest        | Included with Rust |
 
-    ```typescript title="apphost.ts"
-    import { createBuilder } from "./.modules/aspire.js";
+</Pivot>
+<Pivot id="java">
 
-    const builder = await createBuilder();
+| Requirement                       | Version | Notes                       |
+| --------------------------------- | ------- | --------------------------- |
+| [Java JDK](https://adoptium.net/) | 17+     | OpenJDK/Temurin recommended |
 
-    // Add your resources here, for example:
-    // const redis = builder.addRedis("cache");
-    // const postgres = builder.addPostgres("db");
+</Pivot>
 
-    const app = builder.build();
-    await app.run();
-    ```
+### Create an AppHost
 
-</Steps>
+The following steps demonstrate how to create a new polyglot AppHost for your preferred language.
 
-### Add Redis integration
+<Pivot id="typescript">
 
 <Steps>
 
-1. Add the Redis integration:
+1. Create a new directory and initialize the AppHost:
 
-    ```bash title="Add Redis"
-    aspire add Aspire.Hosting.Redis
-    ```
+   ```bash title="Initialize TypeScript AppHost"
+   mkdir my-apphost && cd my-apphost
+   aspire init -l typescript
+   ```
 
-2. Update `apphost.ts` to use Redis:
+2. The following project structure is created:
 
-    ```typescript title="apphost.ts" ins={5-6}
-    import { createBuilder } from "./.modules/aspire.js";
+   <FileTree>
+     - my-apphost/ - .aspire/ - settings.json - .modules/ Generated SDK (created
+     on first run) - apphost.ts Your AppHost code - apphost.run.json -
+     package.json - tsconfig.json
+   </FileTree>
 
-    const builder = await createBuilder();
+3. Review the generated `apphost.ts`:
 
-    // Add Redis cache resource
-    const redis = builder.addRedis("cache");
+   ```typescript title="apphost.ts"
+   import { createBuilder } from './.modules/aspire.js';
 
-    const app = builder.build();
-    await app.run();
-    ```
+   const builder = await createBuilder();
 
-3. Run the AppHost:
+   // Add your resources here, for example:
+   // const redis = builder.addRedis("cache");
+   // const postgres = builder.addPostgres("db");
 
-    ```bash title="Run AppHost"
-    aspire run
-    ```
+   const app = builder.build();
+   await app.run();
+   ```
 
 </Steps>
 
-## Python
-
-### Runtime requirements
-
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [Python](https://www.python.org/downloads/) | 3.10+ | `python3` or `python` command |
-| [uv](https://docs.astral.sh/uv/) | Latest | Python package manager |
-
-Install uv if not already installed:
-
-```bash title="Install uv"
-curl -LsSf https://astral.sh/uv/install.sh | sh
-```
-
-### Create a Python AppHost
+</Pivot>
+<Pivot id="python">
 
 <Steps>
 
 1. Create a new directory and initialize the AppHost:
 
-    ```bash title="Initialize Python AppHost"
-    mkdir my-apphost && cd my-apphost
-    aspire init -l python
-    ```
+   ```bash title="Initialize Python AppHost"
+   mkdir my-apphost && cd my-apphost
+   aspire init -l python
+   ```
 
 2. The following project structure is created:
 
-    <FileTree>
-    - my-apphost/
-        - .aspire/
-            - settings.json
-        - .modules/  Generated SDK (created on first run)
-        - apphost.py  Your AppHost code
-        - apphost.run.json
-        - requirements.txt
-        - uv-install.py
-    </FileTree>
+   <FileTree>
+     - my-apphost/ - .aspire/ - settings.json - .modules/ Generated SDK (created
+     on first run) - apphost.py Your AppHost code - apphost.run.json -
+     requirements.txt - uv-install.py
+   </FileTree>
 
 3. Review the generated `apphost.py`:
 
-    ```python title="apphost.py"
-    import sys
-    from pathlib import Path
-    sys.path.insert(0, str(Path(__file__).parent / ".modules"))
+   ```python title="apphost.py"
+   import sys
+   from pathlib import Path
+   sys.path.insert(0, str(Path(__file__).parent / ".modules"))
 
-    from aspire import create_builder
+   from aspire import create_builder
 
-    builder = create_builder()
+   builder = create_builder()
 
-    # Add your resources here, for example:
-    # redis = builder.add_redis("cache")
-    # postgres = builder.add_postgres("db")
+   # Add your resources here, for example:
+   # redis = builder.add_redis("cache")
+   # postgres = builder.add_postgres("db")
 
-    builder.build().run()
-    ```
+   builder.build().run()
+   ```
 
 </Steps>
 
-### Add Redis integration
+</Pivot>
+<Pivot id="go">
 
 <Steps>
 
-1. Add the Redis integration:
+1. Create a new directory and initialize the AppHost:
 
-    ```bash title="Add Redis"
-    aspire add Aspire.Hosting.Redis
-    ```
+   ```bash title="Initialize Go AppHost"
+   mkdir my-apphost && cd my-apphost
+   aspire init -l go
+   ```
 
-2. Update `apphost.py` to use Redis:
+2. The following project structure is created:
+
+   <FileTree>
+     - my-apphost/ - .aspire/ - settings.json - .modules/ Generated SDK -
+     apphost.go Your AppHost code - apphost.run.json - go.mod
+   </FileTree>
 
-    ```python title="apphost.py" ins={10-11}
-    import sys
-    from pathlib import Path
-    sys.path.insert(0, str(Path(__file__).parent / ".modules"))
+3. Review the generated `apphost.go`:
 
-    from aspire import create_builder
+   ```go title="apphost.go"
+   package main
+
+   import (
+       "log"
+       "apphost/modules/aspire"
+   )
+
+   func main() {
+       builder, err := aspire.CreateBuilder(nil)
+       if err != nil {
+           log.Fatalf("Failed to create builder: %v", err)
+       }
+
+       // Add your resources here, for example:
+       // redis, _ := builder.AddRedis("cache", 0, nil)
+       // postgres, _ := builder.AddPostgres("db", 0, nil, nil)
+
+       app, err := builder.Build()
+       if err != nil {
+           log.Fatalf("Failed to build: %v", err)
+       }
+       if err := app.Run(nil); err != nil {
+           log.Fatalf("Failed to run: %v", err)
+       }
+   }
+   ```
 
-    builder = create_builder()
+</Steps>
 
-    # Add Redis cache resource
-    redis = builder.add_redis("cache")
+</Pivot>
+<Pivot id="rust">
 
-    builder.build().run()
-    ```
+<Steps>
 
-3. Run the AppHost:
+1. Create a new directory and initialize the AppHost:
 
-    ```bash title="Run AppHost"
-    aspire run
-    ```
+   ```bash title="Initialize Rust AppHost"
+   mkdir my-apphost && cd my-apphost
+   aspire init -l rust
+   ```
 
-</Steps>
+2. The following project structure is created:
 
-## Go
+   <FileTree>
+     - my-apphost/ - .aspire/ - settings.json - .modules/ Generated SDK -
+     apphost.rs Marker file - apphost.run.json - Cargo.toml - src/ - main.rs
+     Your AppHost code
+   </FileTree>
 
-### Runtime requirements
+3. Review the generated `src/main.rs`:
+
+   ```rust title="src/main.rs"
+   #[path = "../.modules/mod.rs"]
+   mod aspire;
 
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [Go](https://go.dev/dl/) | 1.23+ | Required for module support |
+   use aspire::*;
 
-### Create a Go AppHost
+   fn main() -> Result<(), Box<dyn std::error::Error>> {
+       let builder = create_builder(None)?;
+
+       // Add your resources here, for example:
+       // let redis = builder.add_redis("cache", None, None)?;
+       // let postgres = builder.add_postgres("db", None, None, None)?;
+
+       let app = builder.build()?;
+       app.run(None)?;
+       Ok(())
+   }
+   ```
+
+</Steps>
+
+</Pivot>
+<Pivot id="java">
 
 <Steps>
 
 1. Create a new directory and initialize the AppHost:
 
-    ```bash title="Initialize Go AppHost"
-    mkdir my-apphost && cd my-apphost
-    aspire init -l go
-    ```
+   ```bash title="Initialize Java AppHost"
+   mkdir my-apphost && cd my-apphost
+   aspire init -l java
+   ```
 
 2. The following project structure is created:
 
-    <FileTree>
-    - my-apphost/
-        - .aspire/
-            - settings.json
-        - .modules/  Generated SDK
-        - apphost.go  Your AppHost code
-        - apphost.run.json
-        - go.mod
-    </FileTree>
+   <FileTree>
+     - my-apphost/ - .aspire/ - settings.json - .modules/ Generated SDK -
+     AppHost.java Your AppHost code - apphost.run.json
+   </FileTree>
 
-3. Review the generated `apphost.go`:
+3. Review the generated `AppHost.java`:
 
-    ```go title="apphost.go"
-    package main
-
-    import (
-        "log"
-        "apphost/modules/aspire"
-    )
-
-    func main() {
-        builder, err := aspire.CreateBuilder(nil)
-        if err != nil {
-            log.Fatalf("Failed to create builder: %v", err)
-        }
-
-        // Add your resources here, for example:
-        // redis, _ := builder.AddRedis("cache", 0, nil)
-        // postgres, _ := builder.AddPostgres("db", 0, nil, nil)
-
-        app, err := builder.Build()
-        if err != nil {
-            log.Fatalf("Failed to build: %v", err)
-        }
-        if err := app.Run(nil); err != nil {
-            log.Fatalf("Failed to run: %v", err)
-        }
-    }
-    ```
+   ```java title="AppHost.java"
+   package aspire;
+
+   public class AppHost {
+       public static void main(String[] args) {
+           try {
+               IDistributedApplicationBuilder builder = Aspire.createBuilder(null);
+
+               // Add your resources here, for example:
+               // var redis = builder.addRedis("cache", null, null);
+               // var postgres = builder.addPostgres("db", null, null, null);
+
+               DistributedApplication app = builder.build();
+               app.run(null);
+           } catch (Exception e) {
+               System.err.println("Failed to run: " + e.getMessage());
+               e.printStackTrace();
+               System.exit(1);
+           }
+       }
+   }
+   ```
 
 </Steps>
 
+</Pivot>
+
 ### Add Redis integration
 
+<Pivot id="typescript">
+
 <Steps>
 
 1. Add the Redis integration:
 
-    ```bash title="Add Redis"
-    aspire add Aspire.Hosting.Redis
-    ```
+   ```bash title="Add Redis"
+   aspire add Aspire.Hosting.Redis
+   ```
 
-2. Update `apphost.go` to use Redis:
-
-    ```go title="apphost.go" ins={15-19}
-    package main
-
-    import (
-        "log"
-        "apphost/modules/aspire"
-    )
-
-    func main() {
-        builder, err := aspire.CreateBuilder(nil)
-        if err != nil {
-            log.Fatalf("Failed to create builder: %v", err)
-        }
-
-        // Add Redis cache resource (name, port, password)
-        // Use 0 for default port, nil for no password
-        _, err = builder.AddRedis("cache", 0, nil)
-        if err != nil {
-            log.Fatalf("Failed to add Redis: %v", err)
-        }
-
-        app, err := builder.Build()
-        if err != nil {
-            log.Fatalf("Failed to build: %v", err)
-        }
-        if err := app.Run(nil); err != nil {
-            log.Fatalf("Failed to run: %v", err)
-        }
-    }
-    ```
+2. Update `apphost.ts` to use Redis:
 
-3. Run the AppHost:
+   ```typescript title="apphost.ts" ins={5-6}
+   import { createBuilder } from './.modules/aspire.js';
 
-    ```bash title="Run AppHost"
-    aspire run
-    ```
+   const builder = await createBuilder();
 
-</Steps>
+   // Add Redis cache resource
+   const redis = builder.addRedis('cache');
 
-## Rust
+   const app = builder.build();
+   await app.run();
+   ```
 
-<Aside type="caution" title="Experimental">
-Rust support is experimental and may have compilation issues with some integrations. Please report any issues on the [Aspire GitHub repository](https://github.com/dotnet/aspire/issues).
-</Aside>
+3. Run the AppHost:
 
-### Runtime requirements
+   ```bash title="Run AppHost"
+   aspire run
+   ```
 
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [Rust](https://rustup.rs/) | Latest stable | Via rustup |
-| Cargo | Latest | Included with Rust |
+</Steps>
 
-### Create a Rust AppHost
+</Pivot>
+<Pivot id="python">
 
 <Steps>
 
-1. Create a new directory and initialize the AppHost:
+1. Add the Redis integration:
 
-    ```bash title="Initialize Rust AppHost"
-    mkdir my-apphost && cd my-apphost
-    aspire init -l rust
-    ```
+   ```bash title="Add Redis"
+   aspire add Aspire.Hosting.Redis
+   ```
 
-2. The following project structure is created:
+2. Update `apphost.py` to use Redis:
 
-    <FileTree>
-    - my-apphost/
-        - .aspire/
-            - settings.json
-        - .modules/  Generated SDK
-        - apphost.rs  Marker file
-        - apphost.run.json
-        - Cargo.toml
-        - src/
-            - main.rs  Your AppHost code
-    </FileTree>
+   ```python title="apphost.py" ins={9-10}
+   import sys
+   from pathlib import Path
+   sys.path.insert(0, str(Path(__file__).parent / ".modules"))
 
-3. Review the generated `src/main.rs`:
+   from aspire import create_builder
 
-    ```rust title="src/main.rs"
-    #[path = "../.modules/mod.rs"]
-    mod aspire;
+   builder = create_builder()
 
-    use aspire::*;
+   # Add Redis cache resource
+   redis = builder.add_redis("cache")
 
-    fn main() -> Result<(), Box<dyn std::error::Error>> {
-        let builder = create_builder(None)?;
+   builder.build().run()
+   ```
 
-        // Add your resources here, for example:
-        // let redis = builder.add_redis("cache", None, None)?;
-        // let postgres = builder.add_postgres("db", None, None, None)?;
+3. Run the AppHost:
 
-        let app = builder.build()?;
-        app.run(None)?;
-        Ok(())
-    }
-    ```
+   ```bash title="Run AppHost"
+   aspire run
+   ```
 
 </Steps>
 
-### Add Redis integration
+</Pivot>
+<Pivot id="go">
 
 <Steps>
 
 1. Add the Redis integration:
 
-    ```bash title="Add Redis"
-    aspire add Aspire.Hosting.Redis
-    ```
-
-2. Update `src/main.rs` to use Redis:
-
-    ```rust title="src/main.rs" ins={10-11}
-    #[path = "../.modules/mod.rs"]
-    mod aspire;
+   ```bash title="Add Redis"
+   aspire add Aspire.Hosting.Redis
+   ```
 
-    use aspire::*;
-
-    fn main() -> Result<(), Box<dyn std::error::Error>> {
-        let builder = create_builder(None)?;
-
-        // Add Redis cache resource (name, port, password)
-        builder.add_redis("cache", None, None)?;
+2. Update `apphost.go` to use Redis:
 
-        let app = builder.build()?;
-        app.run(None)?;
-        Ok(())
-    }
-    ```
+   ```go title="apphost.go" ins={14-18}
+   package main
+
+   import (
+       "log"
+       "apphost/modules/aspire"
+   )
+
+   func main() {
+       builder, err := aspire.CreateBuilder(nil)
+       if err != nil {
+           log.Fatalf("Failed to create builder: %v", err)
+       }
+
+       // Add Redis cache resource (name, port, password)
+       // Use 0 for default port, nil for no password
+       _, err = builder.AddRedis("cache", 0, nil)
+       if err != nil {
+           log.Fatalf("Failed to add Redis: %v", err)
+       }
+
+       app, err := builder.Build()
+       if err != nil {
+           log.Fatalf("Failed to build: %v", err)
+       }
+       if err := app.Run(nil); err != nil {
+           log.Fatalf("Failed to run: %v", err)
+       }
+   }
+   ```
 
 3. Run the AppHost:
 
-    ```bash title="Run AppHost"
-    aspire run
-    ```
+   ```bash title="Run AppHost"
+   aspire run
+   ```
 
 </Steps>
 
-## Java
+</Pivot>
+<Pivot id="rust">
 
-### Runtime requirements
+<Steps>
+
+1. Add the Redis integration:
 
-| Requirement | Version | Notes |
-|-------------|---------|-------|
-| [Java JDK](https://adoptium.net/) | 17+ | OpenJDK/Temurin recommended |
+   ```bash title="Add Redis"
+   aspire add Aspire.Hosting.Redis
+   ```
 
-### Create a Java AppHost
+2. Update `src/main.rs` to use Redis:
 
-<Steps>
+   ```rust title="src/main.rs" ins={9-10}
+   #[path = "../.modules/mod.rs"]
+   mod aspire;
 
-1. Create a new directory and initialize the AppHost:
+   use aspire::*;
 
-    ```bash title="Initialize Java AppHost"
-    mkdir my-apphost && cd my-apphost
-    aspire init -l java
-    ```
+   fn main() -> Result<(), Box<dyn std::error::Error>> {
+       let builder = create_builder(None)?;
 
-2. The following project structure is created:
+       // Add Redis cache resource (name, port, password)
+       builder.add_redis("cache", None, None)?;
 
-    <FileTree>
-    - my-apphost/
-        - .aspire/
-            - settings.json
-        - .modules/  Generated SDK
-        - AppHost.java  Your AppHost code
-        - apphost.run.json
-    </FileTree>
+       let app = builder.build()?;
+       app.run(None)?;
+       Ok(())
+   }
+   ```
 
-3. Review the generated `AppHost.java`:
+3. Run the AppHost:
 
-    ```java title="AppHost.java"
-    package aspire;
-
-    public class AppHost {
-        public static void main(String[] args) {
-            try {
-                IDistributedApplicationBuilder builder = Aspire.createBuilder(null);
-
-                // Add your resources here, for example:
-                // var redis = builder.addRedis("cache", null, null);
-                // var postgres = builder.addPostgres("db", null, null, null);
-
-                DistributedApplication app = builder.build();
-                app.run(null);
-            } catch (Exception e) {
-                System.err.println("Failed to run: " + e.getMessage());
-                e.printStackTrace();
-                System.exit(1);
-            }
-        }
-    }
-    ```
+   ```bash title="Run AppHost"
+   aspire run
+   ```
 
 </Steps>
 
-### Add Redis integration
+</Pivot>
+<Pivot id="java">
 
 <Steps>
 
 1. Add the Redis integration:
 
-    ```bash title="Add Redis"
-    aspire add Aspire.Hosting.Redis
-    ```
+   ```bash title="Add Redis"
+   aspire add Aspire.Hosting.Redis
+   ```
 
 2. Update `AppHost.java` to use Redis:
 
-    ```java title="AppHost.java" ins={10-11}
-    package aspire;
-
-    public class AppHost {
-        public static void main(String[] args) {
-            try {
-                IDistributedApplicationBuilder builder = Aspire.createBuilder(null);
-
-                // Add Redis cache resource (name, port, password)
-                // Use null for default port and no password
-                builder.addRedis("cache", null, null);
-
-                DistributedApplication app = builder.build();
-                app.run(null);
-            } catch (Exception e) {
-                System.err.println("Failed to run: " + e.getMessage());
-                e.printStackTrace();
-                System.exit(1);
-            }
-        }
-    }
-    ```
+   ```java title="AppHost.java" ins={8-10}
+   package aspire;
+
+   public class AppHost {
+       public static void main(String[] args) {
+           try {
+               IDistributedApplicationBuilder builder = Aspire.createBuilder(null);
+
+               // Add Redis cache resource (name, port, password)
+               // Use null for default port and no password
+               builder.addRedis("cache", null, null);
+
+               DistributedApplication app = builder.build();
+               app.run(null);
+           } catch (Exception e) {
+               System.err.println("Failed to run: " + e.getMessage());
+               e.printStackTrace();
+               System.exit(1);
+           }
+       }
+   }
+   ```
 
 3. Run the AppHost:
 
-    ```bash title="Run AppHost"
-    aspire run
-    ```
+   ```bash title="Run AppHost"
+   aspire run
+   ```
 
 </Steps>
 
+</Pivot>
+
 ## Adding integrations
 
 To add Aspire hosting integrations to your polyglot AppHost, use the `aspire add` command:
 
 ```bash title="Add integrations"
-# Add Redis
-aspire add Aspire.Hosting.Redis
-
 # Add PostgreSQL
-aspire add Aspire.Hosting.PostgreSQL
+aspire add postgreSQL
 
 # Add RabbitMQ
-aspire add Aspire.Hosting.RabbitMQ
+aspire add rabbitmq
 
 # Add Azure Storage
-aspire add Aspire.Hosting.Azure.Storage
+aspire add azure_storage
 ```
 
 When you add an integration, the Aspire CLI:
 
+<Steps>
+
 1. Updates `.aspire/settings.json` with the package reference
 2. Regenerates the language-specific SDK in the `.modules` directory
 3. Makes the new APIs available in your AppHost code
 
+</Steps>
+
 <LearnMore>
-For a complete list of available integrations, see the [integrations overview](/integrations/overview/).
+  Explore all [available integrations](/integrations/overview/) or see the
+  [aspire add reference](/reference/cli/commands/aspire-add/).
 </LearnMore>
 
 ## Troubleshooting
 
+If you encounter issues with your polyglot AppHost, this section provides guidance on diagnosing and resolving common problems.
+
 ### Common issues
 
+Here are solutions to common problems you may encounter when working with polyglot AppHosts.
+
 #### "Command not found" errors
 
 Ensure the language runtime is installed and available in your PATH:
 
+<Pivot id="typescript">
+
 <OsAwareTabs syncKey="terminal">
   <div slot="unix">
 
-```bash title="Verify installations"
-# Python
-python3 --version
+```bash title="Verify Node.js installation"
+node --version
+npm --version
+```
 
-# Go
-go version
+  </div>
+  <div slot="windows">
 
-# Rust
-rustc --version
+```powershell title="Verify Node.js installation"
+node --version
+npm --version
+```
 
-# Java
-java -version
+  </div>
+</OsAwareTabs>
 
-# Node.js
-node --version
+</Pivot>
+<Pivot id="python">
+
+<OsAwareTabs syncKey="terminal">
+  <div slot="unix">
+
+```bash title="Verify Python installation"
+python3 --version
+uv --version
 ```
 
   </div>
   <div slot="windows">
 
-```powershell title="Verify installations"
-# Python
+```powershell title="Verify Python installation"
 python --version
+uv --version
+```
 
-# Go
+  </div>
+</OsAwareTabs>
+
+</Pivot>
+<Pivot id="go">
+
+<OsAwareTabs syncKey="terminal">
+  <div slot="unix">
+
+```bash title="Verify Go installation"
+go version
+```
+
+  </div>
+  <div slot="windows">
+
+```powershell title="Verify Go installation"
 go version
+```
+
+  </div>
+</OsAwareTabs>
 
-# Rust
+</Pivot>
+<Pivot id="rust">
+
+<OsAwareTabs syncKey="terminal">
+  <div slot="unix">
+
+```bash title="Verify Rust installation"
 rustc --version
+cargo --version
+```
+
+  </div>
+  <div slot="windows">
+
+```powershell title="Verify Rust installation"
+rustc --version
+cargo --version
+```
 
-# Java
+  </div>
+</OsAwareTabs>
+
+</Pivot>
+<Pivot id="java">
+
+<OsAwareTabs syncKey="terminal">
+  <div slot="unix">
+
+```bash title="Verify Java installation"
 java -version
+```
 
-# Node.js
-node --version
+  </div>
+  <div slot="windows">
+
+```powershell title="Verify Java installation"
+java -version
 ```
 
   </div>
 </OsAwareTabs>
 
+</Pivot>
+
 #### "Polyglot support not enabled"
 
 Enable polyglot support in the Aspire CLI configuration:
@@ -626,10 +757,14 @@ aspire config set features:polyglotSupportEnabled true --global
 
 If you encounter compilation errors in the generated SDK:
 
+<Steps>
+
 1. Ensure you have the latest version of the Aspire CLI installed
 2. Delete the `.modules` directory and run `aspire run` again to regenerate the SDK
 3. Check the [Aspire GitHub issues](https://github.com/dotnet/aspire/issues) for known problems
 
+</Steps>
+
 ### Debug mode
 
 Run with debug output to diagnose issues:
@@ -638,16 +773,16 @@ Run with debug output to diagnose issues:
 aspire run --debug
 ```
 
+<LearnMore>
+  See the [aspire run command reference](/reference/cli/commands/aspire-run/).
+</LearnMore>
+
 ### Check logs
 
 Aspire CLI logs are stored at:
 
 <OsAwareTabs syncKey="terminal">
-  <Code
-    slot="unix"
-    lang="bash"
-    code="~/.aspire/cli/logs/"
-  />
+  <Code slot="unix" lang="bash" code="~/.aspire/cli/logs/" />
   <Code
     slot="windows"
     lang="powershell"
@@ -669,6 +804,7 @@ When reporting issues, please include:
 
 ## See also
 
+- [Provide feedback on GitHub](https://github.com/dotnet/aspire/issues)
 - [AppHost overview](/get-started/app-host/)
 - [Aspire CLI reference](/reference/cli/overview/)
 - [Integrations overview](/integrations/overview/)
diff --git a/src/frontend/src/content/docs/architecture/resource-model.mdx b/src/frontend/src/content/docs/architecture/resource-model.mdx
index e05c2d69c..a8b34ca30 100644
--- a/src/frontend/src/content/docs/architecture/resource-model.mdx
+++ b/src/frontend/src/content/docs/architecture/resource-model.mdx
@@ -49,6 +49,10 @@ architecture-beta
 
 </Steps>
 
+<LearnMore>
+Prefer writing your AppHost in a language other than C#? See [Polyglot AppHost](/app-host/polyglot-apphost/) to write your AppHost in TypeScript, Python, Go, Rust, or Java.
+</LearnMore>
+
 ## Resource basics
 
 In Aspire, a **resource** is the fundamental unit for modeling your distributed applications. Resources represent services, infrastructure elements, or supporting components that together compose a distributed system.
diff --git a/src/frontend/src/content/docs/get-started/app-host.mdx b/src/frontend/src/content/docs/get-started/app-host.mdx
index ee9244d9b..080eda0e7 100644
--- a/src/frontend/src/content/docs/get-started/app-host.mdx
+++ b/src/frontend/src/content/docs/get-started/app-host.mdx
@@ -15,6 +15,7 @@ Aspire's AppHost is the code-first place where you declare your application's se
 <PivotSelector
     title="Select your API platform"
     key="lang"
+    marginTop="1"
     options={[
         { id: "csharp", title: "C#" },
         { id: "python", title: "Python" },
@@ -24,6 +25,10 @@ Aspire's AppHost is the code-first place where you declare your application's se
     ]}
 />
 
+<LearnMore>
+Prefer writing your AppHost in TypeScript, Python, Go, Rust, or Java? See [Polyglot AppHost](/app-host/polyglot-apphost/) to learn how.
+</LearnMore>
+
 ## Defining your architecture
 
 Consider a simple three-tier architecture where the front end talks to an API, and the API talks to a database:
diff --git a/src/frontend/src/styles/site.css b/src/frontend/src/styles/site.css
index 71b0c125c..59d75cbbd 100644
--- a/src/frontend/src/styles/site.css
+++ b/src/frontend/src/styles/site.css
@@ -5,6 +5,7 @@
 @import '@fontsource/poppins/700.css';
 @import '@fontsource-variable/fira-code/wght.css';
 @import './cookieconsent-custom.css';
+@import './utils.css';
 
 :root {
   --aspire-color-purple: #512bd4;
@@ -972,4 +973,4 @@ table th {
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--aspire-color-secondary) var(--sl-color-bg-nav);
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/styles/utils.css b/src/frontend/src/styles/utils.css
new file mode 100644
index 000000000..7cdbee549
--- /dev/null
+++ b/src/frontend/src/styles/utils.css
@@ -0,0 +1,507 @@
+/* Padding utilities */
+.p-0 {
+    padding: 0;
+}
+
+.p-1 {
+    padding: 0.25rem;
+}
+
+.p-2 {
+    padding: 0.5rem;
+}
+
+.p-3 {
+    padding: 0.75rem;
+}
+
+.p-4 {
+    padding: 1rem;
+}
+
+.p-5 {
+    padding: 1.25rem;
+}
+
+.p-6 {
+    padding: 1.5rem;
+}
+
+.p-8 {
+    padding: 2rem;
+}
+
+.px-0 {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
+
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}
+
+.px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+.px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+.py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+}
+
+.py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+}
+
+.py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.pt-0 {
+    padding-top: 0;
+}
+
+.pt-1 {
+    padding-top: 0.25rem;
+}
+
+.pt-2 {
+    padding-top: 0.5rem;
+}
+
+.pt-3 {
+    padding-top: 0.75rem;
+}
+
+.pt-4 {
+    padding-top: 1rem;
+}
+
+.pt-5 {
+    padding-top: 1.25rem;
+}
+
+.pt-6 {
+    padding-top: 1.5rem;
+}
+
+.pt-8 {
+    padding-top: 2rem;
+}
+
+.pb-0 {
+    padding-bottom: 0;
+}
+
+.pb-1 {
+    padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+    padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+    padding-bottom: 0.75rem;
+}
+
+.pb-4 {
+    padding-bottom: 1rem;
+}
+
+.pb-5 {
+    padding-bottom: 1.25rem;
+}
+
+.pb-6 {
+    padding-bottom: 1.5rem;
+}
+
+.pb-8 {
+    padding-bottom: 2rem;
+}
+
+.pl-0 {
+    padding-left: 0;
+}
+
+.pl-1 {
+    padding-left: 0.25rem;
+}
+
+.pl-2 {
+    padding-left: 0.5rem;
+}
+
+.pl-3 {
+    padding-left: 0.75rem;
+}
+
+.pl-4 {
+    padding-left: 1rem;
+}
+
+.pl-5 {
+    padding-left: 1.25rem;
+}
+
+.pl-6 {
+    padding-left: 1.5rem;
+}
+
+.pl-8 {
+    padding-left: 2rem;
+}
+
+.pr-0 {
+    padding-right: 0;
+}
+
+.pr-1 {
+    padding-right: 0.25rem;
+}
+
+.pr-2 {
+    padding-right: 0.5rem;
+}
+
+.pr-3 {
+    padding-right: 0.75rem;
+}
+
+.pr-4 {
+    padding-right: 1rem;
+}
+
+.pr-5 {
+    padding-right: 1.25rem;
+}
+
+.pr-6 {
+    padding-right: 1.5rem;
+}
+
+.pr-8 {
+    padding-right: 2rem;
+}
+
+/* Margin utilities */
+.m-0 {
+    margin: 0;
+}
+
+.m-1 {
+    margin: 0.25rem;
+}
+
+.m-2 {
+    margin: 0.5rem;
+}
+
+.m-3 {
+    margin: 0.75rem;
+}
+
+.m-4 {
+    margin: 1rem;
+}
+
+.m-5 {
+    margin: 1.25rem;
+}
+
+.m-6 {
+    margin: 1.5rem;
+}
+
+.m-8 {
+    margin: 2rem;
+}
+
+.m-auto {
+    margin: auto;
+}
+
+.mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+}
+
+.mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+.mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+}
+
+.mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+}
+
+.mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+}
+
+.mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mt-0 {
+    margin-top: 0;
+}
+
+.mt-1 {
+    margin-top: 0.25rem;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-3 {
+    margin-top: 0.75rem;
+}
+
+.mt-4 {
+    margin-top: 1rem;
+}
+
+.mt-5 {
+    margin-top: 1.25rem;
+}
+
+.mt-6 {
+    margin-top: 1.5rem;
+}
+
+.mt-8 {
+    margin-top: 2rem;
+}
+
+.mt-auto {
+    margin-top: auto;
+}
+
+.mb-0 {
+    margin-bottom: 0;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+    margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.mb-5 {
+    margin-bottom: 1.25rem;
+}
+
+.mb-6 {
+    margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+    margin-bottom: 2rem;
+}
+
+.mb-auto {
+    margin-bottom: auto;
+}
+
+.ml-0 {
+    margin-left: 0;
+}
+
+.ml-1 {
+    margin-left: 0.25rem;
+}
+
+.ml-2 {
+    margin-left: 0.5rem;
+}
+
+.ml-3 {
+    margin-left: 0.75rem;
+}
+
+.ml-4 {
+    margin-left: 1rem;
+}
+
+.ml-5 {
+    margin-left: 1.25rem;
+}
+
+.ml-6 {
+    margin-left: 1.5rem;
+}
+
+.ml-8 {
+    margin-left: 2rem;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.mr-0 {
+    margin-right: 0;
+}
+
+.mr-1 {
+    margin-right: 0.25rem;
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.mr-3 {
+    margin-right: 0.75rem;
+}
+
+.mr-4 {
+    margin-right: 1rem;
+}
+
+.mr-5 {
+    margin-right: 1.25rem;
+}
+
+.mr-6 {
+    margin-right: 1.5rem;
+}
+
+.mr-8 {
+    margin-right: 2rem;
+}
+
+.mr-auto {
+    margin-right: auto;
+}
\ No newline at end of file