Loading weather...
;
return
{status === "complete" ? "✓" : "⏳"} {name}
{status === "complete" && result &&
{JSON.stringify(result, null, 2)}}
),
});
```
### useCopilotChat — Headless chat API
```tsx
import { useCopilotChat } from "@copilotkit/react-core";
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
const { visibleMessages, appendMessage, stopGeneration, isLoading } = useCopilotChat();
appendMessage(new TextMessage({ content: "Hello", role: Role.User }));
```
### useCopilotChatSuggestions — Auto-generate suggestions
```tsx
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
useCopilotChatSuggestions({
instructions: "Suggest next actions based on current state.",
minSuggestions: 1,
maxSuggestions: 3,
}, [relevantState]);
```
---
## Generative UI — Three Patterns
### Static (AG-UI) — Pre-built components, agent selects + fills data
Use `useFrontendTool` with `render`. Agent chooses which tool/component to show.
### Declarative (A2UI / Open-JSON-UI) — Agent returns structured JSON UI spec
Agent emits JSON describing cards/lists/forms. Frontend renders with its own styling.
### Open-ended (MCP Apps) — Agent returns full HTML/JS in sandboxed iframe
```bash
npm install @ag-ui/mcp-apps-middleware
```
```typescript
import { BuiltInAgent } from "@copilotkit/runtime/v2";
import { MCPAppsMiddleware } from "@ag-ui/mcp-apps-middleware";
const agent = new BuiltInAgent({
model: "openai/gpt-4o",
prompt: "You are a helpful assistant.",
}).use(
new MCPAppsMiddleware({
mcpServers: [{ type: "http", url: "http://localhost:3108/mcp", serverId: "my-server" }],
}),
);
```
---
## Shared State (with LangGraph)
### Backend state definition (Python)
```python
from copilotkit import CopilotKitState
class AgentState(CopilotKitState):
language: str = "english"
```
### Frontend read/write — useCoAgent
```tsx
import { useCoAgent } from "@copilotkit/react-core";
const { state, setState } = useCoAgent<{ language: string }>({
name: "sample_agent",
initialState: { language: "english" },
});
```
### Render state in chat — useCoAgentStateRender
```tsx
import { useCoAgentStateRender } from "@copilotkit/react-core";
useCoAgentStateRender({
name: "sample_agent",
render: ({ state }) => state.language ?