Skip to content

Commit 5dade7e

Browse files
brandonmcconnellbrandonmcconnell
authored
Canonical partner docs (ADK) (CopilotKit#2754)
1 parent 7e757eb commit 5dade7e

59 files changed

Lines changed: 1316 additions & 1152 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/content/docs/adk/agentic-chat-ui.mdx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,23 @@ import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/sel
1010
import CopilotCloudConfigureCopilotKitProvider from "@/snippets/cloud/cloud-copilotkit-provider.mdx";
1111
import ComponentExamples from "@/snippets/component-examples.mdx";
1212
import { UserIcon, PaintbrushIcon, WrenchIcon, RepeatIcon } from "lucide-react";
13-
14-
<video
15-
src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/agentic-chat-ui.mp4"
16-
className="rounded-lg shadow-xl"
17-
loop
18-
playsInline
19-
controls
20-
autoPlay
21-
muted
13+
import { IframeSwitcher } from "@/components/content"
14+
15+
<IframeSwitcher
16+
id="agentic-chat-example"
17+
exampleUrl="https://feature-viewer.copilotkit.ai/adk-middleware/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
18+
codeUrl="https://feature-viewer.copilotkit.ai/adk-middleware/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
19+
exampleLabel="Demo"
20+
codeLabel="Code"
21+
height="700px"
2222
/>
23-
<Callout>
24-
This video shows the result of `npx copilotkit@latest init` with the [implementation](#implementation) section applied to it!
25-
</Callout>
2623

2724
## What is this?
2825

2926
Agentic chat UIs are ways for your users to interact with your agent. CopilotKit provides a variety of different components to choose from, each
3027
with their own unique use cases.
3128

32-
If you've gone through the [getting started guide](/adk/quickstart/adk) **you already have a agentic chat UI setup**! Nothing else is needed
29+
If you've gone through the [getting started guide](/adk/quickstart) **you already have a agentic chat UI setup**! Nothing else is needed
3330
to get started.
3431

3532
## When should I use this?

‎docs/content/docs/adk/custom-look-and-feel/meta.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
{
22
"title": "Custom Look and Feel",
3+
"icon": "lucide/LayoutDashboard",
34
"pages": [
4-
5-
"built-in-ui-components",
65
"customize-built-in-ui-components",
76
"bring-your-own-components",
87
"headless-ui",
98
"markdown-rendering"
109
]
11-
}
10+
}

‎docs/content/docs/adk/frontend-actions.mdx‎

Lines changed: 41 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,62 @@
11
---
2-
title: Frontend Actions
2+
title: Frontend Tools
33
icon: "lucide/Wrench"
4-
description: Create frontend actions and use them within your agent.
4+
description: Create frontend tools and use them within your ADK agent.
55
---
6-
7-
<video
8-
src="https://cdn.copilotkit.ai/docs/copilotkit/images/frontend-actions-demo.mp4"
9-
className="rounded-lg shadow-xl"
10-
loop
11-
playsInline
12-
controls
13-
autoPlay
14-
muted
6+
import InstallSDKSnippet from "@/snippets/install-sdk.mdx"
7+
import RunAndConnect from "@/snippets/integrations/adk/run-and-connect.mdx"
8+
import { Tabs, Tab } from "fumadocs-ui/components/tabs";
9+
import { IframeSwitcher } from "@/components/content"
10+
11+
<IframeSwitcher
12+
id="frontend-actions-example"
13+
exampleUrl="https://feature-viewer.copilotkit.ai/adk-middleware/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
14+
codeUrl="https://feature-viewer.copilotkit.ai/adk-middleware/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
15+
exampleLabel="Demo"
16+
codeLabel="Code"
17+
height="700px"
1518
/>
16-
<Callout>
17-
This video shows the result of `npx copilotkit@latest init` with the [implementation](#implementation) section applied to it!
18-
</Callout>
1919

2020
## What is this?
21+
Frontend tools enable you to define client-side functions that your ADK agent can invoke, with execution happening entirely in the user's browser. When your agent calls a frontend tool,
22+
the logic runs on the client side, giving you direct access to the frontend environment.
2123

22-
Frontend actions are powerful tools that allow your AI agents to directly interact with and update your application's user interface. Think of them as bridges that connect your agent's decision-making capabilities with your frontend's interactive elements.
23-
24-
## When should I use this?
25-
26-
Frontend actions are essential when you want to create truly interactive AI applications where your agent needs to:
24+
This can be utilized for to let [your agent control the UI](/adk/frontend-actions), [generative UI](/adk/generative-ui/frontend-tools), or for Human-in-the-loop interactions.
2725

28-
- Dynamically update UI elements
29-
- Trigger frontend animations or transitions
30-
- Show alerts or notifications
31-
- Modify application state
32-
- Handle user interactions programmatically
26+
In this guide, we cover the use of frontend tools driving and interacting with the UI.
3327

34-
Without frontend actions, agents are limited to just processing and returning data. By implementing frontend actions, you can create rich, interactive experiences where your agent actively drives the user interface.
28+
## When should I use this?
29+
Use frontend tools when you need your agent to interact with client-side primitives such as:
30+
- Reading or modifying React component state
31+
- Accessing browser APIs like localStorage, sessionStorage, or cookies
32+
- Triggering UI updates or animations
33+
- Interacting with third-party frontend libraries
34+
- Performing actions that require the user's immediate browser context
3535

3636
## Implementation
3737

3838
<Steps>
3939
<Step>
40-
### Setup CopilotKit
41-
42-
To use frontend actions, you'll need to setup CopilotKit first. For the sake of brevity, we won't cover it here.
43-
44-
Check out our [getting started guide](/adk/quickstart/adk) and come back here when you're setup!
40+
### Run and connect your agent
41+
<RunAndConnect components={props.components} />
4542
</Step>
4643

4744
<Step>
48-
### Create a frontend action
45+
### Create a frontend tool
4946

50-
First, you'll need to create a frontend action using the [useCopilotAction](/reference/hooks/useCopilotAction) hook. Here's a simple one to get you started
47+
First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started
5148
that says hello to the user.
5249

5350
```tsx title="page.tsx"
54-
import { useCopilotAction } from "@copilotkit/react-core" // [!code highlight]
51+
import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight]
5552
5653
export function Page() {
5754
// ...
5855

59-
// [!code highlight:16]
60-
useCopilotAction({
56+
// [!code highlight:15]
57+
useFrontendTool({
6158
name: "sayHello",
6259
description: "Say hello to the user",
63-
available: "remote", // optional, makes it so the action is *only* available to the agent
6460
parameters: [
6561
{
6662
name: "name",
@@ -77,54 +73,18 @@ Without frontend actions, agents are limited to just processing and returning da
7773
// ...
7874
}
7975
```
80-
</Step>
81-
<Step>
82-
### Modify your agent
83-
Now, we'll need to modify the agent to access these frontend actions. Open up for your agent's folder and continue from there!
84-
</Step>
85-
<Step>
86-
### Setup your ADK Agent
87-
88-
ADK automatically picks up frontend actions when you create your agent. No special configuration or state inheritance is needed:
89-
90-
<Tabs groupId="language_adk_agent" items={['Python']} default="Python" persist>
91-
<Tab value="Python">
92-
```python title="agent-py/sample_agent/agent.py"
93-
from fastapi import FastAPI
94-
from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint
95-
from google.adk.agents import LlmAgent
96-
97-
sample_agent = LlmAgent(
98-
name="assistant",
99-
model="gemini-2.5-flash",
100-
instruction="""
101-
You are a helpful assistant. Help users by answering their questions and assisting with their needs.
102-
"""
103-
)
104-
105-
# Create ADK middleware agent instance
106-
adk_agent_sample = ADKAgent(
107-
adk_agent=sample_agent,
108-
app_name="demo_app",
109-
user_id="demo_user",
110-
session_timeout_seconds=3600,
111-
use_in_memory_services=True
112-
)
113-
114-
# Create FastAPI app
115-
app = FastAPI(title="ADK Middleware Sample Agent")
116-
117-
# Add the ADK endpoint
118-
add_adk_fastapi_endpoint(app, adk_agent_sample, path="/")
119-
```
120-
</Tab>
121-
</Tabs>
122-
123-
That's it! Your agent will automatically have access to all frontend actions you've defined using `useCopilotAction` in your React components.
76+
77+
That's it! Your agent will automatically have access to all frontend tools you've defined using `useFrontendTool` in your React components.
78+
79+
<Callout type="info">
80+
Frontend tools registered with `useFrontendTool` are automatically forwarded to your agent through the AG-UI protocol. The agent can invoke them, and execution happens on the frontend.
81+
</Callout>
12482
</Step>
12583
<Step>
12684
### Give it a try!
127-
You've now given your agent the ability to directly call any CopilotActions you've defined. These actions will be available as tools to the agent where they can be used as needed.
85+
You've now given your agent the ability to directly call any frontend tools you've defined. These tools will be available to the agent where they can be used as needed.
86+
87+
<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/frontend-actions-demo.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
12888
</Step>
12989

13090
</Steps>

0 commit comments

Comments
 (0)