feat: add AG-UI CopilotKit integration UX sample#224
Open
rajjayaaws wants to merge 1 commit intostrands-agents:mainfrom
Open
feat: add AG-UI CopilotKit integration UX sample#224rajjayaaws wants to merge 1 commit intostrands-agents:mainfrom
rajjayaaws wants to merge 1 commit intostrands-agents:mainfrom
Conversation
Demonstrates Strands Agents SDK with AG-UI protocol and CopilotKit: - Frontend tool calls (notifications, interactive quizzes) - Shared state with useCoAgent (learning checklist) - Generative UI (custom rendering for search results) - Local markdown knowledge base for RAG-style retrieval
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue #, if available: N/A
Description of changes:
Adds a new UX demo (04-UX-demos/06-ag-ui-copilotkit-integration) showcasing how to build rich, interactive AI chat experiences using Strands Agents SDK with the AG-UI protocol and CopilotKit frontend.
The sample is an AgentCore documentation assistant that demonstrates three key AG-UI capabilities:
show_notification — displays toast notifications (success, info, warning, error)
show_quiz_question — renders interactive multiple-choice quiz cards that wait for user input and return the result back to the agent
Shared State (useCoAgent) Bidirectional state synchronization between the Strands agent and the React UI. The agent creates a learning checklist via the update_learning_checklist tool, which emits a STATE_SNAPSHOT event. The frontend renders this as an interactive sidebar panel where users can check off items. When the user asks about their progress, the agent reads the current state (including user-toggled checkboxes) from the frontend — demonstrating true two-way sync.
Generative UI Custom React components render tool results inline in the chat stream. The search_knowledge tool results are displayed as expandable source cards with relevance scores and section tags, rather than raw JSON.
Architecture:
Python backend: Strands agent with ag-ui-strands adapter, serving AG-UI protocol over SSE
Next.js frontend: CopilotKit hooks (useCopilotAction, useCoAgent) connected via @ag-ui/client
Local knowledge base: Markdown files about AgentCore (no AWS infrastructure required)
What's included:
agent/ — Strands agent with 4 custom tools and AG-UI integration via StrandsAgentConfig for state management
frontend/ — Next.js app with CopilotKit, quiz card component, source card component, and checklist sidebar
agent/knowledge/ — 3 markdown files serving as a local knowledge base
start.sh — Single script to launch both services
Architecture diagram, .env.example files, and README following the samples template
Prerequisites: Python 3.12+, Node.js 20+, uv, AWS credentials with Bedrock model access.
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.