Step 4 / 5
Build your first agent
Register functions the model can call. Watch it choose and render live results.
A tool is a named function with a schema. AgentsKit runs it when the model decides to. Pick a tool below — the mock adapter calls it and streams a summary while the widget renders the structured result.
Try it live — pick a tool
chat.agentskit.iolive
›ask anything…⏎
Source — how to build this
import { useChat, ChatContainer, Message, InputBar } from '@agentskit/react'import { defineTool } from '@agentskit/tools'import { WeatherCard, PriceCard, OrderTracker, FlightList } from './widgets'const getWeather = defineTool({ name: 'weather.get', description: 'Current weather and 5-day forecast for a city.', schema: { city: 'string', days: 'number?' }, async execute({ city }) { return { city, tempF: 72, days: [/* ... */] } },})const tools = [getWeather /* , crypto.quote, orders.status, flights.search */]function renderToolResult(name: string, result: unknown) { if (name === 'weather.get') return <WeatherCard data={result} /> if (name === 'crypto.quote') return <PriceCard data={result} /> if (name === 'orders.status') return <OrderTracker data={result} /> if (name === 'flights.search') return <FlightList data={result} /> return null}export function Agent() { const chat = useChat({ adapter, tools }) return ( <ChatContainer> {chat.messages.map((msg) => ( <Message key={msg.id} message={msg}> {msg.toolCalls?.map((t) => ( <div key={t.id}>{renderToolResult(t.name, t.result)}</div> ))} </Message> ))} <InputBar chat={chat} /> </ChatContainer> )}