Bring your Open Agent Spec agents to your users
Give your Open Agent Spec agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, portable agent-powered applications.
Build with Open Agent Spec
The user-facing primitives every Open Agent Spec integration ships with — pick the one that fits your product and drop the code in.
Generative UI
Render your agent's state, progress, outputs, and tool calls with custom UI components in real-time. Bridges the gap between AI agents and user interfaces.
Human in the Loop
Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.
Open Agent Spec x CopilotKit
Open Agent Spec (Agent Spec), originally developed by Oracle, is a portable language for defining agentic systems. It defines building blocks for standalone agents and structured agentic workflows as well as common ways of composing them into multi-agent systems. Agent Spec enables users to author agents once and run them with any compatible runtime. Agent Spec decouples design from execution, helping deliver more predictable behavior across frameworks.
Now, with the CopilotKit integration, you can bring your Agent Spec agents to an interactive UI using CopilotKit and AG‑UI. Use our Next.js starter to connect a CopilotKit UI to your Agent Spec FastAPI endpoint that streams AG‑UI events.
This integration is centered on two components:
- Backend: AG‑UI exporter for Agent Spec (
pyagentspecPython package) at the AG-UI GitHub repo. It loads an Agent Spec config (yaml/json) and runs it on your chosen framework via supported Agent Spec adapters (currently LangGraph or WayFlow), translating Agent Spec tracing events into AG‑UI events and sending them to the CopilotKit-powered frontend via a FastAPI endpoint. - Frontend: CopilotKit UI (Next.js) that consumes AG‑UI events and renders chat, tool calls/results, and generative UI.
Quickly scaffold the UI, then wire your backend endpoint that streams AG‑UI events.
Quickstart
npx copilotkit@latest createThen set your backend endpoint (default http://localhost:8000/copilotkit):
COPILOTKIT_REMOTE_ENDPOINT=http://localhost:8000/copilotkitRun your Agent Spec FastAPI server and start the Next.js app. For backend installation and endpoint wiring, follow the Quickstart and the per‑adapter guides: LangGraph integration and WayFlow integration.
How it works
- Backend: Your FastAPI endpoint (from the AG-UI Agent Spec integration) emits AG‑UI SSE events.
- Frontend: The Next.js template proxies requests to your backend using CopilotKit Runtime.
- Protocol: AG‑UI spans/events power streaming text, tool calls and results, and run lifecycle.
Repos and references
- Example FastAPI server:
ag-ui/integrations/agent-spec/python/examples/server.py - Endpoint helper:
ag-ui/integrations/agent-spec/python/ag_ui_agentspec/endpoint.py - AG‑UI Agent Spec integration (Python): https://github.com/ag-ui-protocol/ag-ui/tree/main/integrations/agent-spec/python
- AG‑UI Agent Spec tutorial (Agent Spec docs): https://oracle.github.io/agent-spec/26.1.0/howtoguides/howto_ag_ui.html
Learn more about Agent Spec
- Agent Spec docs home: https://oracle.github.io/agent-spec/development/docs_home.html
- Specification overview: https://oracle.github.io/agent-spec/development/agentspec/index.html
- API reference: https://oracle.github.io/agent-spec/development/api/index.html
- Reference sheet: https://oracle.github.io/agent-spec/development/misc/reference_sheet.html
Architecture
The shape of a CopilotKit + Open Agent Spec application — from your UI down to the agent runtime.
