feat: integrate CopilotKit with AG-UI LangGraph for generative UI and tool support#63
Open
tylerslaton wants to merge 3 commits intoawslabs:mainfrom
Open
Conversation
tylerslaton
force-pushed
the
feat/fix-followup-after-frontend-tools
branch
from
6173b94 to
0a6b570
Compare
…ative UI - Wire CopilotKitMiddleware and LangGraphAGUIAgent into the LangGraph agent - Add query_data tool with sample financial CSV for generative chart UI - Add manage_todos/get_todos tools and AgentState with todos field for shared state - Add Excalidraw MCP middleware and suggestion - Add unit test infrastructure for agent tools Co-Authored-By: Brian Love <brian@liveloveapp.com> Co-Authored-By: Markus Ecker <markus.ecker@gmail.com>
…onents - Add CopilotChatInterface powered by CopilotKit with generative UI support - Add PieChart and BarChart for financial data visualization - Add ToolReasoning default tool renderer - Add MeetingTimePicker for human-in-the-loop interactions - Add TodoCanvas with TodoCard/TodoColumn/TodoList for shared agent state - Add useCopilotExamples hook consolidating all CopilotKit registrations - Add ThemeProvider and useTheme hook with light/dark mode toggle Co-Authored-By: Brian Love <brian@liveloveapp.com> Co-Authored-By: Markus Ecker <markus.ecker@gmail.com>
- Add CopilotKit Lambda runtime to CDK and Terraform stacks - Add SSM parameters and outputs for CopilotKit runtime URL - Update frontend deployment scripts to include CopilotKit runtime config Co-Authored-By: Brian Love <brian@liveloveapp.com> Co-Authored-By: Markus Ecker <markus.ecker@gmail.com>
tylerslaton
force-pushed
the
feat/fix-followup-after-frontend-tools
branch
from
0a6b570 to
8707c68
Compare
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.
Summary
Integrates CopilotKit with the LangGraph single-agent pattern to enable generative UI, frontend tool calls, shared state (Canvas/Todos), and human-in-the-loop interactions.
Preview
A deployed version of the stack is available here:
https://main.d3pq26xcsy7ipt.amplifyapp.com/
copilotkit-starter.mp4
Scope and review guide
The diff shows ~17k lines but ~15k of that is lockfile churn (
package-lock.json,uv.lock). The actual code changes are ~2,250 lines across 52 files, split across three self-contained layers that each need the others to work end-to-end.The PR is organized into 3 commits, one per layer:
1. Agent layer —
patterns/langgraph-single-agent/(~400 lines)The core integration point.
langgraph_agent.pyis the main file — it wiresCopilotKitMiddlewareandLangGraphAGUIAgentinto the existing agent. Three new tools are added undertools/:query_data(reads a financial CSV),manage_todos, andget_todos. Unit tests intests/unit/test_tools.py.2. Frontend —
frontend/src/(~1,300 lines)CopilotChatInterface.tsx— the new chat component, drop-in alongside the existingChatInterfacecomponents/generative-ui/—PieChart,BarChart,MeetingTimePicker,ToolReasoning— UI components the agent can render inlinecomponents/canvas/—TodoCanvas/TodoCard/TodoColumn/TodoList— shared-state canvas synced with the agent's todoshooks/—useCopilotExamples(registers example prompts),useTheme(light/dark mode)frontend/src/test/3. Infrastructure —
infra-cdk/+infra-terraform/(~500 lines)Adds a CopilotKit Lambda runtime to both CDK and Terraform stacks. The CDK Lambda is in
infra-cdk/lambdas/copilotkit-runtime/. Terraform equivalent ininfra-terraform/modules/backend/copilotkit_runtime.tf. Config and SSM parameter wiring in supporting files.What's included
Agent (
patterns/langgraph-single-agent/)CopilotKitMiddlewareandLangGraphAGUIAgentinto the LangGraph agentquery_datatool (financial CSV data),manage_todos/get_todostools, andAgentStatewith todos fieldLangGraphAGUIAgentto resolve actor identity from JWT or forwarded propsFrontend (
frontend/)CopilotChat— CopilotKit-powered chat with generative UI supportPieChart,BarChart,MeetingTimePicker,ToolReasoningTodoCanvas— shared state canvas synced with agent stateInfrastructure