React Website to AgentCore Gateway

The connection generator can connect a React website to the agents fronted by an AgentCore Gateway generated with protocol: http.

The browser talks only to the Gateway — requests to <gatewayUrl>/<targetName>/invocations are proxied to the agent runtime behind it. Because the website never needs to reach the runtimes directly, the agents can be deployed inside a VPC, with the Gateway as the single governed entry point providing authentication and observability.

Prerequisites

Before using this generator, ensure you have:

1. A React website project
2. An agentcore-gateway project generated with protocol: http
3. At least one AG-UI or HTTP agent attached to the Gateway via the Gateway to agent connection generator

The generator creates a website client for each AG-UI or HTTP agent attached to the Gateway (A2A targets are skipped — they speak agent-to-agent JSON-RPC, not a browser protocol). It generates the same clients as connecting the website to each agent directly (AG-UI/CopilotKit for AG-UI agents, an OpenAPI client for Python HTTP agents), routed through the Gateway rather than at the runtime.

Authentication

The browser authenticates with the Gateway, not the agents: SigV4 for an IAM Gateway (via the website’s Cognito identity pool), or a JWT bearer token for a Cognito Gateway.

Usage

Run the Generator

VSCode

1. Install the Nx Console VSCode Plugin if you haven't already
2. Open the Nx Console in VSCode
3. Click Generate (UI) in the "Common Nx Commands" section
4. Search for @aws/nx-plugin - connection
5. Fill in the required parameters
6. Click Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:connection

yarn

yarn nx g @aws/nx-plugin:connection

npm

npx nx g @aws/nx-plugin:connection

bun

bunx nx g @aws/nx-plugin:connection

You can also perform a dry-run to see what files would be changed

pnpm

pnpm nx g @aws/nx-plugin:connection --dry-run

yarn

yarn nx g @aws/nx-plugin:connection --dry-run

npm

npx nx g @aws/nx-plugin:connection --dry-run

bun

bunx nx g @aws/nx-plugin:connection --dry-run

Select the website project as the source and the Gateway project as the target.

Options

Parameter	Type	Default	Description
sourceProject Required	string	-	The source project
targetProject Required	string	-	The target project to connect to
sourceComponent	string	-	The source component to connect from (component name, path relative to source project root, or generator id). Use '.' to explicitly select the project as the source.
targetComponent	string	-	The target component to connect to (component name, path relative to target project root, or generator id). Use '.' to explicitly select the project as the target.
preferInstallDependencies	boolean	true	Whether to prefer installing dependencies after the generator runs. Set to false to defer installing when batching multiple generators (an install still runs if needed so subsequent generators can compute the Nx project graph); install once at the end.

Generator Output

For each fronted AG-UI agent, the same files as the React to AG-UI agent connection are generated (an AguiProvider, a useAgui<Agent> hook and a themed CopilotKit component module), with the hook reading the Gateway’s URL from runtime configuration:

• Directorypackages/<website>/src

  • Directorycomponents

    • AguiProvider.tsx CopilotKit provider registering each agent
    • Directorycopilot/ Themed chat components

      • …
  • Directoryhooks

    • useAgui<Agent>.tsx Connects to the agent via the Gateway’s /<targetName>/invocations route

For each fronted Python HTTP agent, the same files as the React to Python agent connection are generated (a type-safe OpenAPI client, hooks, and a provider), with the client’s base URL routed through the Gateway.

The Gateway’s URL is registered in the connection.gateways.<GatewayClassName> namespace of Runtime Configuration, so it is published to the website’s runtime-config.json.

Granting website users access

For an IAM Gateway, grant the website’s authenticated users permission to invoke it (a Cognito Gateway needs no grant — the browser authenticates with its JWT bearer token instead):

CDK

packages/infra/src/stacks/application-stack.ts

const identity = new UserIdentity(this, 'UserIdentity');
new Website(this, 'Website');

const myGateway = new MyGateway(this, 'MyGateway');
myGateway.addAgent(myAgent);
myGateway.grantInvokeAccess(identity.identityPool.authenticatedRole);

Terraform

packages/infra/src/main.tf

resource "aws_iam_policy" "gateway_invoke_policy" {
  name = "GatewayInvokePolicy"

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect   = "Allow"
        Action   = ["bedrock-agentcore:InvokeGateway"]
        Resource = [module.my_gateway.gateway_arn]
      }
    ]
  })
}

resource "aws_iam_role_policy_attachment" "authenticated_gateway_access" {
  role       = module.user_identity.authenticated_role_name
  policy_arn = aws_iam_policy.gateway_invoke_policy.arn
}

Local Development

The website’s dev target gains a dependency on the Gateway project’s dev target, which starts the local gateway plus every attached agent. The website’s runtime configuration is overridden in local-dev mode to point the Gateway’s URL at the local gateway, so the browser exercises the same /<targetName>/invocations routes locally:

pnpm

pnpm nx dev <website-name>

yarn

yarn nx dev <website-name>

npm

npx nx dev <website-name>

bun

bunx nx dev <website-name>

Connecting new agents

The generator connects the website to the agents attached to the Gateway at the time it runs. After attaching another agent to the Gateway, re-run the connection generator to generate its website client — existing clients are left untouched.