Support Zod Function Tools in OpenAssistant
OpenAssistant now provides enhanced support for function tools using Zod, making it easier than ever to create type-safe, interactive AI tools with rich UI components. Let's explore how this powerful feature works and how you can use it in your applications.
What are Zod Function Tools?
Zod function tools in OpenAssistant extend the Vercel AI SDK's tool system with additional capabilities. These tools combine:
- Type-safe schema validation using Zod
- Executable functions for handling user requests
- Context management for dynamic data
- UI components for rich visual feedback
Key Features
Type-Safe Schema Definition
Using Zod, you can define your tool's parameters with precise types and validation:
z.object({
location: z.string().describe('The location to get the weather for'),
})
This schema definition helps the LLM understand the expected input format and generates appropriate parameter values.
Enhanced Tool Structure
Each tool consists of three main components:
- execute: A function that processes the request and returns results
- context: Optional data provider for the execution
- component: Optional React component for visualizing results
This structure allows you to:
- Validate user inputs with Zod
- Dynamically provide data to the tool
- Display rich UI components for the tool's output
Rich Response Format
Tools return structured responses with two key elements:
- llmResult: Text response sent back to the LLM
- output: Optional data for UI rendering or subsequent tool calls
Example Implementation
Here's a simple weather tool implementation:
const weatherTool = tool({
description: 'Get the weather in a location',
parameters: z.object({
location: z.string().describe('The location to get the weather for'),
}),
execute: async ({ location }) => {
return {
llmResult: `Weather in ${location}`,
output: {
temperature: 72 + Math.floor(Math.random() * 21) - 10,
},
};
},
component: WeatherDisplay // Optional React component
});
Using Context for Dynamic Data
The context feature allows tools to access external data or services:
const weatherTool = tool({
// ... other properties
context: {
getWeatherData: async (location: string) => {
// Fetch real weather data
return await weatherAPI.fetch(location);
}
}
});
Visual Feedback with Components
Tools can include React components to visualize results:
function WeatherDisplay({ temperature, location }) {
return (
<div className="weather-card">
<h3>{location}</h3>
<p>{temperature}°F</p>
</div>
);
}
Integration with OpenAssistant
To use Zod function tools in your OpenAssistant application, reference the example from the codebase:
export function App() {
const functions = {
weather: tool({
description: 'Get the weather in a city from a weather station',
parameters: z
.object({ cityName: z.string() })
.describe('The city name to get the weather for'),
execute: async ({ cityName }, options) => {
const getStation = options.context?.getStation;
const station = getStation ? await getStation(cityName) : null;
return {
llmResult: `The weather in ${cityName} is sunny from weather station ${station}.`,
output: {
weather: 'sunny',
station,
},
};
},
context: {
getStation: async (cityName: string) => {
const stations = {
'New York': '123',
'Los Angeles': '456',
Chicago: '789',
};
return stations[cityName];
},
},
component: WeatherStation,
}),
};
Benefits
- Type Safety: Zod schemas provide runtime type checking and validation
- Better AI Understanding: Clear parameter descriptions help the LLM generate appropriate inputs
- Rich UI Integration: Built-in support for React components enables visual feedback
- Flexible Context: Dynamic data fetching and state management through context
- Developer Experience: Improved tooling and TypeScript support
Conclusion
OpenAssistant's Zod function tools provide a powerful way to create interactive AI features with type safety and rich UI components. This combination of Zod's type system, executable functions, and React components creates a robust foundation for building sophisticated AI-powered applications.