Skip to content

Commit 86e5d91

Browse files
johnprgjohnprg
committed
first version of new landing page (overview)
1 parent 94ce923 commit 86e5d91

File tree

2 files changed

+171
-0
lines changed

2 files changed

+171
-0
lines changed

‎docs/docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"group": "Get Started",
1818
"pages": [
1919
"introduction",
20+
"overview",
2021
{
2122
"group": "Quickstart",
2223
"pages": [

‎docs/overview.mdx‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
---
2+
title: Overview
3+
description: "AG-UI: The Agent-User Interaction Protocol - A horizontal standard to bring AI agents into user-facing frontend applications"
4+
---
5+
6+
# AG‑UI: The Agent–User Interaction Protocol
7+
8+
*A horizontal standard to bring AI agents into user‑facing frontend applications.*
9+
10+
AG‑UI is the boundary layer where agents and users meet. It standardizes how agent state, UI intents, and user interactions flow between your model/agent runtime and your app's frontend—so you can ship reliable, debuggable, user‑friendly agentic features fast.
11+
12+
---
13+
14+
## Built with the ecosystem
15+
16+
**First‑party partnerships & integrations**
17+
18+
<CardGroup cols={4}>
19+
<Card title="LangGraph" icon="link" />
20+
<Card title="CrewAI" icon="users" />
21+
<Card title="Autogen 2" icon="robot" />
22+
<Card title="LlamaIndex" icon="search" />
23+
<Card title="Mastra" icon="code" />
24+
<Card title="Pydantic AI" icon="python" />
25+
<Card title="Vercel AI SDK" icon="triangle" />
26+
<Card title="Next.js" icon="nextjs" />
27+
</CardGroup>
28+
29+
*AG‑UI works across leading agent frameworks and frontend stacks, with shared vocabulary and primitives that keep your UX consistent as your agents evolve.*
30+
31+
---
32+
33+
## Building blocks (today & upcoming)
34+
35+
<CardGroup cols={2}>
36+
<Card title="Streaming chat" icon="message-lines">
37+
Token‑level and tool‑event streaming for responsive UIs.
38+
</Card>
39+
<Card title="Static generative UI" icon="layout">
40+
Render model output into stable, typed components.
41+
</Card>
42+
<Card title="Declarative generative UI" icon="tree">
43+
Let agents propose UI trees; app decides what to mount.
44+
</Card>
45+
<Card title="Frontend tools" icon="wrench">
46+
Safe, typed tool calls that bridge agent logic to app actions.
47+
</Card>
48+
<Card title="Interrupts & human‑in‑the‑loop" icon="hand">
49+
Pause, approve, edit, or steer mid‑flow.
50+
</Card>
51+
<Card title="In‑chat + in‑app interactions" icon="chat">
52+
Chat commands alongside regular app controls.
53+
</Card>
54+
<Card title="Attachments & multimodality" icon="paperclip">
55+
Files, images, audio, and structured payloads.
56+
</Card>
57+
<Card title="Thinking steps" icon="brain">
58+
Expose summaries/redactions of chain‑of‑thought artifacts to users, safely.
59+
</Card>
60+
<Card title="Sub‑agent calls" icon="sitemap">
61+
Orchestrate nested agents and delegate specialized tasks.
62+
</Card>
63+
<Card title="Agent steering" icon="steering-wheel">
64+
Guardrails, policies, and UX affordances to keep agents on track.
65+
</Card>
66+
</CardGroup>
67+
68+
<Card title="See the full capability map" icon="arrow-right" href="/concepts/architecture">
69+
Explore detailed documentation on all AG-UI capabilities
70+
</Card>
71+
72+
---
73+
74+
## Design patterns
75+
76+
Explore reusable interaction patterns for agentic UX:
77+
78+
<Card title="AI-UI Design Patterns" icon="palette" href="/patterns">
79+
Discover proven patterns for building intuitive agent interfaces
80+
</Card>
81+
82+
---
83+
84+
## Why AG‑UI
85+
86+
**Agentic apps break the classic request/response contract.** Agents run for longer, stream work as they go, and make nondeterministic choices that can affect your UI and state. AG‑UI defines a clean, observable boundary so frontends remain predictable while agents stay flexible.
87+
88+
### What's hard about user‑facing agents
89+
90+
<AccordionGroup>
91+
<Accordion title="Long-running and streaming operations">
92+
Agents are **long‑running** and **stream** intermediate work—often across multi‑turn sessions.
93+
</Accordion>
94+
<Accordion title="Nondeterministic UI control">
95+
Agents are **nondeterministic** and can **control UI** in ways that must be supervised.
96+
</Accordion>
97+
<Accordion title="Mixed IO requirements">
98+
Apps must mix **structured + unstructured IO** (text, voice, tool calls, state updates).
99+
</Accordion>
100+
<Accordion title="Agent composition">
101+
Agents need **composition**: agents **call sub‑agents**, often non-deterministically.
102+
</Accordion>
103+
</AccordionGroup>
104+
105+
With AG‑UI, these become deliberate, well‑typed interactions rather than ad‑hoc wiring.
106+
107+
---
108+
109+
## Framework Support & Demos
110+
111+
| Framework / Platform | What works today | Documentation | Demo |
112+
| ----------------------- | -------------------------------------- | ------------- | ---- |
113+
| LangGraph | Streams, tools, interrupts, sub‑agents | [Docs](/integrations/langgraph) | [Demo](#) |
114+
| CrewAI | Tools, action routing, steering | [Docs](/integrations/crewai) | [Demo](#) |
115+
| Autogen 2 | Multi‑agent orchestration, messaging | [Docs](/integrations/ag2) | [Demo](#) |
116+
| LlamaIndex | Query/agent routing, UI intents | [Docs](/integrations/llamaindex) | [Demo](#) |
117+
| OpenAI Realtime | Live stream, events, attachments | [Docs](#) | [Demo](#) |
118+
| Vercel AI SDK / Next.js | Edge streaming, SSR hydration | [Docs](/integrations/vercel-ai-sdk) | [Demo](#) |
119+
120+
---
121+
122+
## Quick links
123+
124+
<CardGroup cols={2}>
125+
<Card title="Get Started" icon="rocket" href="/quickstart/introduction">
126+
Jump into building your first AG-UI application
127+
</Card>
128+
<Card title="Core Concepts" icon="book" href="/concepts/architecture">
129+
Understand the agent-UI boundary and key principles
130+
</Card>
131+
<Card title="API Reference" icon="code" href="/sdk/js/overview">
132+
Explore the complete SDK documentation
133+
</Card>
134+
<Card title="Design Patterns" icon="palette" href="/patterns">
135+
Learn proven patterns for agentic UX
136+
</Card>
137+
</CardGroup>
138+
139+
---
140+
141+
## How AG‑UI fits
142+
143+
AG-UI provides a complete solution for agent-user interaction:
144+
145+
<Steps>
146+
<Step title="Protocol">
147+
Events, intents, and payload schemas shared by agents & apps.
148+
</Step>
149+
<Step title="Runtime adapters">
150+
Bindings for popular agent frameworks.
151+
</Step>
152+
<Step title="Frontend kit">
153+
Lightweight client + components to handle streaming & interrupts.
154+
</Step>
155+
<Step title="Observability hooks">
156+
Surface interaction timelines for debugging & learning.
157+
</Step>
158+
</Steps>
159+
160+
```mermaid
161+
graph LR
162+
A[Agent Runtime] --> B[AG-UI Protocol]
163+
B --> C[Frontend Application]
164+
B --> D[State Management]
165+
B --> E[UI Components]
166+
167+
style B fill:#f9f,stroke:#333,stroke-width:2px
168+
```
169+
170+
*Agent(s) ⇄ AG‑UI Boundary ⇄ App UI/State*

0 commit comments

Comments
 (0)