Skip to content

Commit d264e2e

Browse files
samjuliensamjulien
committed
feat(shell-docs): add FrameworkOverview data records for 13 frameworks
One TS record per integration (canonical slug): name, icon key, hero copy, banner video, three supported-feature cards, architecture asset, live-demo iframes, optional structured CTA. The aggregator src/data/frameworks/index.ts exports the slug-keyed map consumed by the framework-root route. Three frameworks (ms-agent-dotnet, ag2, agent-spec) have post-features content that doesn't fit the structured cta field (Resources links, a Callout, an Agent Spec how-to body). Each ships a sibling after-features.mdx loaded into the FrameworkOverview's afterFeatures slot when hasAfterFeaturesMdx is true. LangGraph variants (langgraph-typescript, langgraph-fastapi) and ms-agent-python alias the same record as their primary variant — their content folders are shared and the legacy docs never differentiated variants at the intro-page level. The component's link rewriter keeps every CTA on the variant's own URL. built-in-agent is excluded — it's the default framework and the docs root '/' IS its overview page.
1 parent 954bf41 commit d264e2e

17 files changed

Lines changed: 756 additions & 0 deletions

File tree

‎showcase/shell-docs/src/content/framework-overviews/ag2/after-features.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<Callout type="info">
2+
CopilotKit consumes AG-UI protocol events streamed by AG2 over <code>/chat</code>. See the <a href="https://docs.ag2.ai/latest/docs/user-guide/ag-ui/" target="_blank">AG2 AG-UI integration docs</a>.
3+
</Callout>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Open Agent Spec x CopilotKit
2+
3+
4+
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.
5+
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.
6+
7+
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.
8+
9+
This integration is centered on two components:
10+
- 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.
11+
- Frontend: CopilotKit UI (Next.js) that consumes AG‑UI events and renders chat, tool calls/results, and generative UI.
12+
13+
Quickly scaffold the UI, then wire your backend endpoint that streams AG‑UI events.
14+
15+
## Quickstart
16+
17+
```bash
18+
npx copilotkit@latest create
19+
```
20+
21+
Then set your backend endpoint (default `http://localhost:8000/copilotkit`):
22+
23+
```dotenv title=".env.local"
24+
COPILOTKIT_REMOTE_ENDPOINT=http://localhost:8000/copilotkit
25+
```
26+
27+
Run your Agent Spec FastAPI server and start the Next.js app.
28+
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).
29+
30+
## How it works
31+
32+
- Backend: Your FastAPI endpoint (from the AG-UI Agent Spec integration) emits AG‑UI SSE events.
33+
- Frontend: The Next.js template proxies requests to your backend using CopilotKit Runtime.
34+
- Protocol: AG‑UI spans/events power streaming text, tool calls and results, and run lifecycle.
35+
36+
## Repos and references
37+
38+
- Example FastAPI server: `ag-ui/integrations/agent-spec/python/examples/server.py`
39+
- Endpoint helper: `ag-ui/integrations/agent-spec/python/ag_ui_agentspec/endpoint.py`
40+
- AG‑UI Agent Spec integration (Python): https://github.com/ag-ui-protocol/ag-ui/tree/main/integrations/agent-spec/python
41+
- AG‑UI Agent Spec tutorial (Agent Spec docs): https://oracle.github.io/agent-spec/26.1.0/howtoguides/howto_ag_ui.html
42+
43+
## Learn more about Agent Spec
44+
45+
- Agent Spec docs home: https://oracle.github.io/agent-spec/development/docs_home.html
46+
- Specification overview: https://oracle.github.io/agent-spec/development/agentspec/index.html
47+
- API reference: https://oracle.github.io/agent-spec/development/api/index.html
48+
- Reference sheet: https://oracle.github.io/agent-spec/development/misc/reference_sheet.html

‎showcase/shell-docs/src/content/framework-overviews/ms-agent-dotnet/after-features.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## Resources
2+
3+
- [Agent Framework User Guide](https://learn.microsoft.com/en-us/agent-framework/user-guide/overview)
4+
- [Agent Framework Tutorials](https://learn.microsoft.com/en-us/agent-framework/tutorials/overview)

‎showcase/shell-docs/src/data/frameworks/a2a.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "a2a",
6+
"frameworkName": "A2A",
7+
"iconKey": "a2a",
8+
"header": "Bring your A2A agents to your users",
9+
"subheader": "Give your A2A agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications.",
10+
"guideLink": "/a2a/quickstart",
11+
"initCommand": "git clone https://github.com/copilotkit-ai/with-a2a-a2ui.git",
12+
"featuresLink": "https://feature-viewer.copilotkit.ai/a2a/feature/a2ui",
13+
"supportedFeatures": [
14+
{
15+
"title": "Declarative UI (A2UI)",
16+
"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.",
17+
"documentationLink": "/a2a/generative-ui",
18+
"demoLink": "https://feature-viewer.copilotkit.ai/a2a/feature/a2ui"
19+
}
20+
],
21+
"architectureImage": "https://cdn.copilotkit.ai/docs/copilotkit/images/generic-agui-architecture.png",
22+
"liveDemos": []
23+
};
24+
25+
export default data;

‎showcase/shell-docs/src/data/frameworks/ag2.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "ag2",
6+
"frameworkName": "AG2",
7+
"iconKey": "ag2",
8+
"header": "Bring your AG2 agents to your users",
9+
"subheader": "Give your AG2 agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications.",
10+
"bannerVideo": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4",
11+
"guideLink": "/ag2/quickstart",
12+
"initCommand": "npx copilotkit@latest init",
13+
"featuresLink": "/ag2/generative-ui",
14+
"supportedFeatures": [
15+
{
16+
"title": "Generative UI",
17+
"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.",
18+
"documentationLink": "/ag2/generative-ui",
19+
"demoLink": "/ag2/generative-ui",
20+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
21+
},
22+
{
23+
"title": "Human in the Loop",
24+
"description": "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
25+
"documentationLink": "/ag2/human-in-the-loop",
26+
"demoLink": "https://examples-coagents-ai-travel-app.vercel.app/",
27+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
28+
},
29+
{
30+
"title": "Shared State",
31+
"description": "Keep your agent and your app in sync. Your agent can see everything in your app, and your app can react to your agent in real-time.",
32+
"documentationLink": "/ag2/shared-state",
33+
"demoLink": "/ag2/shared-state",
34+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/shared-state.mp4"
35+
}
36+
],
37+
"architectureImage": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/ag2/architecture.png",
38+
"liveDemos": [
39+
{
40+
"type": "saas",
41+
"title": "SaaS Copilot",
42+
"description": "A traditional SaaS application enhanced with AI agents. These copilots integrate seamlessly into existing workflows, providing intelligent assistance for specific business processes. Perfect for customer service, sales automation, project management, and domain-specific tasks where users need guided, step-by-step AI assistance.",
43+
"iframeUrl": "https://examples-coagents-ai-travel-app.vercel.app?copilotOpen=true"
44+
},
45+
{
46+
"type": "canvas",
47+
"title": "Canvas Copilot",
48+
"description": "An infinite canvas interface where users collaborate with AI agents in a spatial, visual environment. These copilots excel at research, brainstorming, content creation, and complex problem-solving where information needs to be organized, connected, and explored in a non-linear, creative way.",
49+
"iframeUrl": "https://examples-coagents-research-canvas-ui.vercel.app/"
50+
}
51+
],
52+
"hasAfterFeaturesMdx": true
53+
};
54+
55+
export default data;

‎showcase/shell-docs/src/data/frameworks/agent-spec.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "agent-spec",
6+
"frameworkName": "Open Agent Spec",
7+
"iconKey": "agentspecMark",
8+
"header": "Bring your Open Agent Spec agents to your users",
9+
"subheader": "Give your Open Agent Spec agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, portable agent-powered applications.",
10+
"bannerVideo": "https://cdn.copilotkit.ai/blog/oracle/demo-oracle-spec-dojo.mp4",
11+
"guideLink": "/agent-spec/quickstart",
12+
"initCommand": "npx copilotkit@latest init",
13+
"featuresLink": "https://feature-viewer.copilotkit.ai/agent-spec-wayflow/feature/agentic_chat",
14+
"supportedFeatures": [
15+
{
16+
"title": "Generative UI",
17+
"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.",
18+
"documentationLink": "/agent-spec/generative-ui",
19+
"demoLink": "https://feature-viewer.copilotkit.ai/agent-spec-wayflow/feature/tool_based_generative_ui",
20+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
21+
},
22+
{
23+
"title": "Human in the Loop",
24+
"description": "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
25+
"documentationLink": "/agent-spec/human-in-the-loop",
26+
"demoLink": "https://examples-coagents-ai-travel-app.vercel.app/",
27+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
28+
}
29+
],
30+
"architectureImage": "https://cdn.copilotkit.ai/docs/copilotkit/images/agent-spec/agent-spec-ag-ui-arch.png",
31+
"liveDemos": [],
32+
"hasAfterFeaturesMdx": true
33+
};
34+
35+
export default data;

‎showcase/shell-docs/src/data/frameworks/agno.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "agno",
6+
"frameworkName": "Agno",
7+
"iconKey": "agno",
8+
"header": "Bring your Agno agents to your users",
9+
"subheader": "Give your Agno agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications.",
10+
"bannerVideo": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4",
11+
"guideLink": "/agno/quickstart",
12+
"initCommand": "npx copilotkit@latest init",
13+
"featuresLink": "https://feature-viewer.copilotkit.ai/agno/feature/agentic_chat",
14+
"supportedFeatures": [
15+
{
16+
"title": "Generative UI",
17+
"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.",
18+
"documentationLink": "/agno/generative-ui",
19+
"demoLink": "https://feature-viewer.copilotkit.ai/agno/feature/tool_based_generative_ui",
20+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
21+
},
22+
{
23+
"title": "Human in the Loop",
24+
"description": "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
25+
"documentationLink": "/agno/human-in-the-loop",
26+
"demoLink": "https://examples-coagents-ai-travel-app.vercel.app/",
27+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
28+
}
29+
],
30+
"architectureImage": "https://cdn.copilotkit.ai/docs/copilotkit/images/generic-agui-architecture.png",
31+
"liveDemos": [
32+
{
33+
"type": "saas",
34+
"title": "SaaS Copilot",
35+
"description": "A traditional SaaS application enhanced with AI agents. These copilots integrate seamlessly into existing workflows, providing intelligent assistance for specific business processes. Perfect for customer service, sales automation, project management, and domain-specific tasks where users need guided, step-by-step AI assistance.",
36+
"iframeUrl": "https://examples-coagents-ai-travel-app.vercel.app?copilotOpen=true"
37+
},
38+
{
39+
"type": "canvas",
40+
"title": "Canvas Copilot",
41+
"description": "An infinite canvas interface where users collaborate with AI agents in a spatial, visual environment. These copilots excel at research, brainstorming, content creation, and complex problem-solving where information needs to be organized, connected, and explored in a non-linear, creative way.",
42+
"iframeUrl": "https://examples-coagents-research-canvas-ui.vercel.app/"
43+
}
44+
]
45+
};
46+
47+
export default data;

‎showcase/shell-docs/src/data/frameworks/crewai-crews.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "crewai-crews",
6+
"frameworkName": "CrewAI Flows",
7+
"iconKey": "crewai",
8+
"header": "Bring your CrewAI Flow-based agents to your users",
9+
"subheader": "Let your users collaborate with your CrewAI Flow-based agents using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications.",
10+
"bannerVideo": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4",
11+
"guideLink": "/crewai-flows/quickstart",
12+
"initCommand": "npx copilotkit@latest init",
13+
"featuresLink": "https://feature-viewer.copilotkit.ai/crewai/feature/agentic_chat",
14+
"supportedFeatures": [
15+
{
16+
"title": "Generative UI",
17+
"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.",
18+
"documentationLink": "/coagents/generative-ui",
19+
"demoLink": "https://feature-viewer.copilotkit.ai/crewai/feature/agentic_chat",
20+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
21+
},
22+
{
23+
"title": "Human in the Loop",
24+
"description": "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
25+
"documentationLink": "/coagents/human-in-the-loop",
26+
"demoLink": "https://feature-viewer.copilotkit.ai/crewai/feature/human_in_the_loop",
27+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
28+
},
29+
{
30+
"title": "Shared State",
31+
"description": "Keep your agent and your app in sync. Your agent can see everything in your app, and your app can react to your agent in real-time.",
32+
"documentationLink": "/coagents/shared-state",
33+
"demoLink": "https://feature-viewer.copilotkit.ai/crewai/feature/shared_state",
34+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/shared-state.mp4"
35+
}
36+
],
37+
"architectureVideo": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/crew-ai/flows/crews-interaction-layer.mp4",
38+
"liveDemos": [
39+
{
40+
"type": "saas",
41+
"title": "SaaS Copilot",
42+
"description": "A traditional SaaS application enhanced with AI agents. These copilots integrate seamlessly into existing workflows, providing intelligent assistance for specific business processes. Perfect for customer service, sales automation, project management, and domain-specific tasks where users need guided, step-by-step AI assistance.",
43+
"iframeUrl": "https://examples-coagents-ai-travel-app.vercel.app?copilotOpen=true"
44+
},
45+
{
46+
"type": "canvas",
47+
"title": "Canvas Copilot",
48+
"description": "An infinite canvas interface where users collaborate with AI agents in a spatial, visual environment. These copilots excel at research, brainstorming, content creation, and complex problem-solving where information needs to be organized, connected, and explored in a non-linear, creative way.",
49+
"iframeUrl": "https://examples-coagents-research-canvas-ui.vercel.app/"
50+
}
51+
]
52+
};
53+
54+
export default data;

‎showcase/shell-docs/src/data/frameworks/deepagents.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// @generated by scripts/extract-framework-overviews.ts — do not edit by hand.
2+
import type { FrameworkOverviewData } from "./types";
3+
4+
const data: FrameworkOverviewData = {
5+
"slug": "deepagents",
6+
"frameworkName": "Deep Agents",
7+
"iconKey": "deepagents",
8+
"header": "Bring your Deep Agents to your users",
9+
"subheader": "Give your Deep Agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications with LangChain's Deep Agents framework.",
10+
"bannerVideo": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4",
11+
"guideLink": "/deepagents/quickstart",
12+
"initCommand": "npx copilotkit@latest init",
13+
"featuresLink": "https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat",
14+
"supportedFeatures": [
15+
{
16+
"title": "Generative UI",
17+
"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.",
18+
"documentationLink": "/deepagents/generative-ui",
19+
"demoLink": "https://feature-viewer.copilotkit.ai/langgraph/feature/tool_based_generative_ui",
20+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
21+
},
22+
{
23+
"title": "Human in the Loop",
24+
"description": "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
25+
"documentationLink": "/deepagents/human-in-the-loop",
26+
"demoLink": "https://examples-coagents-ai-travel-app.vercel.app/",
27+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
28+
},
29+
{
30+
"title": "Shared State",
31+
"description": "Keep your agent and your app in sync. Your agent can see everything in your app, and your app can react to your agent in real-time.",
32+
"documentationLink": "/deepagents/shared-state",
33+
"demoLink": "https://feature-viewer.copilotkit.ai/langgraph/feature/shared_state",
34+
"videoUrl": "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/shared-state.mp4"
35+
}
36+
],
37+
"architectureImage": "https://cdn.copilotkit.ai/docs/copilotkit/images/generic-agui-architecture.png",
38+
"liveDemos": [
39+
{
40+
"type": "saas",
41+
"title": "SaaS Copilot",
42+
"description": "A traditional SaaS application enhanced with AI agents. These copilots integrate seamlessly into existing workflows, providing intelligent assistance for specific business processes. Perfect for customer service, sales automation, project management, and domain-specific tasks where users need guided, step-by-step AI assistance.",
43+
"iframeUrl": "https://examples-coagents-ai-travel-app.vercel.app?copilotOpen=true"
44+
},
45+
{
46+
"type": "canvas",
47+
"title": "Canvas Copilot",
48+
"description": "An infinite canvas interface where users collaborate with AI agents in a spatial, visual environment. These copilots excel at research, brainstorming, content creation, and complex problem-solving where information needs to be organized, connected, and explored in a non-linear, creative way.",
49+
"iframeUrl": "https://examples-coagents-research-canvas-ui.vercel.app/"
50+
}
51+
],
52+
"tutorialLink": "/langgraph/tutorials/ai-travel-app"
53+
};
54+
55+
export default data;

0 commit comments

Comments
 (0)