AI brokers can do greater than chat. With the precise protocol, an agent can render an interactive chart inline in your dialog, replace a shared canvas in actual time, or pause mid-execution to ask to your approval earlier than continuing. These interactions (generative UI, shared state, and human-in-the-loop) want a normal method for agent backends to speak dynamic occasions to frontends.<\/p>\n
AG-UI (Agent-Consumer Interplay Protocol) is an open protocol that defines this customary. It really works with a number of agent frameworks (Strands Brokers, LangGraph, CrewAI) and frontend libraries (React, Angular, Vue). With AG-UI, your agent code and your frontend code keep decoupled. You choose the most effective framework to your backend and the most effective library to your frontend, and AG-UI connects them.<\/p>\n
Amazon Bedrock AgentCore is a part of the Amazon Bedrock household of providers for generative AI. AgentCore is an agentic platform for constructing, deploying, and working AI brokers securely at scale, utilizing any framework and any mannequin.<\/p>\n
This put up walks by way of how AG-UI integrates into the Fullstack AgentCore Resolution Template (FAST) to construct interactive agent frontends on Amazon Bedrock AgentCore. We then present how CopilotKit extends this with generative UI, shared state, and human-in-the-loop interactions, all deployed on Amazon Bedrock AgentCore.<\/p>\n
Overview of answer<\/h2>\n
Amazon Bedrock AgentCore Runtime gives a safe, serverless, and purpose-built internet hosting atmosphere for deploying and operating AI brokers or instruments. AgentCore Runtime helps a number of agent protocols. Mannequin Context Protocol (MCP) connects brokers to instruments, Agent2Agent (A2A) connects brokers to different brokers, and AG-UI connects brokers to customers. While you deploy an agent container with the AG-UI protocol flag, AgentCore acts as a clear proxy. It handles authentication (Signature Model 4 [SigV4] or OAuth 2.0 by way of Amazon Cognito), session isolation, scaling, and observability. Your container exposes POST \/invocations for AG-UI requests and GET \/ping for well being checks on port 8080. AgentCore passes requests by way of unchanged. For extra particulars, see Deploy AGUI servers in AgentCore Runtime.<\/p>\n
FAST is a ready-to-deploy starter challenge. It connects AgentCore Runtime, Gateway, Identification, Reminiscence, and Code Interpreter with a React frontend and Amazon Cognito authentication, all outlined with AWS Cloud Growth Equipment (AWS CDK). It ships with agent patterns for Strands Brokers, LangGraph, and the Claude Agent SDK. FAST v0.4.1 added two AG-UI patterns (agui-strands-agent and agui-langgraph-agent) that share a single frontend parser. For a full walkthrough of FAST\u2019s structure and deployment, see Speed up agentic software improvement with a full-stack starter template for Amazon Bedrock AgentCore.<\/p>\n
The answer has two layers. AG-UI in FAST gives two new agent patterns and a single frontend parser that handles each, so the frontend doesn\u2019t must know which agent framework is operating. CopilotKit + FAST is a standalone pattern that replaces FAST\u2019s built-in chat UI with CopilotKit. It provides generative UI (inline charts and parts), bidirectional shared state (a todo canvas), and human-in-the-loop interactions (a gathering scheduler that pauses the agent and waits to your enter). Each layers deploy on AgentCore Runtime with Cognito authentication, AgentCore Gateway for MCP software connectivity, and AgentCore Reminiscence for persistent conversations.<\/p>\n
![\"Architecture](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/25\/ml-20863-img1.png\")
<\/p>\nStructure overview. The frontend communicates with AgentCore Runtime by way of AG-UI occasions. AgentCore handles auth, scaling, and session isolation. The agent runtime interprets framework-specific occasions into the AG-UI protocol.<\/p>\n<\/p><\/div>\n
Walkthrough<\/h2>\n
This walkthrough has two components. First, we present how the AG-UI patterns work in FAST and the way a single frontend parser handles each Strands and LangGraph backends. Second, we deploy the CopilotKit pattern to display generative UI, shared state, and human-in-the-loop on AgentCore.<\/p>\n
Supply code:<\/p>\n
Conditions<\/h3>\n
For this walkthrough, you must have the next conditions:<\/p>\n
An AWS account with permissions for AWS CloudFormation, Amazon Elastic Container Registry (Amazon ECR), Amazon Bedrock AgentCore, Amazon Cognito, and AWS Amplify.
\n AWS Command Line Interface (AWS CLI) v2 put in and configured.
\n AWS CDK put in.
\n Node.js 18 or later and Python 3.11 or later.
\n Docker operating, for container builds.
\n Mannequin entry enabled within the Amazon Bedrock console for the mannequin the agent makes use of.<\/p>\n
AG-UI in FAST: One parser, two frameworks<\/h3>\n
The agui-strands-agent sample wraps a Strands Agent in StrandsAgent from the ag-ui-strands library. The wrapper interprets Strands streaming occasions into AG-UI Server-Despatched Occasions routinely.<\/p>\n
Every request creates a contemporary agent with Gateway MCP instruments. AgentCore Reminiscence is hooked up per thread by way of a session-manager supplier, so dialog historical past persists throughout AgentCore Runtime scaling. Reminiscence is opt-in: the supplier returns None when MEMORY_ID is unset:<\/p>\n
\nfrom ag_ui_strands import StrandsAgent, StrandsAgentConfig
\nfrom bedrock_agentcore.runtime import BedrockAgentCoreApp, RequestContext
\nfrom strands import Agent<\/p>\n
app = BedrockAgentCoreApp()<\/p>\n
# Construct the mannequin and Code Interpreter as soon as at module load
\nMODEL = BedrockModel(model_id=”us.anthropic.claude-sonnet-4-5-20250929-v1:0″)
\nCODE_INTERPRETER = StrandsCodeInterpreterTools(REGION).execute_python_securely<\/p>\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 # Recent agent per request — picks up the caller’s id and instruments
\n agent = Agent(
\n mannequin=MODEL,
\n system_prompt=SYSTEM_PROMPT,
\n instruments=[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 title=”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 occasion in agui_agent.run(input_data):
\n yield occasion.model_dump(mode=”json”, by_alias=True, exclude_none=True)\n <\/p><\/div>\n
BedrockAgentCoreApp reads the AgentCore Runtime headers (WorkloadAccessToken, Authorization, Session-Id) and populates context variables, so Gateway authentication and Reminiscence work the identical method because the HTTP patterns.<\/p>\n
The agui-langgraph-agent sample makes use of LangGraphAGUIAgent from the copilotkit library. It builds the compiled graph contemporary on each request, so every invocation will get MCP instruments scoped to the caller. AgentCore Reminiscence is opt-in right here too: the helper returns None when MEMORY_ID is unset, so you possibly can run the sample with out provisioning Reminiscence:<\/p>\n
\nfrom copilotkit import CopilotKitMiddleware, LangGraphAGUIAgent<\/p>\n
async def build_graph(actor_id: str):
\n “””Construct a contemporary LangGraph compiled graph with Gateway instruments.”””
\n mcp_client = await create_gateway_mcp_client(actor_id)
\n instruments = await mcp_client.get_tools()
\n instruments.append(CODE_INTERPRETER)
\n return create_agent(
\n mannequin=MODEL,
\n instruments=instruments,
\n checkpointer=get_memory_saver(), # None when MEMORY_ID is unset
\n middleware=[CopilotKitMiddleware()],
\n system_prompt=SYSTEM_PROMPT,
\n )<\/p>\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 title=”agui_langgraph_agent”,
\n graph=graph,
\n config={“configurable”: {“actor_id”: actor_id}},
\n )
\n async for occasion in agui_agent.run(input_data):
\n yield occasion.model_dump(mode=”json”, by_alias=True, exclude_none=True)\n <\/p><\/div>\n
Each patterns produce the identical AG-UI occasions. The protocol defines a typed occasion stream over Server-Despatched Occasions. For instance, a single software name produces this sequence:<\/p>\n
\ninformation: {“kind”: “TEXT_MESSAGE_START”, “messageId”: “m1”, “function”: “assistant”}
\ninformation: {“kind”: “TEXT_MESSAGE_CONTENT”, “messageId”: “m1”, “delta”: “Let me test “}
\ninformation: {“kind”: “TEXT_MESSAGE_CONTENT”, “messageId”: “m1”, “delta”: “that for you.”}
\ninformation: {“kind”: “TEXT_MESSAGE_END”, “messageId”: “m1”}
\ninformation: {“kind”: “TOOL_CALL_START”, “toolCallId”: “tc1”, “toolCallName”: “get_weather”}
\ninformation: {“kind”: “TOOL_CALL_ARGS”, “toolCallId”: “tc1”, “delta”: “{“location”: “Seattle”}”}
\ninformation: {“kind”: “TOOL_CALL_END”, “toolCallId”: “tc1”}
\ninformation: {“kind”: “TOOL_CALL_RESULT”, “toolCallId”: “tc1”, “content material”: “{“temp”: 55}”}
\ninformation: {“kind”: “RUN_FINISHED”, “threadId”: “t1”, “runId”: “r1”}\n <\/div>\n
The frontend parser maps every occasion to a frontend motion:<\/p>\n
\nexport const parseAguiChunk: ChunkParser = (line, callback) => {
\n if (!line.startsWith(“information: “)) return;
\n const json = JSON.parse(line.substring(6).trim());
\n swap (json.kind) {
\n case “TEXT_MESSAGE_CONTENT”:
\n callback({ kind: “textual content”, content material: json.delta ?? “” });
\n break;
\n case “TOOL_CALL_START”:
\n callback({ kind: “tool_use_start”, toolUseId: json.toolCallId, title: json.toolCallName });
\n break;
\n case “TOOL_CALL_RESULT”:
\n callback({ kind: “tool_result”, toolUseId: json.toolCallId, consequence: json.content material ?? “” });
\n break;
\n case “RUN_FINISHED”:
\n callback({ kind: “consequence”, stopReason: “end_turn” });
\n }
\n};\n <\/div>\n
Examine this to the HTTP patterns, the place Strands, LangGraph, and Claude-agent-sdk every want a separate parser to deal with their totally different streaming codecs. With AG-UI, the backend framework is abstracted away. You may swap agui-strands-agent for agui-langgraph-agent in your configuration and the frontend doesn\u2019t change.<\/p>\n
To deploy, set the sample in infra-cdk\/config.yaml and run CDK:<\/p>\n
\n sample: agui-strands-agent # or agui-langgraph-agent
\n deployment_type: docker\n <\/div>\n
\ncdk deploy –require-approval by no means
\npython3 ..\/scripts\/deploy-frontend.py\n <\/div>\n
CopilotKit + FAST: Generative UI, shared state, and human-in-the-loop<\/h3>\n
The bottom FAST frontend gives a purposeful chat interface, however AG-UI helps a lot richer interactions: brokers rendering customized UI parts, syncing state with the frontend, and pausing for person enter mid-execution. CopilotKit is a React library constructed particularly for these patterns. The CopilotKit workforce constructed a pattern software on prime of FAST that demonstrates these capabilities on AgentCore. It contains each LangGraph and Strands agent patterns, and also you choose one at deploy time.<\/p>\n
Generative UI spans a spectrum from excessive frontend management to excessive agent freedom. This pattern sits on the managed finish: the frontend owns prebuilt React parts, and the agent chooses which to render and provides the information over AG-UI occasions. Additional alongside the spectrum, brokers return declarative UI descriptions that the frontend renders, or full UI surfaces that the frontend embeds. AG-UI carries all three, as a result of it standardizes the occasion and state stream somewhat than the UI itself. The extra freedom you hand the agent, the extra you tackle: open-ended surfaces want sandboxing and enter validation.<\/p>\n
![\"The](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/25\/ml-20863-img2-2.png\")
<\/p>\nThe CopilotKit pattern structure. The CopilotKit Runtime Lambda acts as a server-side bridge between the browser and AgentCore Runtime, dealing with AG-UI occasion parsing, generative UI routing, and authentication forwarding.<\/p>\n<\/p><\/div>\n
Generative UI: Brokers render React parts<\/h4>\n
With CopilotKit, the agent renders customized React parts inline within the chat, not solely textual content. The frontend registers parts that the agent can invoke by way of AG-UI software name occasions:<\/p>\n
\nuseComponent({
\n title: “pieChart”,
\n description: “Shows information as a pie chart.”,
\n parameters: PieChartPropsSchema,
\n render: PieChart,
\n});\n <\/div>\n
When the agent calls the pieChart software, CopilotKit intercepts the TOOL_CALL_START and TOOL_CALL_ARGS occasions and renders the PieChart element instantly within the dialog. The agent first calls a query_data software to fetch information from a pattern comma-separated values (CSV) file, then passes the outcomes to the chart element.<\/p>\n
Shared state: A todo canvas synced with the agent<\/h4>\n
The pattern features a todo canvas that stays in sync between the agent and the UI bidirectionally. While you inform the agent \u201cAdd three duties: design the API, write checks, and deploy to staging,\u201d the agent calls manage_todos and the canvas updates in actual time by way of AG-UI STATE_SNAPSHOT occasions. It’s also possible to edit todos instantly within the UI. The agent sees the up to date state on its subsequent flip as a result of the Strands sample injects the present todos into the system immediate:<\/p>\n
\n todos = state.get(“todos”, [])
\n if todos:
\n return f”nCurrent todos:n{json.dumps(todos, indent=2)}”
\n return “”\n <\/div>\n
Human-in-the-loop: The agent pauses and waits<\/h4>\n
The pattern demonstrates a gathering scheduler the place the agent pauses mid-execution and renders a time picker. The person selects a time, and the agent continues with that choice:<\/p>\n
\n title: “scheduleTime”,
\n description: “Schedule a gathering with the person.”,
\n parameters: z.object({
\n reasonForScheduling: z.string(),
\n meetingDuration: z.quantity(),
\n }),
\n render: ({ reply, standing, args }) => (<\/p>\n
),
\n});\n <\/p><\/div>\n
This works by way of AG-UI\u2019s software name circulation: the agent emits TOOL_CALL_START for scheduleTime, CopilotKit renders the picker as an alternative of executing a backend software, and the person\u2019s response flows again as a TOOL_CALL_RESULT.<\/p>\n
Deploying the CopilotKit pattern<\/h4>\n
Clone the FAST Samples repository and deploy:<\/p>\n
\ncd sample-FAST-applications\/samples\/copilotkit-generative-ui
\ncp config.yaml.instance config.yaml
\n# Edit config.yaml — set stack_name_base and admin_user_email
\n.\/deploy-langgraph.sh # or .\/deploy-strands.sh\n <\/div>\n
The deploy script provisions the total stack: Amazon Cognito person pool, Amazon ECR repository, AgentCore Runtime, AgentCore Gateway, AgentCore Reminiscence, the CopilotKit Runtime Lambda with Amazon API Gateway, and AWS Amplify internet hosting. When it finishes, open the Amplify URL printed on the finish and log in. You\u2019ll land on the CopilotKit chat interface, the place a couple of fast checks affirm the deployment works:<\/p>\n
Ask the agent for a pie chart from the pattern information. It renders inline within the dialog.
\n Ask so as to add three duties to the todo canvas. The canvas updates in actual time.
\n Ask to schedule a gathering. The agent pauses and exhibits a time picker.<\/p>\n
Cleansing up<\/h3>\n
The walkthrough deploys two separate stacks. Tear down whichever you deployed in order that they cease incurring expenses.<\/p>\n
To take away the FAST deployment:<\/p>\n
\nnpx cdk destroy –all\n <\/div>\n
To take away the CopilotKit pattern:<\/p>\n
\nnpx cdk destroy –all\n <\/div>\n
If an Amazon ECR repository nonetheless holds container photos, delete it by hand, since some CDK configurations preserve repositories in place.<\/p>\n
Conclusion<\/h2>\n
This put up confirmed learn how to construct interactive agent frontends on Amazon Bedrock AgentCore utilizing the AG-UI protocol. The AG-UI integration in FAST enables you to swap between Strands and LangGraph agent backends with out altering your frontend code. The CopilotKit pattern extends this with generative UI, shared state, and human-in-the-loop interactions, all operating on AgentCore with managed auth, scaling, and reminiscence.<\/p>\n
To be taught extra, discover the next sources:<\/p>\n
When you’ve got questions or suggestions, open a difficulty within the FAST repository or the FAST Samples repository.<\/p>\n
![\"Ryan](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/23\/ML-20863-4.png\")
<\/p>\n<\/p><\/div>\n![\"Isaac](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/23\/ML-20863-5.png\")
<\/p>\n<\/p><\/div>\n![\"David](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/23\/ML-20863-6.png\")
<\/p>\n<\/p><\/div>\n![\"Tyler](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/23\/ML-20863-7.png\")
<\/p>\n<\/p><\/div>\n![\"Ran](\"https:\/\/d2908q01vomqb2.cloudfront.net\/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59\/2026\/06\/23\/ML-20863-8.png\")
<\/p>\n<\/p><\/div>\n