Correct Community Toolkit add-on and migration docs

src/frontend/config/sidebar/integrations.topics.ts

@@ -1386,7 +1386,10 @@ export const integrationTopics: StarlightSidebarTopicsUserConfig = {
             { label: 'Bun', slug: 'integrations/frameworks/bun-apps' },
             { label: 'Deno', slug: 'integrations/frameworks/deno-apps' },
             { label: 'JavaScript', slug: 'integrations/frameworks/javascript' },
-            { label: 'Node.js extensions', slug: 'integrations/frameworks/nodejs-extensions' },
+            {
+              label: 'JavaScript monorepo extensions',
+              slug: 'integrations/frameworks/nodejs-extensions',
+            },
           ],
         },
         { label: 'Perl', slug: 'integrations/frameworks/perl' },

src/frontend/src/content/docs/deployment/javascript-apps.mdx

@@ -1315,4 +1315,4 @@ Using the implicit default `runScriptName` (`"dev"`) without any custom argument
 - [Deploy your first Aspire app](/get-started/deploy-first-app/)
 - [JavaScript integration](/integrations/frameworks/javascript/)
 - [Publishing and deployment overview](/deployment/deploy-with-aspire/)
-- [Node.js hosting extensions](/integrations/frameworks/nodejs-extensions/)
+- [JavaScript monorepo hosting extensions](/integrations/frameworks/nodejs-extensions/)

src/frontend/src/content/docs/integrations/caching/redis-extensions.mdx

@@ -16,6 +16,7 @@ import redisIcon from '@assets/icons/redis-icon.png';
   alt="Redis logo"
   width={100}
   height={100}
+  fit="contain"
   class:list={'float-inline-left icon'}
   data-zoom-off
 />
@@ -25,6 +26,7 @@ The Aspire Community Toolkit Redis hosting extensions package provides extra fun
 This package provides the following features:
 
 - [DbGate](https://dbgate.org/) management UI
+- dbx management UI
 
 ## Hosting integration
 
@@ -59,7 +61,7 @@ This updates your `aspire.config.json` with the Redis extensions package:
 
 ### DbGate management UI
 
-To add the DbGate management UI to your Redis resource, call the `WithDbGate` method on the `RedisResource` instance:
+To add the DbGate management UI, decorate the official Redis resource with `WithDbGate` / `withDbGate`:
 
 <Tabs syncKey='aspire-lang'>
 <TabItem id='csharp' label='C#'>
@@ -68,38 +70,77 @@ To add the DbGate management UI to your Redis resource, call the `WithDbGate` me
 var builder = DistributedApplication.CreateBuilder(args);
 
 var redis = builder.AddRedis("redis")
-                   .WithDbGate();
+    .WithDbGate();
 
-builder.AddProject<Projects.ExampleProject>()
-       .WithReference(redis);
+builder.AddProject<Projects.ExampleProject>("example-project")
+    .WithReference(redis);
 
-// After adding all resources, run the app...
+builder.Build().Run();
 ```
 
 </TabItem>
 <TabItem id='typescript' label='TypeScript'>
 
 ```typescript title="apphost.mts"
-import { createBuilder } from "./.aspire/modules/aspire.mjs";
+import { createBuilder } from './.aspire/modules/aspire.mjs';
 
 const builder = await createBuilder();
 
-const redis = await builder.addRedis("redis");
+const redis = await builder.addRedis('redis');
 await redis.withDbGate();
 
 const exampleProject = await builder.addProject(
-    "example-project",
-    "../ExampleProject/ExampleProject.csproj");
+  'example-project',
+  '../ExampleProject/ExampleProject.csproj'
+);
 await exampleProject.withReference(redis);
 
-// After adding all resources, run the app...
+await builder.build().run();
 ```
 
 </TabItem>
 </Tabs>
 
 This adds a new DbGate resource to the app host which is available from the Aspire dashboard. DbGate is a comprehensive database management tool that provides a web-based interface for managing your Redis databases.
 
+### dbx management UI
+
+[dbx](https://github.com/t8y2/dbx) is a lightweight, web-based database client and an alternative management UI to DbGate and Adminer. Decorate the Redis resource with `WithDbx` / `withDbx` to add it:
+
+<Tabs syncKey='aspire-lang'>
+<TabItem id='csharp' label='C#'>
+
+```csharp title="AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
+
+var redis = builder.AddRedis("redis")
+    .WithDbx();
+
+builder.Build().Run();
+```
+
+</TabItem>
+<TabItem id='typescript' label='TypeScript'>
+
+```typescript title="apphost.mts"
+import { createBuilder } from './.aspire/modules/aspire.mjs';
+
+const builder = await createBuilder();
+
+const redis = await builder.addRedis('redis');
+await redis.withDbx({
+  containerName: 'redis-dbx',
+  imageTag: '0.5.33',
+});
+
+await builder.build().run();
+```
+
+</TabItem>
+</Tabs>
+
+The C# overload accepts an optional container configuration callback and `containerName`. The TypeScript binding accepts optional `containerName` and `imageTag` values.
+
 ## See also
 
 - [DbGate documentation](https://dbgate.org/)

src/frontend/src/content/docs/integrations/databases/mongodb/mongodb-extensions.mdx

@@ -1,6 +1,6 @@
 ---
 title: Use community extensions for MongoDB hosting
-description: Extend the functionality of your MongoDB hosting with the Aspire Community Toolkit, including the DbGate management UI.
+description: Decorate official Aspire MongoDB resources with Community Toolkit DbGate and dbx management interfaces for local development.
 ---
 
 import { Badge, Tabs, TabItem } from '@astrojs/starlight/components';
@@ -15,6 +15,7 @@ import mongodbIcon from '@assets/icons/mongodb-icon.png';
   alt="MongoDB logo"
   width={100}
   height={100}
+  fit="contain"
   class:list={'float-inline-left icon'}
   data-zoom-off
 />
@@ -24,6 +25,7 @@ The Aspire Community Toolkit MongoDB hosting extensions package provides extra f
 This package provides the following features:
 
 - [DbGate](https://dbgate.org/) management UI
+- dbx management UI
 
 ## Hosting integration
 
@@ -45,7 +47,7 @@ For TypeScript AppHosts, add the Community Toolkit MongoDB extensions package to
 
 ### DbGate management UI
 
-To add the [DbGate](https://dbgate.org/) management UI to your MongoDB resource, call the `WithDbGate` method on the `MongoDBResourceBuilder` instance:
+To add the [DbGate](https://dbgate.org/) management UI, decorate the official `MongoDBServerResource` builder with `WithDbGate` / `withDbGate`:
 
 <Tabs syncKey="aspire-lang">
 <TabItem id="csharp" label="C#">
@@ -66,14 +68,14 @@ builder.Build().Run();
 <TabItem id="typescript" label="TypeScript">
 
 ```typescript title="apphost.mts"
-import { createBuilder } from "./.aspire/modules/aspire.mjs";
+import { createBuilder } from './.aspire/modules/aspire.mjs';
 
 const builder = await createBuilder();
 
-const mongodb = await builder.addMongoDB("mongodb");
+const mongodb = await builder.addMongoDB('mongodb');
 await mongodb.withDbGate();
 
-const api = await builder.addProject("api", "../Api/Api.csproj");
+const api = await builder.addProject('api', '../Api/Api.csproj');
 await api.withReference(mongodb);
 
 await builder.build().run();
@@ -84,6 +86,44 @@ await builder.build().run();
 
 This adds a new DbGate resource to the AppHost which is available from the Aspire dashboard. DbGate is a comprehensive database management tool that provides a web-based interface for managing your MongoDB databases.
 
+### dbx management UI
+
+[dbx](https://github.com/t8y2/dbx) is a lightweight, web-based database client and an alternative management UI to DbGate and Adminer. Use `WithDbx` / `withDbx` to add a dbx child resource configured for the MongoDB server:
+
+<Tabs syncKey="aspire-lang">
+<TabItem id="csharp" label="C#">
+
+```csharp title="AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
+
+var mongodb = builder.AddMongoDB("mongodb")
+    .WithDbx();
+
+builder.Build().Run();
+```
+
+</TabItem>
+<TabItem id="typescript" label="TypeScript">
+
+```typescript title="apphost.mts"
+import { createBuilder } from './.aspire/modules/aspire.mjs';
+
+const builder = await createBuilder();
+
+const mongodb = await builder.addMongoDB('mongodb');
+await mongodb.withDbx({
+  containerName: 'mongodb-dbx',
+  imageTag: '0.5.33',
+});
+
+await builder.build().run();
+```
+
+</TabItem>
+</Tabs>
+
+The C# overload accepts an optional container configuration callback and `containerName`. The TypeScript binding accepts optional `containerName` and `imageTag` values.
+
 ## See also
 
 - [DbGate documentation](https://dbgate.org/)

src/frontend/src/content/docs/integrations/databases/mysql/mysql-extensions.mdx

@@ -1,6 +1,6 @@
 ---
 title: Use community extensions for MySQL hosting
-description: Extend the functionality of your MySQL hosting with the Aspire Community Toolkit, including management UIs like Adminer and DbGate.
+description: Decorate official Aspire MySQL resources with Community Toolkit Adminer, DbGate, and dbx management interfaces.
 ---
 
 import { Badge, Tabs, TabItem } from '@astrojs/starlight/components';
@@ -15,6 +15,7 @@ import mysqlIcon from '@assets/icons/mysqlconnector-icon.png';
   alt="MySQL logo"
   width={100}
   height={100}
+  fit="contain"
   class:list={'float-inline-left icon'}
   data-zoom-off
 />
@@ -25,6 +26,7 @@ This package provides the following features:
 
 - [Adminer](https://adminer.org/) management UI
 - [DbGate](https://dbgate.org/) management UI
+- dbx management UI
 
 ## Hosting integration
 
@@ -46,7 +48,7 @@ For TypeScript AppHosts, add the Community Toolkit MySQL extensions package to `
 
 ### DbGate management UI
 
-To add the [DbGate](https://dbgate.org/) management UI to your MySQL resource, call the `WithDbGate` method on the `MySqlServerResourceBuilder` instance:
+To add the [DbGate](https://dbgate.org/) management UI, decorate the official `MySqlServerResource` builder with `WithDbGate` / `withDbGate`:
 
 <Tabs syncKey="aspire-lang">
 <TabItem id="csharp" label="C#">
@@ -67,14 +69,14 @@ builder.Build().Run();
 <TabItem id="typescript" label="TypeScript">
 
 ```typescript title="apphost.mts"
-import { createBuilder } from "./.aspire/modules/aspire.mjs";
+import { createBuilder } from './.aspire/modules/aspire.mjs';
 
 const builder = await createBuilder();
 
-const mysql = await builder.addMySql("mysql");
+const mysql = await builder.addMySql('mysql');
 await mysql.withDbGate();
 
-const api = await builder.addProject("api", "../Api/Api.csproj");
+const api = await builder.addProject('api', '../Api/Api.csproj');
 await api.withReference(mysql);
 
 await builder.build().run();
@@ -87,7 +89,7 @@ This adds a new DbGate resource to the AppHost which is available from the Aspir
 
 ### Adminer management UI
 
-To add the [Adminer](https://adminer.org/) management UI to your MySQL resource, call the `WithAdminer` method on the `MySqlServerResourceBuilder` instance:
+To add the [Adminer](https://adminer.org/) management UI, decorate the official `MySqlServerResource` builder with `WithAdminer` / `withAdminer`:
 
 <Tabs syncKey="aspire-lang">
 <TabItem id="csharp" label="C#">
@@ -108,14 +110,14 @@ builder.Build().Run();
 <TabItem id="typescript" label="TypeScript">
 
 ```typescript title="apphost.mts"
-import { createBuilder } from "./.aspire/modules/aspire.mjs";
+import { createBuilder } from './.aspire/modules/aspire.mjs';
 
 const builder = await createBuilder();
 
-const mysql = await builder.addMySql("mysql");
+const mysql = await builder.addMySql('mysql');
 await mysql.withAdminer();
 
-const api = await builder.addProject("api", "../Api/Api.csproj");
+const api = await builder.addProject('api', '../Api/Api.csproj');
 await api.withReference(mysql);
 
 await builder.build().run();
@@ -150,15 +152,15 @@ builder.Build().Run();
 <TabItem id="typescript" label="TypeScript">
 
 ```typescript title="apphost.mts"
-import { createBuilder } from "./.aspire/modules/aspire.mjs";
+import { createBuilder } from './.aspire/modules/aspire.mjs';
 
 const builder = await createBuilder();
 
-const mysql = await builder.addMySql("mysql");
+const mysql = await builder.addMySql('mysql');
 await mysql.withDbGate();
 await mysql.withAdminer();
 
-const api = await builder.addProject("api", "../Api/Api.csproj");
+const api = await builder.addProject('api', '../Api/Api.csproj');
 await api.withReference(mysql);
 
 await builder.build().run();
@@ -167,6 +169,44 @@ await builder.build().run();
 </TabItem>
 </Tabs>
 
+### dbx management UI
+
+[dbx](https://github.com/t8y2/dbx) is a lightweight, web-based database client and an alternative management UI to DbGate and Adminer. Use `WithDbx` / `withDbx` to add a dbx child resource configured for the MySQL server:
+
+<Tabs syncKey="aspire-lang">
+<TabItem id="csharp" label="C#">
+
+```csharp title="AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
+
+var mysql = builder.AddMySql("mysql")
+    .WithDbx();
+
+builder.Build().Run();
+```
+
+</TabItem>
+<TabItem id="typescript" label="TypeScript">
+
+```typescript title="apphost.mts"
+import { createBuilder } from './.aspire/modules/aspire.mjs';
+
+const builder = await createBuilder();
+
+const mysql = await builder.addMySql('mysql');
+await mysql.withDbx({
+  containerName: 'mysql-dbx',
+  imageTag: '0.5.33',
+});
+
+await builder.build().run();
+```
+
+</TabItem>
+</Tabs>
+
+The C# overload accepts an optional container configuration callback and `containerName`. The TypeScript binding accepts optional `containerName` and `imageTag` values.
+
 ## See also
 
 - [Adminer documentation](https://www.adminer.org/)