---
title: Overview
icon: "custom/agentspecMark"
description: Bring your Agent‑Spec agents to your users with CopilotKit via AG‑UI.
hideHeader: true
---
import { customIcons } from "@/lib/icons/custom-icons";
import { FrameworkOverview } from "@/components/content/landing-pages/framework-overview";

<FrameworkOverview
  frameworkName="Open Agent Spec"
  frameworkIcon={<customIcons.agentspecMark className="h-10 w-10" />}
  header="Bring your Open Agent Spec agents to your users"
  subheader="Give your Open Agent Spec agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, portable agent-powered applications."
  bannerVideo="https://cdn.copilotkit.ai/blog/oracle/demo-oracle-spec-dojo.mp4"
  guideLink="/agent-spec/quickstart"
  initCommand="npx copilotkit@latest init"
  featuresLink="https://feature-viewer.copilotkit.ai/agent-spec-wayflow/feature/agentic_chat"
  supportedFeatures={[
    {
      title: "Generative UI",
      description: "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.",
      documentationLink: "/agent-spec/generative-ui",
      demoLink: "https://feature-viewer.copilotkit.ai/agent-spec-wayflow/feature/tool_based_generative_ui",
      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
    },
    {
      title: "Human in the Loop",
      description: "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
      documentationLink: "/agent-spec/human-in-the-loop",
      demoLink: "https://examples-coagents-ai-travel-app.vercel.app/",
      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
    }
  ]}
  architectureImage="https://cdn.copilotkit.ai/docs/copilotkit/images/agent-spec/agent-spec-ag-ui-arch.png"
  liveDemos={[]}
/>


# 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](https://github.com/ag-ui-protocol/ag-ui/tree/main/integrations/agent-spec/python). 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 title=".env.local"
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](/agent-spec/quickstart) and the per‑adapter guides: [LangGraph integration](/agent-spec/langgraph) and [WayFlow integration](/agent-spec/wayflow).

## 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
