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.
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.
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.
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.
Overview of answer
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.
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’s structure and deployment, see Speed up agentic software improvement with a full-stack starter template for Amazon Bedrock AgentCore.
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’t must know which agent framework is operating. CopilotKit + FAST is a standalone pattern that replaces FAST’s 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.
Structure 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.
Walkthrough
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.
Supply code:
Conditions
For this walkthrough, you must have the next conditions:
An AWS account 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 put in and configured.
AWS CDK put in.
Node.js 18 or later and Python 3.11 or later.
Docker operating, for container builds.
Mannequin entry enabled within the Amazon Bedrock console for the mannequin the agent makes use of.
AG-UI in FAST: One parser, two frameworks
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.
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:
from ag_ui_strands import StrandsAgent, StrandsAgentConfig
from bedrock_agentcore.runtime import BedrockAgentCoreApp, RequestContext
from strands import Agent
app = BedrockAgentCoreApp()
# Construct the mannequin and Code Interpreter as soon as at module load
MODEL = BedrockModel(model_id=”us.anthropic.claude-sonnet-4-5-20250929-v1:0″)
CODE_INTERPRETER = StrandsCodeInterpreterTools(REGION).execute_python_securely
@app.entrypoint
async def invocations(payload: dict, context: RequestContext):
input_data = RunAgentInput.model_validate(payload)
actor_id = extract_user_id_from_context(context)
# Recent agent per request — picks up the caller’s id and instruments
agent = Agent(
mannequin=MODEL,
system_prompt=SYSTEM_PROMPT,
instruments=[create_gateway_mcp_client(actor_id), CODE_INTERPRETER],
session_manager=get_memory_session_manager(actor_id, session_id),
)
agui_agent = StrandsAgent(
agent=agent,
title=”agui_strands_agent”,
config=StrandsAgentConfig(
session_manager_provider=make_memory_provider(actor_id),
replay_history_into_strands=False,
),
)
async for occasion in agui_agent.run(input_data):
yield occasion.model_dump(mode=”json”, by_alias=True, exclude_none=True)
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.
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:
from copilotkit import CopilotKitMiddleware, LangGraphAGUIAgent
async def build_graph(actor_id: str):
“””Construct a contemporary LangGraph compiled graph with Gateway instruments.”””
mcp_client = await create_gateway_mcp_client(actor_id)
instruments = await mcp_client.get_tools()
instruments.append(CODE_INTERPRETER)
return create_agent(
mannequin=MODEL,
instruments=instruments,
checkpointer=get_memory_saver(), # None when MEMORY_ID is unset
middleware=[CopilotKitMiddleware()],
system_prompt=SYSTEM_PROMPT,
)
@app.entrypoint
async def invocations(payload: dict, context: RequestContext):
input_data = RunAgentInput.model_validate(payload)
actor_id = extract_user_id_from_context(context)
graph = await build_graph(actor_id)
agui_agent = LangGraphAGUIAgent(
title=”agui_langgraph_agent”,
graph=graph,
config={“configurable”: {“actor_id”: actor_id}},
)
async for occasion in agui_agent.run(input_data):
yield occasion.model_dump(mode=”json”, by_alias=True, exclude_none=True)
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:
information: {“kind”: “TEXT_MESSAGE_START”, “messageId”: “m1”, “function”: “assistant”}
information: {“kind”: “TEXT_MESSAGE_CONTENT”, “messageId”: “m1”, “delta”: “Let me test “}
information: {“kind”: “TEXT_MESSAGE_CONTENT”, “messageId”: “m1”, “delta”: “that for you.”}
information: {“kind”: “TEXT_MESSAGE_END”, “messageId”: “m1”}
information: {“kind”: “TOOL_CALL_START”, “toolCallId”: “tc1”, “toolCallName”: “get_weather”}
information: {“kind”: “TOOL_CALL_ARGS”, “toolCallId”: “tc1”, “delta”: “{“location”: “Seattle”}”}
information: {“kind”: “TOOL_CALL_END”, “toolCallId”: “tc1”}
information: {“kind”: “TOOL_CALL_RESULT”, “toolCallId”: “tc1”, “content material”: “{“temp”: 55}”}
information: {“kind”: “RUN_FINISHED”, “threadId”: “t1”, “runId”: “r1”}
The frontend parser maps every occasion to a frontend motion:
export const parseAguiChunk: ChunkParser = (line, callback) => {
if (!line.startsWith(“information: “)) return;
const json = JSON.parse(line.substring(6).trim());
swap (json.kind) {
case “TEXT_MESSAGE_CONTENT”:
callback({ kind: “textual content”, content material: json.delta ?? “” });
break;
case “TOOL_CALL_START”:
callback({ kind: “tool_use_start”, toolUseId: json.toolCallId, title: json.toolCallName });
break;
case “TOOL_CALL_RESULT”:
callback({ kind: “tool_result”, toolUseId: json.toolCallId, consequence: json.content material ?? “” });
break;
case “RUN_FINISHED”:
callback({ kind: “consequence”, stopReason: “end_turn” });
}
};
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’t change.
To deploy, set the sample in infra-cdk/config.yaml and run CDK:
sample: agui-strands-agent # or agui-langgraph-agent
deployment_type: docker
cdk deploy –require-approval by no means
python3 ../scripts/deploy-frontend.py
CopilotKit + FAST: Generative UI, shared state, and human-in-the-loop
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.
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.
The 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.
Generative UI: Brokers render React parts
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:
useComponent({
title: “pieChart”,
description: “Shows information as a pie chart.”,
parameters: PieChartPropsSchema,
render: PieChart,
});
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.
Shared state: A todo canvas synced with the agent
The pattern features a todo canvas that stays in sync between the agent and the UI bidirectionally. While you inform the agent “Add three duties: design the API, write checks, and deploy to staging,” 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:
todos = state.get(“todos”, [])
if todos:
return f”nCurrent todos:n{json.dumps(todos, indent=2)}”
return “”
Human-in-the-loop: The agent pauses and waits
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:
title: “scheduleTime”,
description: “Schedule a gathering with the person.”,
parameters: z.object({
reasonForScheduling: z.string(),
meetingDuration: z.quantity(),
}),
render: ({ reply, standing, args }) => (
),
});
This works by way of AG-UI’s 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’s response flows again as a TOOL_CALL_RESULT.
Deploying the CopilotKit pattern
Clone the FAST Samples repository and deploy:
cd sample-FAST-applications/samples/copilotkit-generative-ui
cp config.yaml.instance config.yaml
# Edit config.yaml — set stack_name_base and admin_user_email
./deploy-langgraph.sh # or ./deploy-strands.sh
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’ll land on the CopilotKit chat interface, the place a couple of fast checks affirm the deployment works:
Ask the agent for a pie chart from the pattern information. It renders inline within the dialog.
Ask so as to add three duties to the todo canvas. The canvas updates in actual time.
Ask to schedule a gathering. The agent pauses and exhibits a time picker.
Cleansing up
The walkthrough deploys two separate stacks. Tear down whichever you deployed in order that they cease incurring expenses.
To take away the FAST deployment:
npx cdk destroy –all
To take away the CopilotKit pattern:
npx cdk destroy –all
If an Amazon ECR repository nonetheless holds container photos, delete it by hand, since some CDK configurations preserve repositories in place.
Conclusion
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.
To be taught extra, discover the next sources:
When you’ve got questions or suggestions, open a difficulty within the FAST repository or the FAST Samples repository.
In regards to the authors
Ryan Razkenari
Ryan is a Machine Studying Engineer on the AWS Generative AI Innovation Heart, the place he designs and builds AI options for enterprise clients. He focuses on making use of generative AI to resolve advanced enterprise challenges, with a deal with translating cutting-edge analysis into production-ready techniques.
Isaac Privitera
Isaac is a Principal Knowledge Scientist with the AWS Generative AI Innovation Heart, the place he develops bespoke agentic AI-based options to handle clients’ enterprise issues. His major focus lies in constructing accountable AI techniques, utilizing methods akin to RAG, multi-agent techniques, and mannequin fine-tuning. When not immersed on this planet of AI, Isaac will be discovered on the golf course, having fun with a soccer sport, or mountaineering trails together with his loyal canine companion, Barry.
David Kaleko
David is a Senior Utilized Scientist on the AWS Generative AI Innovation Heart, the place he leads utilized analysis efforts into cutting-edge generative AI implementation methods for AWS clients. He holds a PhD in particle physics from Columbia College.
Tyler Slaton
Tyler is the Head of Open-source at CopilotKit the place they work with their workforce to take care of the AG-UI and CopilotKit initiatives. They deal with the UI and UX of brokers in addition to constructing within the open. Exterior of labor they take pleasure in enjoying video video games and mountaineering.
Ran Shemtov
Ran is a Founding Engineer at CopilotKit, the place he is likely one of the core makers and maintainers of AG-UI and the LangGraph integration, in addition to partnerships like with Amazon Net Companies.
