Frontend Tools
Create frontend tools and use them within your Agno agent for generative UI.
What is this?
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, the logic runs on the client side, giving you direct access to the frontend environment.
This can be utilized to let your agent control the UI, generative UI, or for Human-in-the-loop interactions.
In this guide, we cover the use of frontend tools for generative UI.
When should I use this?
Use frontend tools when you need your agent to interact with client-side primitives such as:
- Reading or modifying React component state
- Accessing browser APIs like localStorage, sessionStorage, or cookies
- Triggering UI updates or animations
- Interacting with third-party frontend libraries
- Performing actions that require the user's immediate browser context
Implementation
Define the frontend tool in your Agno agent
In your Agno agent, define a tool with the @tool(external_execution=True) decorator:
from agno.tools import tool
@tool(external_execution=True)
def sayHello(name: str):
"""
Say hello to the user.
Args:
name: str: The name of the user to say hello to
"""Register the tool with your agent:
from agno.agent import Agent
from agno.models.openai import OpenAIChat
from agno.os import AgentOS
from agno.os.interfaces.agui import AGUI
from tools.frontend import sayHello
agent = Agent(
model=OpenAIChat(id="gpt-4o"),
tools=[sayHello],
description="A helpful assistant that can answer questions and provide information.",
instructions="Be helpful and friendly. Format your responses using markdown where appropriate.",
)
agent_os = AgentOS(agents=[agent], interfaces=[AGUI(agent=agent)])
app = agent_os.get_app()
if __name__ == "__main__":
agent_os.serve(app="main:app", port=8000, reload=True)Create a frontend tool with generative UI
Use the useFrontendTool hook to implement the tool with custom rendering:
import { useFrontendTool } from "@copilotkit/react-core"
export function Page() {
// ...
useFrontendTool({
name: "sayHello",
parameters: [
{
name: "name",
type: "string",
description: "The name of the user to say hello to",
required: true,
},
],
handler({ name }) {
// Handler returns the result of the tool call
return { currentURLPath: window.location.href, userName: name };
},
render: ({ args }) => {
// Renders UI based on the data of the tool call
return (
<div>
<h1>Hello, {args.name}!</h1>
<h1>You're currently on {window.location.href}</h1>
</div>
);
},
});
// ...
}Give it a try!
You've now given your agent the ability to directly call frontend tools with custom UI rendering. These tools will be available to the agent where they can be used as needed.
This video demonstrates the implementation section applied to our coagents starter project.
