Skip to content

Commit bc240dd

Browse files
brandonmcconnellbrandonmcconnell
authored
Canonical partner docs (Agno) (CopilotKit#2759)
Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
1 parent b3ce600 commit bc240dd

14 files changed

Lines changed: 732 additions & 377 deletions

File tree

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

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,22 @@ title: Chat with an Agent
33
icon: "lucide/SendHorizontal"
44
description: Chat with an agent using CopilotKit's UI components.
55
---
6-
76
import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
87
import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
98
import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";
109
import CopilotCloudConfigureCopilotKitProvider from "@/snippets/cloud/cloud-copilotkit-provider.mdx";
1110
import ComponentExamples from "@/snippets/component-examples.mdx";
1211
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
12+
import { IframeSwitcher } from "@/components/content"
13+
14+
<IframeSwitcher
15+
id="agentic-chat-example"
16+
exampleUrl="https://feature-viewer.copilotkit.ai/agno/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
17+
codeUrl="https://feature-viewer.copilotkit.ai/agno/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
18+
exampleLabel="Demo"
19+
codeLabel="Code"
20+
height="700px"
2221
/>
23-
<Callout>
24-
This video shows the [Agno
25-
starter](https://github.com/CopilotKit/CopilotKit/tree/main/examples/agno/starter)
26-
repo with various Copilot UI components applied to it!
27-
</Callout>
2822

2923
## What is this?
3024

@@ -39,4 +33,21 @@ to get started.
3933
CopilotKit provides a variety of different batteries-included components to choose from to create agent native applications. They scale
4034
from simple chat UIs to completely custom applications.
4135

42-
<ComponentExamples components={props.components} />
36+
<ComponentExamples components={props.components} />
37+
38+
## Give it a try!
39+
40+
<video
41+
src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/agentic-chat-ui.mp4"
42+
className="rounded-lg shadow-xl"
43+
loop
44+
playsInline
45+
controls
46+
autoPlay
47+
muted
48+
/>
49+
<Callout>
50+
This video shows the [Agno
51+
starter](https://github.com/CopilotKit/CopilotKit/tree/main/examples/agno/starter)
52+
repo with various Copilot UI components applied to it!
53+
</Callout>

‎docs/content/docs/agno/custom-look-and-feel/markdown-rendering-agno_custom-look-and-feel.mdx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs/content/docs/agno/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/agno/frontend-tools.mdx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
title: Frontend Tools
3+
icon: "lucide/Wrench"
4+
description: Create frontend tools and use them within your Agno agent.
5+
---
6+
import InstallSDKSnippet from "@/snippets/install-sdk.mdx"
7+
import RunAndConnect from "@/snippets/integrations/agno/run-and-connect.mdx"
8+
import { IframeSwitcher } from "@/components/content"
9+
10+
<IframeSwitcher
11+
id="frontend-tools-example"
12+
exampleUrl="https://feature-viewer.copilotkit.ai/agno/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
13+
codeUrl="https://feature-viewer.copilotkit.ai/agno/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
14+
exampleLabel="Demo"
15+
codeLabel="Code"
16+
height="700px"
17+
/>
18+
19+
## What is this?
20+
Frontend tools enable you to define client-side functions that your Agno agent can invoke, with execution happening entirely in the user's browser. When your agent calls a frontend tool,
21+
the logic runs on the client side, giving you direct access to the frontend environment.
22+
23+
This can be utilized for to let [your agent control the UI](/agno/frontend-tools), [generative UI](/agno/generative-ui/frontend-tools), or for [Human-in-the-loop](/agno/human-in-the-loop) interactions.
24+
25+
In this guide, we cover the use of frontend tools driving and interacting with the UI.
26+
27+
## When should I use this?
28+
Use frontend tools when you need your agent to interact with client-side primitives such as:
29+
- Reading or modifying React component state
30+
- Accessing browser APIs like localStorage, sessionStorage, or cookies
31+
- Triggering UI updates or animations
32+
- Interacting with third-party frontend libraries
33+
- Performing actions that require the user's immediate browser context
34+
35+
## Implementation
36+
37+
<Steps>
38+
<Step>
39+
### Run and connect your agent
40+
<RunAndConnect components={props.components} />
41+
</Step>
42+
43+
<Step>
44+
### Create a frontend tool
45+
46+
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
47+
that says hello to the user.
48+
49+
```tsx title="page.tsx"
50+
import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight]
51+
52+
export function Page() {
53+
// ...
54+
55+
{/* [!code highlight:15] */}
56+
useFrontendTool({
57+
name: "sayHello",
58+
description: "Say hello to the user",
59+
parameters: [
60+
{
61+
name: "name",
62+
type: "string",
63+
description: "The name of the user to say hello to",
64+
required: true,
65+
},
66+
],
67+
handler: async ({ name }) => {
68+
alert(`Hello, ${name}!`);
69+
},
70+
});
71+
72+
// ...
73+
}
74+
```
75+
</Step>
76+
<Step>
77+
### Modify your agent
78+
Now, we'll need to modify the agent to access these frontend tools. Open up your agent's folder and continue from there!
79+
</Step>
80+
<Step>
81+
### Define the frontend tool in your Agno agent
82+
83+
In your Agno agent, define a tool with the `@tool(external_execution=True)` decorator. This tells Agno that the tool will be executed externally (on the frontend).
84+
85+
```python title="tools/frontend.py"
86+
from agno.tools import tool
87+
88+
@tool(external_execution=True)
89+
def sayHello(name: str):
90+
"""
91+
Say hello to the user.
92+
93+
Args:
94+
name: The name of the user to say hello to
95+
"""
96+
```
97+
98+
Register the tool with your agent:
99+
100+
```python title="agent.py"
101+
from agno.agent import Agent
102+
from agno.models.openai import OpenAIChat
103+
from agno.os import AgentOS
104+
from agno.os.interfaces.agui import AGUI
105+
from tools.frontend import sayHello
106+
107+
agent = Agent(
108+
model=OpenAIChat(id="gpt-4o"),
109+
tools=[sayHello],
110+
description="A helpful assistant that can answer questions and provide information.",
111+
instructions="Be helpful and friendly. Format your responses using markdown where appropriate.",
112+
)
113+
114+
agent_os = AgentOS(agents=[agent], interfaces=[AGUI(agent=agent)])
115+
app = agent_os.get_app()
116+
```
117+
</Step>
118+
<Step>
119+
### Give it a try!
120+
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.
121+
122+
<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/frontend-actions-demo.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />
123+
</Step>
124+
</Steps>

‎docs/content/docs/agno/generative-ui/backend-tools.mdx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
title: Backend Tools
3+
icon: "lucide/Server"
4+
description: Render your agent's tool calls with custom UI components.
5+
---
6+
import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
7+
import { IframeSwitcher } from "@/components/content"
8+
import { Tabs, Tab } from "fumadocs-ui/components/tabs"
9+
import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"
10+
import RunAndConnect from "@/snippets/integrations/agno/run-and-connect.mdx"
11+
12+
<IframeSwitcher
13+
id="backend-tools-example"
14+
exampleUrl="https://feature-viewer.copilotkit.ai/agno/feature/backend_tool_rendering?sidebar=false&chatDefaultOpen=false"
15+
codeUrl="https://feature-viewer.copilotkit.ai/agno/feature/backend_tool_rendering?view=code&sidebar=false&codeLayout=tabs"
16+
exampleLabel="Demo"
17+
codeLabel="Code"
18+
height="700px"
19+
/>
20+
21+
<Callout>
22+
This example demonstrates the [implementation](#implementation) section applied in the <a href="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat" target="_blank">CopilotKit feature viewer</a>.
23+
</Callout>
24+
25+
## What is this?
26+
27+
Tools are a way for the LLM to call predefined, typically, deterministic functions. CopilotKit allows you to render these tools in the UI
28+
as a custom component, which we call **Generative UI**.
29+
30+
## When should I use this?
31+
32+
Rendering tools in the UI is useful when you want to provide the user with feedback about what your agent is doing, specifically
33+
when your agent is calling tools. CopilotKit allows you to fully customize how these tools are rendered in the chat.
34+
35+
## Implementation
36+
37+
<Steps>
38+
<Step>
39+
### Run and connect your agent
40+
<RunAndConnect components={props.components} />
41+
</Step>
42+
<Step>
43+
### Give your agent a tool to call
44+
45+
<Tabs groupId="language_agno_agent" items={['Python']} default="Python" persist>
46+
<Tab value="Python">
47+
```python title="agent/sample_agent/agent.py"
48+
from agno.agent import Agent
49+
from agno.models.openai import OpenAIChat
50+
from agno.tools import tool
51+
# ...
52+
53+
# [!code highlight:6]
54+
@tool
55+
def get_weather(location: str):
56+
"""
57+
Get the weather for a given location.
58+
"""
59+
return f"The weather for {location} is 70 degrees."
60+
61+
# ...
62+
63+
agent = Agent(
64+
model=OpenAIChat(id="gpt-4o"),
65+
tools=[get_weather], # [!code highlight]
66+
description="A helpful assistant that can answer questions and provide information.",
67+
instructions="Be helpful and friendly. Format your responses using markdown where appropriate.",
68+
show_tool_calls=True,
69+
)
70+
```
71+
</Tab>
72+
73+
</Tabs>
74+
</Step>
75+
<Step>
76+
### Render the tool call in your frontend
77+
At this point, your agent will be able to call the `get_weather` tool. Now
78+
we just need to add a `useRenderToolCall` hook to render the tool call in
79+
the UI.
80+
81+
<Callout type="info" title="Important">
82+
In order to render a tool call in the UI, the name of the action must match the name of the tool.
83+
</Callout>
84+
85+
```tsx title="app/page.tsx"
86+
import { useRenderToolCall } from "@copilotkit/react-core"; // [!code highlight]
87+
// ...
88+
89+
const YourMainContent = () => {
90+
// ...
91+
{/* [!code highlight:12] */}
92+
useRenderToolCall({
93+
name: "get_weather",
94+
render: ({status, args}) => {
95+
return (
96+
<p className="text-gray-500 mt-2">
97+
{status !== "complete" && "Calling weather API..."}
98+
{status === "complete" && `Called the weather API for ${args.location}.`}
99+
</p>
100+
);
101+
},
102+
});
103+
// ...
104+
}
105+
```
106+
107+
</Step>
108+
<Step>
109+
### Give it a try!
110+
111+
Try asking the agent to get the weather for a location. You should see the custom UI component that we added
112+
render the tool call and display the arguments that were passed to the tool.
113+
114+
</Step>
115+
</Steps>
116+
117+
## Default Tool Rendering
118+
119+
<DefaultToolRendering components={props.components} />

0 commit comments

Comments
 (0)