chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,11 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Make runtime configuration explicit
|
||||
|
||||
The Claude Agent SDK demo reads configuration from shared state and folds it
|
||||
into the system prompt. This keeps the agent behavior visible to the UI and
|
||||
lets users tune model behavior without rebuilding the backend.
|
||||
|
||||
<DemoCode file="src/agents/agent_config_agent.py" region="agent-config-setup" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,11 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Add CopilotKit context to the Claude prompt
|
||||
|
||||
CopilotKit forwards readable app context in the AG-UI run input. Append that
|
||||
context to the Claude system prompt before starting the run so the agent can
|
||||
answer with the current UI state in mind.
|
||||
|
||||
<DemoCode file="src/agents/agent.py" region="agent-context-setup" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,19 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Install the Claude Agent SDK packages
|
||||
|
||||
```bash
|
||||
uv add claude-agent-sdk ag-ui-claude-sdk ag-ui-protocol anthropic fastapi uvicorn python-dotenv
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Bridge Claude Agent SDK to AG-UI
|
||||
|
||||
Use `ClaudeAgentAdapter` from `ag_ui_claude_sdk`. The adapter receives the
|
||||
AG-UI run input, emits AG-UI events back to CopilotKit, and can expose
|
||||
backend tools through an in-process Claude SDK MCP server.
|
||||
|
||||
<DemoCode file="src/agents/claude_agent_sdk_adapter.py" region="claude-agent-sdk-agent-setup" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,16 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Forward browser tools to Claude
|
||||
|
||||
Frontend tools registered with `useFrontendTool` arrive in the AG-UI run
|
||||
input. Convert each AG-UI tool definition into an Anthropic Messages API
|
||||
tool schema before calling the model. Runs that carry frontend tools use
|
||||
the direct Messages API path rather than the Claude Agent SDK.
|
||||
|
||||
<DemoCode
|
||||
file="src/agents/agent.py"
|
||||
region="frontend-tools-setup"
|
||||
highlight="23-29"
|
||||
/>
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,12 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Model approvals as async frontend tools
|
||||
|
||||
Claude Agent SDK human-in-the-loop demos use CopilotKit's promise-based
|
||||
frontend tool flow. The agent calls an approval tool, the UI resolves the
|
||||
tool result after the user decides, and the same Claude run continues with
|
||||
that result. Register the approval UI from the page component.
|
||||
|
||||
<DemoCode file="src/app/demos/hitl-in-chat/page.tsx" region="hitl-frontend-tool" title="page.tsx - useHumanInTheLoop" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,12 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Run Claude through an AG-UI endpoint
|
||||
|
||||
Programmatic control starts from the same AG-UI run boundary as the chat UI.
|
||||
Wrap Claude Agent SDK once, then trigger runs from a custom UI with
|
||||
`useAgent` or the AG-UI client. Inside your component, add the user
|
||||
message to the agent and dispatch the run.
|
||||
|
||||
<DemoCode file="src/app/demos/headless-simple/chat.tsx" region="use-agent-simple" title="chat.tsx - useAgent run control" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,11 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Put shared state in the system prompt and tools
|
||||
|
||||
The demo exposes frontend preferences to Claude and gives the agent a tool
|
||||
for writing notes back into CopilotKit state. Keep the state contract small,
|
||||
typed, and mirrored by the UI components that read the same values.
|
||||
|
||||
<DemoCode file="src/agents/shared_state_read_write_agent.py" region="shared-state-setup" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,11 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Stream partial state updates while Claude responds
|
||||
|
||||
For streaming state, parse the agent's structured deltas as they arrive and
|
||||
emit CopilotKit state updates before the final message is complete. This
|
||||
branch runs inside the streamed tool-argument handler.
|
||||
|
||||
<DemoCode file="src/agents/agent.py" region="state-streaming-delta-emission" />
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,12 @@
|
||||
<Steps>
|
||||
<Step>
|
||||
### Represent subagents as delegation tools
|
||||
|
||||
The Claude Agent SDK demo keeps a supervisor prompt and exposes delegation
|
||||
tools for specialist agents. CopilotKit can then render delegation progress
|
||||
while the supervisor coordinates the run. Start by giving the supervisor
|
||||
one tool schema per specialist.
|
||||
|
||||
<DemoCode file="src/agents/subagents_agent.py" region="supervisor-delegation-tools" title="subagents_agent.py - supervisor tool schemas" />
|
||||
</Step>
|
||||
</Steps>
|
||||
Reference in New Issue
Block a user