@aws/nx-plugin-mcp 1.0.0-rc.3 → 1.0.0-rc.30

package/docs/guides/react-website.mdx

@@ -1,12 +1,14 @@
 ---
 title: React Website
 description: Reference documentation for a React Website
-generator: ts#react-website
+generator: ts#website
 when:
   framework:
     - react
 ---
-import { FileTree, Steps } from '@astrojs/starlight/components';
+import { FileTree, Steps, CardGrid } from '@astrojs/starlight/components';
+import Astro from '@astrojs/react';
+import ConnectionCard from '@components/connection-card.astro';
 import Link from '@components/link.astro';
 import RunGenerator from '@components/run-generator.astro';
 import GeneratorParameters from '@components/generator-parameters.astro';
@@ -16,12 +18,12 @@ import Infrastructure from '@components/infrastructure.astro';
 import Snippet from '@components/snippet.astro';
 import OptionFilter from '@components/option-filter.astro';
 
-This generator creates a new [React](https://react.dev/) website with [Cloudscape](http://cloudscape.design/) configured by default, along with the AWS CDK or Terraform infrastructure to deploy your website to the cloud as a static website hosted in [S3](https://aws.amazon.com/s3/), served by [CloudFront](https://aws.amazon.com/cloudfront/) and protected by [WAF](https://aws.amazon.com/waf/).
+This generator creates a new [React](https://react.dev/) website with [shadcn/ui](https://ui.shadcn.com/) configured by default, along with the AWS CDK or Terraform infrastructure to deploy your website to the cloud as a static website hosted in [S3](https://aws.amazon.com/s3/), served by [CloudFront](https://aws.amazon.com/cloudfront/) and protected by [WAF](https://aws.amazon.com/waf/).
 
 The generated application uses [Vite](https://vite.dev/) as the build tool and bundler. It uses [TanStack Router](https://tanstack.com/router/v1) for type-safe routing.
 
 :::note[UX Provider]
-The default `uxProvider` is [Cloudscape](http://cloudscape.design/). You can also select [shadcn/ui](https://ui.shadcn.com/) or `None` (bring your own component library).
+The default `uxProvider` is [shadcn/ui](https://ui.shadcn.com/). You can also select [Cloudscape](http://cloudscape.design/) or `None` (bring your own component library).
 :::
 
 ## Usage
@@ -30,7 +32,7 @@ The default `uxProvider` is [Cloudscape](http://cloudscape.design/). You can als
 
 You can generate a new React Website in two ways:
 
-<RunGenerator generator="ts#website" />
+<RunGenerator generator="ts#website" requiredParameters={{ framework: 'react' }} />
 
 ### Options
 
@@ -126,6 +128,14 @@ waf -> cloudfront
 cloudfront -> s3
 ```
 
+#### Security Headers
+
+The CloudFront distribution applies a response headers policy that sets `Strict-Transport-Security`, `X-Content-Type-Options`, `X-Frame-Options: DENY`, `Referrer-Policy` and a `Content-Security-Policy` on all responses.
+
+A default `Content-Security-Policy` is enforced. It restricts scripts and framing to mitigate XSS and clickjacking, while permitting HTTPS and WSS connections so the website can call AWS service endpoints (such as API Gateway, Cognito and Bedrock AgentCore) whose URLs are only known at deploy time. To adjust the policy (for example to tighten `connect-src` to your specific origins), edit the `content_security_policy` value in your generated `static-website.ts` (CDK) or `static-website.tf` (Terraform).
+
+`runtime-config.json` is served with `Cache-Control: no-cache` so that browsers always fetch the latest configuration after a redeploy, rather than using a stale cached copy.
+
 ## Implementing your React Website
 
 The [React documentation](https://react.dev/learn) is a good place to start to learn the basics of building with React.
@@ -185,7 +195,7 @@ Configuration from your infrastructure is provided to your website via <Link hre
 
 <Infrastructure>
 <Fragment slot="cdk">
-The `RuntimeConfig` CDK construct can be used to add and retrieve configuration in your CDK infrastructure. The CDK constructs generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#trpc-api`</Link> and <Link path="guides/fastapi">`py#fast-api`</Link>) will automatically add appropriate values to the `RuntimeConfig`.
+The `RuntimeConfig` CDK construct can be used to add and retrieve configuration in your CDK infrastructure. The CDK constructs generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#api`</Link> and <Link path="guides/fastapi">`py#api`</Link>) will automatically add appropriate values to the `RuntimeConfig`.
 
 Your website CDK construct will deploy the `connection` namespace of the runtime configuration as a `runtime-config.json` file to the root of your S3 bucket.
 
@@ -214,7 +224,7 @@ With CDK, the website construct can be declared at any point in your stack. Runt
 :::
 </Fragment>
 <Fragment slot="terraform">
-With Terraform, runtime configuration is managed through the runtime-config modules. The Terraform modules generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#trpc-api`</Link> and <Link path="guides/fastapi">`py#fast-api`</Link>) will automatically add appropriate values to the runtime configuration.
+With Terraform, runtime configuration is managed through the runtime-config modules. The Terraform modules generated by `@aws/nx-plugin` generators (such as <Link path="guides/trpc">`ts#api`</Link> and <Link path="guides/fastapi">`py#api`</Link>) will automatically add appropriate values to the runtime configuration.
 
 Your website Terraform module will deploy the `connection` namespace of the runtime configuration as a `runtime-config.json` file to the root of your S3 bucket.
 
@@ -291,7 +301,11 @@ For Terraform projects, the `load:runtime-config` target copies the `runtime-con
 
 ## Local Development Server
 
-You can run a local development server using either the `serve` or `serve-local` target.
+The canonical command for local development is `dev`, which starts your website (and any local servers for APIs you've connected it to) with one command:
+
+<NxCommands commands={['dev <my-website>']} />
+
+The `serve` target is also available for when you need to control how much of your application runs locally versus pointing at deployed AWS infrastructure. For a broader overview of local development across connected projects, including how `dev` behaves for projects with multiple components, see the <Link path="guides/local-development">Local Development</Link> guide.
 
 ### Serve Target
 
@@ -303,46 +317,50 @@ You can run this target with the following command:
 
 This target is useful for working on website changes while pointing to "real" deployed APIs and other infrastructure.
 
-### Serve Local Target
+### Dev Target
 
-The `serve-local` target starts a local development server for your website (with [Vite `MODE`](https://vite.dev/guide/env-and-mode) set to `serve-local`), as well as starting any local servers for APIs you have connected your website to via the <Link path="/guides/connection">Connection generator</Link>.
+The `dev` target starts a local development server for your website (with [Vite `MODE`](https://vite.dev/guide/env-and-mode) set to `local-dev`), as well as starting any local servers for APIs you have connected your website to via the <Link path="/guides/connection">Connection generator</Link>.
 
 When your local website server is run via this target, `runtime-config.json` is automatically overridden to point to your locally running API urls.
 
 You can run this target with the following command:
 
-<NxCommands commands={['serve-local <my-website>']} />
+<NxCommands commands={['dev <my-website>']} />
 
 This target is useful when you are working across your website and API and wish to quickly iterate without deploying your infrastructure.
 
-:::note[`dev` script]
-If no `dev` script exists in your root `package.json` when this generator runs, a `dev` script is added that invokes `serve-local` for the generated website, meaning you can also start the local development server with:
+:::note[Workspace `dev` script]
+Your workspace's root `package.json` includes a `dev` script that runs the `dev` target for every project that has one:
 
 <PackageManagerShortCommand commands={["dev"]} />
 
-This makes the first React website you generate the default `dev` target for the workspace. Subsequent websites do not overwrite the existing `dev` script — you can invoke their `serve-local` targets directly, or update the script manually.
+This starts the local development server for your website (and any other projects with a `dev` target) in one command. To run just this website, use its own `dev` target (e.g. `nx dev <my-website>`).
 :::
 
 :::warning[Mock Authentication]
 When run in this mode and no `runtime-config.json` is present, if you have configured Cognito Authentication (via the <Link path="/guides/react-website-auth">`ts#website#auth` generator</Link>), login will be skipped and requests to your local servers will not include authentication headers.
 
-To enable login and authentication for `serve-local`, deploy your infrastructure and load runtime config.
+To enable login and authentication for `dev`, deploy your infrastructure and load runtime config.
 :::
 
-:::tip[Serve-Local Behavior]
-When running with `serve-local`, you can specify any environment variables required by your APIs to point to other deployed AWS resources, for example:
+:::tip[Dev Behavior]
+When running with `dev`, you can specify any environment variables required by your APIs to point to other deployed AWS resources, for example:
 
-<NxCommands env={{DYNAMODB_TABLE_NAME: 'xxxxx'}} commands={['serve-local <my-website>']} />
+<NxCommands env={{DYNAMODB_TABLE_NAME: 'xxxxx'}} commands={['dev <my-website>']} />
 
 Note that your local API servers will run with the AWS credentials you have configured locally.
 :::
 
 ## Building
 
-You can build your website using the `build` target. This use Vite to create a production bundle in the root `dist/packages/<my-website>/bundle` directory, as well as type-checking, compiling and linting your website.
+You can build your website using the `build` target. This runs the `bundle`, `compile`, `test` and `lint` targets, type-checking, bundling, testing and linting your website.
 
 <NxCommands commands={['build <my-website>']} />
 
+The `bundle` target uses Vite to create a production bundle in the root `dist/packages/<my-website>/bundle` directory. This is the deployable artifact consumed by your website infrastructure. You can run it on its own:
+
+<NxCommands commands={['bundle <my-website>']} />
+
 ## Testing
 
 Testing your website is much like writing tests in a standard TypeScript project, so please refer to the <Link path="guides/typescript-project#testing">TypeScript project guide</Link> for more details.
@@ -422,3 +440,53 @@ provider "aws" {
 </Fragment>
 </Infrastructure>
 
+## Connections
+
+Use the <Link path="guides/connection">`connection`</Link> generator to integrate this project with others in your workspace. The following connections involve this project:
+
+<CardGrid>
+  <ConnectionCard
+    title="React to tRPC"
+    description="Call a tRPC API from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-trpc`}
+    source="react"
+    target="trpc"
+  />
+  <ConnectionCard
+    title="React to FastAPI"
+    description="Call a Python FastAPI from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-fastapi`}
+    source="react"
+    target="fastapi"
+  />
+  <ConnectionCard
+    title="React to Smithy API"
+    description="Call a Smithy API from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-smithy`}
+    source="react"
+    target="smithy"
+  />
+  <ConnectionCard
+    title="React to Python Agent"
+    description="Call a Python Agent from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-py-agent`}
+    source="react"
+    target="strands"
+    targetBadge="python"
+  />
+  <ConnectionCard
+    title="React to TypeScript Agent"
+    description="Call a TypeScript Agent from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-ts-agent`}
+    source="react"
+    target="strands"
+    targetBadge="typescript"
+  />
+  <ConnectionCard
+    title="React to AG-UI Agent"
+    description="Call an Agent exposing the AG-UI protocol from a React website via CopilotKit"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-agui`}
+    source="react"
+    target="copilotkit"
+  />
+</CardGrid>

package/docs/guides/terraform-project.mdx

@@ -108,7 +108,7 @@ You can start writing your Terraform infrastructure inside `src/main.tf`, for ex
 
 ### Cross project dependencies
 
-If you wanted to execute a module from a seperate project (lib), you could do so as follows:
+If you wanted to execute a module from a separate project (lib), you could do so as follows:
 
 ```
 module "lib_module" {

package/docs/guides/trpc.mdx

@@ -1,12 +1,14 @@
 ---
 title: tRPC
 description: Reference documentation for tRPC
-generator: ts#trpc-api
+generator: ts#api
 when:
   framework: [trpc]
   infra: [rest-lambda, http-lambda]
 ---
-import { FileTree, Tabs, TabItem } from '@astrojs/starlight/components';
+import { FileTree, Tabs, TabItem, CardGrid } from '@astrojs/starlight/components';
+import Astro from '@astrojs/react';
+import ConnectionCard from '@components/connection-card.astro';
 import Link from '@components/link.astro';
 import RunGenerator from '@components/run-generator.astro';
 import GeneratorParameters from '@components/generator-parameters.astro';
@@ -25,11 +27,11 @@ The tRPC API generator creates a new tRPC API with AWS CDK or Terraform infrastr
 
 You can generate a new tRPC API in two ways:
 
-<RunGenerator generator="ts#trpc-api" />
+<RunGenerator generator="ts#api" requiredParameters={{ framework: 'trpc' }} />
 
 ### Options
 
-<GeneratorParameters generator="ts#trpc-api" />
+<GeneratorParameters generator="ts#api" />
 
 <Snippet name="api/api-choice-note" />
 
@@ -138,7 +140,7 @@ The example `echo` procedure is generated for you in `src/procedures/echo.ts`:
 export const echo = publicProcedure
   .input(EchoInputSchema)
   .output(EchoOutputSchema)
-  .query((opts) => ({ result: opts.input.message }));
+  .query((opts) => ({ message: opts.input.message }));
 ```
 
 To break down the above:
@@ -478,7 +480,7 @@ export interface IIdentityContext {
 
 Note that we define an additional _optional_ property on the context. tRPC manages ensuring that this is defined in procedures which have correctly configured this middleware.
 
-Next, the middleware itself. The generator wires the authorizer to accept ID tokens, so `cognito:username` is the canonical username claim; we fall back to `username` for access tokens in case you reconfigure the authorizer:
+Next, the middleware itself:
 
 ```ts
 import { initTRPC, TRPCError } from '@trpc/server';
@@ -503,7 +505,7 @@ export const createIdentityPlugin = () => {
       | undefined;
 
     const sub = claims?.sub;
-    const username = claims?.['cognito:username'] ?? claims?.username;
+    const username = claims?.username;
 
     if (!sub || !username) {
       throw new TRPCError({
@@ -541,8 +543,8 @@ export const me = publicProcedure
   }));
 ```
 
-:::tip[Verifying the token]
-You don't need `aws-jwt-verify` or any other JWT-verification library here — the API Gateway Cognito User Pools authorizer has already verified the signature, issuer, audience, and expiry by the time your Lambda runs. If any of those checks fail, API Gateway returns `401 Unauthorized` and your handler is never invoked.
+:::tip[No token verification required]
+You don't need `aws-jwt-verify` or any other JWT-verification library here — the API Gateway Cognito User Pools authorizer has already verified the signature, issuer, scopes, and expiry by the time your Lambda runs. If any of those checks fail, API Gateway returns `401 Unauthorized` and your handler is never invoked.
 :::
 </OptionFilter>
 
@@ -726,6 +728,12 @@ When using `Custom` auth, your API is protected by a Lambda Authorizer that **de
 <Snippet name="api/waf-configuration" parentHeading="WAF" />
 </OptionFilter>
 
+<OptionFilter when={{ infra: 'rest-lambda' }} description="Access logging — REST APIs log requests to CloudWatch by default">
+### Access logging
+
+<Snippet name="api/access-logging" parentHeading="Access logging" />
+</OptionFilter>
+
 ### Integrations
 
 <Snippet name="api/type-safe-api-integrations" parentHeading="Integrations" />
@@ -817,3 +825,31 @@ If you are calling your API from a React website, consider using the <Link path=
 ## More Information
 
 For more information about tRPC, please refer to the [tRPC documentation](https://trpc.io/docs).
+
+## Connections
+
+Use the <Link path="guides/connection">`connection`</Link> generator to integrate this project with others in your workspace. The following connections involve this project:
+
+<CardGrid>
+  <ConnectionCard
+    title="React to tRPC"
+    description="Call a tRPC API from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-trpc`}
+    source="react"
+    target="trpc"
+  />
+  <ConnectionCard
+    title="tRPC API to Relational Database"
+    description="Connect a tRPC API to an Aurora relational database"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/trpc-rdb`}
+    source="trpc"
+    target="aurora"
+  />
+  <ConnectionCard
+    title="tRPC API to TypeScript DynamoDB"
+    description="Connect a tRPC API to a DynamoDB table"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/trpc-dynamodb`}
+    source="trpc"
+    target="dynamodb"
+  />
+</CardGrid>

package/docs/guides/ts-agent.mdx

@@ -4,7 +4,9 @@ description: Generate a TypeScript Agent for building AI agents with tools and d
 generator: ts#agent
 ---
 
-import { FileTree, Tabs, TabItem } from '@astrojs/starlight/components';
+import { FileTree, Tabs, TabItem, CardGrid } from '@astrojs/starlight/components';
+import Astro from '@astrojs/react';
+import ConnectionCard from '@components/connection-card.astro';
 import RunGenerator from '@components/run-generator.astro';
 import NxCommands from '@components/nx-commands.astro';
 import Link from '@components/link.astro';
@@ -261,19 +263,61 @@ Most users will not need to modify `index.ts` — edit `agent.ts` to change tool
 
 ### Local Development
 
-The generator configures a target named `<your-agent-name>-serve`, which starts your Agent locally for development and testing.
+To run your Agent (and everything connected to it) locally, use the project's `dev` target:
 
-<NxCommands commands={['agent-serve your-project']} />
+<NxCommands commands={['dev your-project']} />
 
-This command uses `tsx --watch` to automatically restart the server when files change. The agent will be available at `http://localhost:8081` (or the assigned port if you have multiple agents).
+If you have added multiple components to your project (agents, MCP servers, etc.), this starts them all. To run just this agent, target its `<your-agent-name>-dev` target:
+
+<NxCommands commands={['agent-dev your-project']} />
+
+This uses `tsx --watch` to automatically restart the server when files change. The agent will be available at `http://localhost:8081` (or the assigned port if you have multiple agents).
 
 ### Chat with Your Agent
 
-The generator configures a `<your-agent-name>-chat` Nx target that depends on `<your-agent-name>-serve-local`. Running it starts the agent locally and drops you into an interactive terminal chat:
+The generator configures a `<your-agent-name>-chat` Nx target that drops you into an interactive terminal chat with your agent.
+
+The chat target runs standalone. By default it connects to your locally running agent, so start the agent's `<your-agent-name>-dev` target first (in a separate terminal):
+
+<NxCommands commands={['agent-dev your-project']} />
+
+Then, in another terminal, start the chat:
 
 <NxCommands commands={['run your-project:agent-chat']} />
 
-For **HTTP** (tRPC over WebSocket) agents, the generator also emits a tiny `scripts/<your-agent-name>/chat.ts` that wraps the generated `<Agent>Client.local({ url })` so you can customize it as you evolve the agent's input shape.
+The generator emits a `scripts/<your-agent-name>/chat.ts` for every protocol. You can customize it as you evolve the agent's input shape. It connects to the local agent by default, or to your deployed agent when `RUNTIME_CONFIG_APP_ID` is set (see [Chat with your deployed agent](#chat-with-your-deployed-agent) below).
+
+<OptionFilter when={{ infra: 'agentcore' }} description="Deployed agent chat details">
+#### Chat with your deployed agent
+
+To chat with your agent deployed to Bedrock AgentCore, set the `RUNTIME_CONFIG_APP_ID` environment variable to the AppConfig application id of the deployment (output as `RuntimeConfigApplicationId` by the deployed stack). The chat script resolves your agent's runtime ARN from runtime configuration and connects to the deployed endpoint:
+
+<Tabs syncKey="auth">
+<TabItem label="IAM" _filter={{ auth: 'iam' }}>
+For IAM-authenticated agents, requests are signed with [SigV4](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_sigv.html) using your default AWS credentials. Ensure the environment has AWS credentials with permission to invoke the runtime:
+
+<NxCommands commands={['run your-project:agent-chat']} env={{ RUNTIME_CONFIG_APP_ID: '<app-id>' }} />
+</TabItem>
+
+<TabItem label="Cognito" _filter={{ auth: 'cognito' }}>
+For Cognito-authenticated agents, provide a Cognito access token via the `AGENT_ACCESS_TOKEN` environment variable, which is sent as a bearer token:
+
+<NxCommands commands={['run your-project:agent-chat']} env={{ RUNTIME_CONFIG_APP_ID: '<app-id>', AGENT_ACCESS_TOKEN: '<access-token>' }} />
+
+You can obtain an access token using the AWS CLI's `cognito-idp admin-initiate-auth` command, for example:
+
+```bash
+aws cognito-idp admin-initiate-auth \
+  --user-pool-id <user-pool-id> \
+  --client-id <user-pool-client-id> \
+  --auth-flow ADMIN_NO_SRP_AUTH \
+  --auth-parameters USERNAME=<username>,PASSWORD=<password> \
+  --query 'AuthenticationResult.AccessToken' \
+  --output text
+```
+</TabItem>
+</Tabs>
+</OptionFilter>
 
 <OptionFilter when={{ infra: 'agentcore' }} description="Bedrock AgentCore Runtime deployment details">
 ## Deploying Your Agent to Bedrock AgentCore Runtime
@@ -434,3 +478,73 @@ To invoke your AG-UI agent from a React website, use the <Link path="/guides/con
 
 Refer to the <Link path="/guides/connection/react-agui">`connection` generator guide</Link> for details about how the connection is set up.
 </OptionFilter>
+
+## Connections
+
+Use the <Link path="guides/connection">`connection`</Link> generator to integrate this project with others in your workspace. The following connections involve this project:
+
+<CardGrid>
+  <ConnectionCard
+    title="React to TypeScript Agent"
+    description="Call a TypeScript Agent from a React website"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-ts-agent`}
+    source="react"
+    target="strands"
+    targetBadge="typescript"
+  />
+  <ConnectionCard
+    title="React to AG-UI Agent"
+    description="Call an Agent exposing the AG-UI protocol from a React website via CopilotKit"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/react-agui`}
+    source="react"
+    target="copilotkit"
+  />
+  <ConnectionCard
+    title="TypeScript Agent to MCP"
+    description="Connect a TypeScript Agent to an MCP server"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/ts-agent-mcp`}
+    source="strands"
+    sourceBadge="typescript"
+    target="mcp"
+  />
+  <ConnectionCard
+    title="TypeScript Agent to A2A Agent"
+    description="Connect a TypeScript Agent to a remote A2A agent"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/ts-agent-a2a`}
+    source="strands"
+    sourceBadge="typescript"
+    target="a2a"
+  />
+  <ConnectionCard
+    title="Python Agent to A2A Agent"
+    description="Connect a Python Agent to a remote A2A agent"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/py-agent-a2a`}
+    source="strands"
+    sourceBadge="python"
+    target="a2a"
+  />
+  <ConnectionCard
+    title="TypeScript Agent to Relational Database"
+    description="Connect a TypeScript Agent to an Aurora relational database"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/ts-agent-rdb`}
+    source="strands"
+    sourceBadge="typescript"
+    target="aurora"
+  />
+  <ConnectionCard
+    title="TypeScript Agent to TypeScript DynamoDB"
+    description="Connect a TypeScript Agent to a DynamoDB table"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/ts-agent-dynamodb`}
+    source="strands"
+    sourceBadge="typescript"
+    target="dynamodb"
+  />
+  <ConnectionCard
+    title="TypeScript Agent to AgentCore Gateway"
+    description="Connect a TypeScript Agent to an AgentCore Gateway"
+    href={`/nx-plugin-for-aws/${Astro.currentLocale || 'en'}/guides/connection/ts-agent-gateway`}
+    source="strands"
+    sourceBadge="typescript"
+    target="agentcore"
+  />
+</CardGrid>