Back to Copilotkit

Open Agent Spec x CopilotKit

showcase/shell-docs/src/content/framework-overviews/agent-spec/after-features.mdx

1.57.23.0 KB
Original Source

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 (pyagentspec Python 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

bash
npx copilotkit@latest create

Then set your backend endpoint (default http://localhost:8000/copilotkit):

dotenv
COPILOTKIT_REMOTE_ENDPOINT=http://localhost:8000/copilotkit

Run 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

Learn more about Agent Spec