{"slug": "build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui", "title": "Build generative UI for AI agents on Amazon Bedrock AgentCore with the AG-UI protocol", "summary": "Amazon Web Services announced support for the AG-UI protocol on Amazon Bedrock AgentCore, enabling AI agents to render interactive charts, update shared canvases, and pause for human approval. The integration, demonstrated through the Fullstack AgentCore Solution Template and CopilotKit, allows developers to build decoupled agent backends and frontends with generative UI and human-in-the-loop interactions.", "body_md": "[Artificial Intelligence](https://aws.amazon.com/blogs/machine-learning/)\n\n# Build generative UI for AI agents on Amazon Bedrock AgentCore with the AG-UI protocol\n\nAI agents can do more than chat. With the right protocol, an agent can render an interactive chart inline in your conversation, update a shared canvas in real time, or pause mid-execution to ask for your approval before proceeding. These interactions (generative UI, shared state, and human-in-the-loop) need a standard way for agent backends to communicate dynamic events to frontends.\n\n[AG-UI](https://docs.ag-ui.com/introduction) (Agent-User Interaction Protocol) is an open protocol that defines this standard. It works with multiple agent frameworks (Strands Agents, LangGraph, CrewAI) and frontend libraries (React, Angular, Vue). With AG-UI, your agent code and your frontend code stay decoupled. You pick the best framework for your backend and the best library for your frontend, and AG-UI connects them.\n\n[Amazon Bedrock AgentCore](https://aws.amazon.com/bedrock/agentcore/) is part of the [Amazon Bedrock](https://aws.amazon.com/bedrock/) family of services for generative AI. AgentCore is an agentic platform for building, deploying, and operating AI agents securely at scale, using any framework and any model.\n\nThis post walks through how AG-UI integrates into the [Fullstack AgentCore Solution Template (FAST)](https://github.com/awslabs/fullstack-solution-template-for-agentcore) to build interactive agent frontends on Amazon Bedrock AgentCore. We then show how [CopilotKit](https://copilotkit.ai/) extends this with generative UI, shared state, and human-in-the-loop interactions, all deployed on Amazon Bedrock AgentCore.\n\n## Overview of solution\n\nAmazon Bedrock AgentCore Runtime provides a secure, serverless, and purpose-built hosting environment for deploying and running AI agents or tools. AgentCore Runtime supports several agent protocols. Model Context Protocol (MCP) connects agents to tools, Agent2Agent (A2A) connects agents to other agents, and AG-UI connects agents to users. When you deploy an agent container with the AG-UI protocol flag, AgentCore acts as a transparent proxy. It handles authentication (Signature Version 4 [SigV4] or OAuth 2.0 through Amazon Cognito), session isolation, scaling, and observability. Your container exposes `POST /invocations`\n\nfor AG-UI requests and `GET /ping`\n\nfor health checks on port 8080. AgentCore passes requests through unchanged. For more details, see [Deploy AGUI servers in AgentCore Runtime](https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/runtime-agui.html).\n\nFAST is a ready-to-deploy starter project. It connects AgentCore Runtime, Gateway, Identity, Memory, and Code Interpreter with a React frontend and Amazon Cognito authentication, all defined with AWS Cloud Development Kit (AWS CDK). It ships with agent patterns for Strands Agents, LangGraph, and the Claude Agent SDK. FAST v0.4.1 added two AG-UI patterns (`agui-strands-agent`\n\nand `agui-langgraph-agent`\n\n) that share a single frontend parser. For a full walkthrough of FAST’s architecture and deployment, see [Accelerate agentic application development with a full-stack starter template for Amazon Bedrock AgentCore](https://aws.amazon.com/blogs/machine-learning/accelerate-agentic-application-development-with-a-full-stack-starter-template-for-amazon-bedrock-agentcore/).\n\nThe solution has two layers. **AG-UI in FAST** provides two new agent patterns and a single frontend parser that handles both, so the frontend doesn’t need to know which agent framework is running. **CopilotKit + FAST** is a standalone sample that replaces FAST’s built-in chat UI with CopilotKit. It adds generative UI (inline charts and components), bidirectional shared state (a todo canvas), and human-in-the-loop interactions (a meeting scheduler that pauses the agent and waits for your input). Both layers deploy on AgentCore Runtime with Cognito authentication, AgentCore Gateway for MCP tool connectivity, and AgentCore Memory for persistent conversations.\n\n## Walkthrough\n\nThis walkthrough has two parts. First, we show how the AG-UI patterns work in FAST and how a single frontend parser handles both Strands and LangGraph backends. Second, we deploy the CopilotKit sample to demonstrate generative UI, shared state, and human-in-the-loop on AgentCore.\n\nSource code:\n\n### Prerequisites\n\nFor this walkthrough, you should have the following prerequisites:\n\n- An\n[AWS account](https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fportal.aws.amazon.com%2Fbilling%2Fsignup%2Fresume&client_id=signup)with permissions for AWS CloudFormation, Amazon Elastic Container Registry (Amazon ECR), Amazon Bedrock AgentCore, Amazon Cognito, and AWS Amplify. [AWS Command Line Interface (AWS CLI) v2](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)installed and configured.[AWS CDK](https://docs.aws.amazon.com/cdk/v2/guide/getting-started.html)installed.[Node.js 18 or later](https://nodejs.org/)and Python 3.11 or later.- Docker running, for container builds.\n- Model access enabled in the Amazon Bedrock console for the model the agent uses.\n\n### AG-UI in FAST: One parser, two frameworks\n\nThe `agui-strands-agent`\n\npattern wraps a Strands Agent in `StrandsAgent`\n\nfrom the `ag-ui-strands`\n\nlibrary. The wrapper translates Strands streaming events into AG-UI Server-Sent Events automatically.\n\nEach request creates a fresh agent with Gateway MCP tools. AgentCore Memory is attached per thread through a session-manager provider, so conversation history persists across AgentCore Runtime scaling. Memory is opt-in: the provider returns `None`\n\nwhen `MEMORY_ID`\n\nis unset:\n\n``` python\n# patterns/agui-strands-agent/agent.py\nfrom ag_ui_strands import StrandsAgent, StrandsAgentConfig\nfrom bedrock_agentcore.runtime import BedrockAgentCoreApp, RequestContext\nfrom strands import Agent\n\napp = BedrockAgentCoreApp()\n\n# Build the model and Code Interpreter once at module load\nMODEL = BedrockModel(model_id=\"us.anthropic.claude-sonnet-4-5-20250929-v1:0\")\nCODE_INTERPRETER = StrandsCodeInterpreterTools(REGION).execute_python_securely\n\n@app.entrypoint\nasync def invocations(payload: dict, context: RequestContext):\n    input_data = RunAgentInput.model_validate(payload)\n    actor_id = extract_user_id_from_context(context)\n    # Fresh agent per request --- picks up the caller's identity and tools\n    agent = Agent(\n        model=MODEL,\n        system_prompt=SYSTEM_PROMPT,\n        tools=[create_gateway_mcp_client(actor_id), CODE_INTERPRETER],\n        session_manager=get_memory_session_manager(actor_id, session_id),\n    )\n    agui_agent = StrandsAgent(\n        agent=agent,\n        name=\"agui_strands_agent\",\n        config=StrandsAgentConfig(\n            session_manager_provider=make_memory_provider(actor_id),\n            replay_history_into_strands=False,\n        ),\n    )\n    async for event in agui_agent.run(input_data):\n        yield event.model_dump(mode=\"json\", by_alias=True, exclude_none=True)\n```\n\n`BedrockAgentCoreApp`\n\nreads the AgentCore Runtime headers (`WorkloadAccessToken`\n\n, `Authorization`\n\n, `Session-Id`\n\n) and populates context variables, so Gateway authentication and Memory work the same way as the HTTP patterns.\n\nThe `agui-langgraph-agent`\n\npattern uses `LangGraphAGUIAgent`\n\nfrom the `copilotkit`\n\nlibrary. It builds the compiled graph fresh on every request, so each invocation gets MCP tools scoped to the caller. AgentCore Memory is opt-in here too: the helper returns `None`\n\nwhen `MEMORY_ID`\n\nis unset, so you can run the pattern without provisioning Memory:\n\n``` python\n# patterns/agui-langgraph-agent/agent.py\nfrom copilotkit import CopilotKitMiddleware, LangGraphAGUIAgent\n\nasync def build_graph(actor_id: str):\n    \"\"\"Build a fresh LangGraph compiled graph with Gateway tools.\"\"\"\n    mcp_client = await create_gateway_mcp_client(actor_id)\n    tools = await mcp_client.get_tools()\n    tools.append(CODE_INTERPRETER)\n    return create_agent(\n        model=MODEL,\n        tools=tools,\n        checkpointer=get_memory_saver(),  # None when MEMORY_ID is unset\n        middleware=[CopilotKitMiddleware()],\n        system_prompt=SYSTEM_PROMPT,\n    )\n\n@app.entrypoint\nasync def invocations(payload: dict, context: RequestContext):\n    input_data = RunAgentInput.model_validate(payload)\n    actor_id = extract_user_id_from_context(context)\n    graph = await build_graph(actor_id)\n    agui_agent = LangGraphAGUIAgent(\n        name=\"agui_langgraph_agent\",\n        graph=graph,\n        config={\"configurable\": {\"actor_id\": actor_id}},\n    )\n    async for event in agui_agent.run(input_data):\n        yield event.model_dump(mode=\"json\", by_alias=True, exclude_none=True)\n```\n\nBoth patterns produce the same AG-UI events. The protocol defines a typed event stream over Server-Sent Events. For example, a single tool call produces this sequence:\n\n```\ndata: {\"type\": \"RUN_STARTED\", \"threadId\": \"t1\", \"runId\": \"r1\"}\ndata: {\"type\": \"TEXT_MESSAGE_START\", \"messageId\": \"m1\", \"role\": \"assistant\"}\ndata: {\"type\": \"TEXT_MESSAGE_CONTENT\", \"messageId\": \"m1\", \"delta\": \"Let me check \"}\ndata: {\"type\": \"TEXT_MESSAGE_CONTENT\", \"messageId\": \"m1\", \"delta\": \"that for you.\"}\ndata: {\"type\": \"TEXT_MESSAGE_END\", \"messageId\": \"m1\"}\ndata: {\"type\": \"TOOL_CALL_START\", \"toolCallId\": \"tc1\", \"toolCallName\": \"get_weather\"}\ndata: {\"type\": \"TOOL_CALL_ARGS\", \"toolCallId\": \"tc1\", \"delta\": \"{\\\"location\\\": \\\"Seattle\\\"}\"}\ndata: {\"type\": \"TOOL_CALL_END\", \"toolCallId\": \"tc1\"}\ndata: {\"type\": \"TOOL_CALL_RESULT\", \"toolCallId\": \"tc1\", \"content\": \"{\\\"temp\\\": 55}\"}\ndata: {\"type\": \"RUN_FINISHED\", \"threadId\": \"t1\", \"runId\": \"r1\"}\n```\n\nThe frontend parser maps each event to a frontend action:\n\n``` js\n// frontend/src/lib/agentcore-client/parsers/agui.ts\nexport const parseAguiChunk: ChunkParser = (line, callback) => {\n  if (!line.startsWith(\"data: \")) return;\n  const json = JSON.parse(line.substring(6).trim());\n  switch (json.type) {\n    case \"TEXT_MESSAGE_CONTENT\":\n      callback({ type: \"text\", content: json.delta ?? \"\" });\n      break;\n    case \"TOOL_CALL_START\":\n      callback({ type: \"tool_use_start\", toolUseId: json.toolCallId, name: json.toolCallName });\n      break;\n    case \"TOOL_CALL_RESULT\":\n      callback({ type: \"tool_result\", toolUseId: json.toolCallId, result: json.content ?? \"\" });\n      break;\n    case \"RUN_FINISHED\":\n      callback({ type: \"result\", stopReason: \"end_turn\" });\n  }\n};\n```\n\nCompare this to the HTTP patterns, where Strands, LangGraph, and Claude-agent-sdk each need a separate parser to handle their different streaming formats. With AG-UI, the backend framework is abstracted away. You can swap `agui-strands-agent`\n\nfor `agui-langgraph-agent`\n\nin your configuration and the frontend doesn’t change.\n\nTo deploy, set the pattern in `infra-cdk/config.yaml`\n\nand run CDK:\n\n```\nbackend:\n  pattern: agui-strands-agent  # or agui-langgraph-agent\n  deployment_type: docker\ncd infra-cdk\ncdk deploy --require-approval never\npython3 ../scripts/deploy-frontend.py\n```\n\n### CopilotKit + FAST: Generative UI, shared state, and human-in-the-loop\n\nThe base FAST frontend provides a functional chat interface, but AG-UI supports much richer interactions: agents rendering custom UI components, syncing state with the frontend, and pausing for user input mid-execution. CopilotKit is a React library built specifically for these patterns. The CopilotKit team built a [sample application](https://github.com/aws-samples/sample-FAST-applications/tree/main/samples/copilotkit-generative-ui) on top of FAST that demonstrates these capabilities on AgentCore. It includes both LangGraph and Strands agent patterns, and you pick one at deploy time.\n\nGenerative UI spans a spectrum from high frontend control to high agent freedom. This sample sits at the controlled end: the frontend owns prebuilt React components, and the agent chooses which to render and supplies the data over AG-UI events. Further along the spectrum, agents return declarative UI descriptions that the frontend renders, or full UI surfaces that the frontend embeds. AG-UI carries all three, because it standardizes the event and state stream rather than the UI itself. The more freedom you hand the agent, the more you take on: open-ended surfaces need sandboxing and input validation.\n\n#### Generative UI: Agents render React components\n\nWith CopilotKit, the agent renders custom React components inline in the chat, not only text. The frontend registers components that the agent can invoke through AG-UI tool call events:\n\n```\n// Register a pie chart the agent can render\nuseComponent({\n  name: \"pieChart\",\n  description: \"Displays data as a pie chart.\",\n  parameters: PieChartPropsSchema,\n  render: PieChart,\n});\n```\n\nWhen the agent calls the `pieChart`\n\ntool, CopilotKit intercepts the `TOOL_CALL_START`\n\nand `TOOL_CALL_ARGS`\n\nevents and renders the `PieChart`\n\ncomponent directly in the conversation. The agent first calls a `query_data`\n\ntool to fetch data from a sample comma-separated values (CSV) file, then passes the results to the chart component.\n\n#### Shared state: A todo canvas synced with the agent\n\nThe sample includes a todo canvas that stays in sync between the agent and the UI bidirectionally. When you tell the agent “Add three tasks: design the API, write tests, and deploy to staging,” the agent calls `manage_todos`\n\nand the canvas updates in real time through AG-UI `STATE_SNAPSHOT`\n\nevents. You can also edit todos directly in the UI. The agent sees the updated state on its next turn because the Strands pattern injects the current todos into the system prompt:\n\n``` php\ndef state_context_builder(state: dict) -> str:\n    todos = state.get(\"todos\", [])\n    if todos:\n        return f\"\\nCurrent todos:\\n{json.dumps(todos, indent=2)}\"\n    return \"\"\n```\n\n#### Human-in-the-loop: The agent pauses and waits\n\nThe sample demonstrates a meeting scheduler where the agent pauses mid-execution and renders a time picker. The user selects a time, and the agent continues with that selection:\n\n```\nuseHumanInTheLoop({\n  name: \"scheduleTime\",\n  description: \"Schedule a meeting with the user.\",\n  parameters: z.object({\n    reasonForScheduling: z.string(),\n    meetingDuration: z.number(),\n  }),\n  render: ({ respond, status, args }) => (\n    <MeetingTimePicker status={status} respond={respond} {...args} />\n  ),\n});\n```\n\nThis works through AG-UI’s tool call flow: the agent emits `TOOL_CALL_START`\n\nfor `scheduleTime`\n\n, CopilotKit renders the picker instead of executing a backend tool, and the user’s response flows back as a `TOOL_CALL_RESULT`\n\n.\n\n#### Deploying the CopilotKit sample\n\nClone the FAST Samples repository and deploy:\n\n```\ngit clone https://github.com/aws-samples/sample-FAST-applications.git\ncd sample-FAST-applications/samples/copilotkit-generative-ui\ncp config.yaml.example config.yaml\n# Edit config.yaml --- set stack_name_base and admin_user_email\n./deploy-langgraph.sh  # or ./deploy-strands.sh\n```\n\nThe deploy script provisions the full stack: Amazon Cognito user pool, Amazon ECR repository, AgentCore Runtime, AgentCore Gateway, AgentCore Memory, the CopilotKit Runtime Lambda with Amazon API Gateway, and AWS Amplify hosting. When it finishes, open the Amplify URL printed at the end and log in. You’ll land on the CopilotKit chat interface, where a few quick checks confirm the deployment works:\n\n- Ask the agent for a pie chart from the sample data. It renders inline in the conversation.\n- Ask to add three tasks to the todo canvas. The canvas updates in real time.\n- Ask to schedule a meeting. The agent pauses and shows a time picker.\n\n### Cleaning up\n\nThe walkthrough deploys two separate stacks. Tear down whichever you deployed so they stop incurring charges.\n\nTo remove the FAST deployment:\n\n```\ncd infra-cdk\nnpx cdk destroy --all\n```\n\nTo remove the CopilotKit sample:\n\n```\ncd sample-FAST-applications/samples/copilotkit-generative-ui\nnpx cdk destroy --all\n```\n\nIf an Amazon ECR repository still holds container images, delete it by hand, since some CDK configurations keep repositories in place.\n\n## Conclusion\n\nThis post showed how to build interactive agent frontends on Amazon Bedrock AgentCore using the AG-UI protocol. The AG-UI integration in FAST lets you swap between Strands and LangGraph agent backends without changing your frontend code. The CopilotKit sample extends this with generative UI, shared state, and human-in-the-loop interactions, all running on AgentCore with managed auth, scaling, and memory.\n\nTo learn more, explore the following resources:\n\n[FAST repository](https://github.com/awslabs/fullstack-solution-template-for-agentcore): clone and deploy an AG-UI pattern with`pattern: agui-strands-agent`\n\nor`pattern: agui-langgraph-agent`\n\n.[CopilotKit Generative UI sample](https://github.com/aws-samples/sample-FAST-applications/tree/main/samples/copilotkit-generative-ui): try generative UI, shared state, and human-in-the-loop on AgentCore.[AgentCore AG-UI documentation](https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/runtime-agui.html): full protocol contract and deployment details.[AG-UI protocol specification](https://docs.ag-ui.com/concepts/overview): core event types and protocol design.[CopilotKit documentation](https://docs.copilotkit.ai/): frontend integration guide for generative UI.\n\nIf you have questions or feedback, open an issue in the [FAST repository](https://github.com/awslabs/fullstack-solution-template-for-agentcore/issues) or the [FAST Samples repository](https://github.com/aws-samples/sample-FAST-applications/issues).", "url": "https://wpnews.pro/news/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui", "canonical_source": "https://aws.amazon.com/blogs/machine-learning/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui-protocol/", "published_at": "2026-06-30 16:46:17+00:00", "updated_at": "2026-06-30 16:55:36.771538+00:00", "lang": "en", "topics": ["ai-agents", "generative-ai", "ai-infrastructure", "ai-tools", "developer-tools"], "entities": ["Amazon Web Services", "Amazon Bedrock AgentCore", "AG-UI", "CopilotKit", "Fullstack AgentCore Solution Template", "Strands Agents", "LangGraph", "CrewAI"], "alternates": {"html": "https://wpnews.pro/news/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui", "markdown": "https://wpnews.pro/news/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui.md", "text": "https://wpnews.pro/news/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui.txt", "jsonld": "https://wpnews.pro/news/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui.jsonld"}}