initial agent
This commit is contained in:
Anibal Angulo
384
ai-elements-tools.md
Normal file
384
ai-elements-tools.md
Normal file
@@ -0,0 +1,384 @@
|
||||
# Generative User Interfaces
|
||||
|
||||
Generative user interfaces (generative UI) is the process of allowing a large language model (LLM) to go beyond text and "generate UI". This creates a more engaging and AI-native experience for users.
|
||||
|
||||
<WeatherSearch />
|
||||
|
||||
At the core of generative UI are [ tools ](/docs/ai-sdk-core/tools-and-tool-calling), which are functions you provide to the model to perform specialized tasks like getting the weather in a location. The model can decide when and how to use these tools based on the context of the conversation.
|
||||
|
||||
Generative UI is the process of connecting the results of a tool call to a React component. Here's how it works:
|
||||
|
||||
1. You provide the model with a prompt or conversation history, along with a set of tools.
|
||||
2. Based on the context, the model may decide to call a tool.
|
||||
3. If a tool is called, it will execute and return data.
|
||||
4. This data can then be passed to a React component for rendering.
|
||||
|
||||
By passing the tool results to React components, you can create a generative UI experience that's more engaging and adaptive to your needs.
|
||||
|
||||
## Build a Generative UI Chat Interface
|
||||
|
||||
Let's create a chat interface that handles text-based conversations and incorporates dynamic UI elements based on model responses.
|
||||
|
||||
### Basic Chat Implementation
|
||||
|
||||
Start with a basic chat implementation using the `useChat` hook:
|
||||
|
||||
```tsx filename="app/page.tsx"
|
||||
'use client';
|
||||
|
||||
import { useChat } from '@ai-sdk/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const [input, setInput] = useState('');
|
||||
const { messages, sendMessage } = useChat();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
sendMessage({ text: input });
|
||||
setInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{messages.map(message => (
|
||||
<div key={message.id}>
|
||||
<div>{message.role === 'user' ? 'User: ' : 'AI: '}</div>
|
||||
<div>
|
||||
{message.parts.map((part, index) => {
|
||||
if (part.type === 'text') {
|
||||
return <span key={index}>{part.text}</span>;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
placeholder="Type a message..."
|
||||
/>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
To handle the chat requests and model responses, set up an API route:
|
||||
|
||||
```ts filename="app/api/chat/route.ts"
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText, convertToModelMessages, UIMessage, stepCountIs } from 'ai';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const { messages }: { messages: UIMessage[] } = await request.json();
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
system: 'You are a friendly assistant!',
|
||||
messages: convertToModelMessages(messages),
|
||||
stopWhen: stepCountIs(5),
|
||||
});
|
||||
|
||||
return result.toUIMessageStreamResponse();
|
||||
}
|
||||
```
|
||||
|
||||
This API route uses the `streamText` function to process chat messages and stream the model's responses back to the client.
|
||||
|
||||
### Create a Tool
|
||||
|
||||
Before enhancing your chat interface with dynamic UI elements, you need to create a tool and corresponding React component. A tool will allow the model to perform a specific action, such as fetching weather information.
|
||||
|
||||
Create a new file called `ai/tools.ts` with the following content:
|
||||
|
||||
```ts filename="ai/tools.ts"
|
||||
import { tool as createTool } from 'ai';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const weatherTool = createTool({
|
||||
description: 'Display the weather for a location',
|
||||
inputSchema: z.object({
|
||||
location: z.string().describe('The location to get the weather for'),
|
||||
}),
|
||||
execute: async function ({ location }) {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
return { weather: 'Sunny', temperature: 75, location };
|
||||
},
|
||||
});
|
||||
|
||||
export const tools = {
|
||||
displayWeather: weatherTool,
|
||||
};
|
||||
```
|
||||
|
||||
In this file, you've created a tool called `weatherTool`. This tool simulates fetching weather information for a given location. This tool will return simulated data after a 2-second delay. In a real-world application, you would replace this simulation with an actual API call to a weather service.
|
||||
|
||||
### Update the API Route
|
||||
|
||||
Update the API route to include the tool you've defined:
|
||||
|
||||
```ts filename="app/api/chat/route.ts" highlight="3,8,14"
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText, convertToModelMessages, UIMessage, stepCountIs } from 'ai';
|
||||
import { tools } from '@/ai/tools';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const { messages }: { messages: UIMessage[] } = await request.json();
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
system: 'You are a friendly assistant!',
|
||||
messages: convertToModelMessages(messages),
|
||||
stopWhen: stepCountIs(5),
|
||||
tools,
|
||||
});
|
||||
|
||||
return result.toUIMessageStreamResponse();
|
||||
}
|
||||
```
|
||||
|
||||
Now that you've defined the tool and added it to your `streamText` call, let's build a React component to display the weather information it returns.
|
||||
|
||||
### Create UI Components
|
||||
|
||||
Create a new file called `components/weather.tsx`:
|
||||
|
||||
```tsx filename="components/weather.tsx"
|
||||
type WeatherProps = {
|
||||
temperature: number;
|
||||
weather: string;
|
||||
location: string;
|
||||
};
|
||||
|
||||
export const Weather = ({ temperature, weather, location }: WeatherProps) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Current Weather for {location}</h2>
|
||||
<p>Condition: {weather}</p>
|
||||
<p>Temperature: {temperature}°C</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
This component will display the weather information for a given location. It takes three props: `temperature`, `weather`, and `location` (exactly what the `weatherTool` returns).
|
||||
|
||||
### Render the Weather Component
|
||||
|
||||
Now that you have your tool and corresponding React component, let's integrate them into your chat interface. You'll render the Weather component when the model calls the weather tool.
|
||||
|
||||
To check if the model has called a tool, you can check the `parts` array of the UIMessage object for tool-specific parts. In AI SDK 5.0, tool parts use typed naming: `tool-${toolName}` instead of generic types.
|
||||
|
||||
Update your `page.tsx` file:
|
||||
|
||||
```tsx filename="app/page.tsx" highlight="4,9,14-15,19-46"
|
||||
'use client';
|
||||
|
||||
import { useChat } from '@ai-sdk/react';
|
||||
import { useState } from 'react';
|
||||
import { Weather } from '@/components/weather';
|
||||
|
||||
export default function Page() {
|
||||
const [input, setInput] = useState('');
|
||||
const { messages, sendMessage } = useChat();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
sendMessage({ text: input });
|
||||
setInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{messages.map(message => (
|
||||
<div key={message.id}>
|
||||
<div>{message.role === 'user' ? 'User: ' : 'AI: '}</div>
|
||||
<div>
|
||||
{message.parts.map((part, index) => {
|
||||
if (part.type === 'text') {
|
||||
return <span key={index}>{part.text}</span>;
|
||||
}
|
||||
|
||||
if (part.type === 'tool-displayWeather') {
|
||||
switch (part.state) {
|
||||
case 'input-available':
|
||||
return <div key={index}>Loading weather...</div>;
|
||||
case 'output-available':
|
||||
return (
|
||||
<div key={index}>
|
||||
<Weather {...part.output} />
|
||||
</div>
|
||||
);
|
||||
case 'output-error':
|
||||
return <div key={index}>Error: {part.errorText}</div>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
placeholder="Type a message..."
|
||||
/>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this updated code snippet, you:
|
||||
|
||||
1. Use manual input state management with `useState` instead of the built-in `input` and `handleInputChange`.
|
||||
2. Use `sendMessage` instead of `handleSubmit` to send messages.
|
||||
3. Check the `parts` array of each message for different content types.
|
||||
4. Handle tool parts with type `tool-displayWeather` and their different states (`input-available`, `output-available`, `output-error`).
|
||||
|
||||
This approach allows you to dynamically render UI components based on the model's responses, creating a more interactive and context-aware chat experience.
|
||||
|
||||
## Expanding Your Generative UI Application
|
||||
|
||||
You can enhance your chat application by adding more tools and components, creating a richer and more versatile user experience. Here's how you can expand your application:
|
||||
|
||||
### Adding More Tools
|
||||
|
||||
To add more tools, simply define them in your `ai/tools.ts` file:
|
||||
|
||||
```ts
|
||||
// Add a new stock tool
|
||||
export const stockTool = createTool({
|
||||
description: 'Get price for a stock',
|
||||
inputSchema: z.object({
|
||||
symbol: z.string().describe('The stock symbol to get the price for'),
|
||||
}),
|
||||
execute: async function ({ symbol }) {
|
||||
// Simulated API call
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
return { symbol, price: 100 };
|
||||
},
|
||||
});
|
||||
|
||||
// Update the tools object
|
||||
export const tools = {
|
||||
displayWeather: weatherTool,
|
||||
getStockPrice: stockTool,
|
||||
};
|
||||
```
|
||||
|
||||
Now, create a new file called `components/stock.tsx`:
|
||||
|
||||
```tsx
|
||||
type StockProps = {
|
||||
price: number;
|
||||
symbol: string;
|
||||
};
|
||||
|
||||
export const Stock = ({ price, symbol }: StockProps) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Stock Information</h2>
|
||||
<p>Symbol: {symbol}</p>
|
||||
<p>Price: ${price}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Finally, update your `page.tsx` file to include the new Stock component:
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useChat } from '@ai-sdk/react';
|
||||
import { useState } from 'react';
|
||||
import { Weather } from '@/components/weather';
|
||||
import { Stock } from '@/components/stock';
|
||||
|
||||
export default function Page() {
|
||||
const [input, setInput] = useState('');
|
||||
const { messages, sendMessage } = useChat();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
sendMessage({ text: input });
|
||||
setInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{messages.map(message => (
|
||||
<div key={message.id}>
|
||||
<div>{message.role}</div>
|
||||
<div>
|
||||
{message.parts.map((part, index) => {
|
||||
if (part.type === 'text') {
|
||||
return <span key={index}>{part.text}</span>;
|
||||
}
|
||||
|
||||
if (part.type === 'tool-displayWeather') {
|
||||
switch (part.state) {
|
||||
case 'input-available':
|
||||
return <div key={index}>Loading weather...</div>;
|
||||
case 'output-available':
|
||||
return (
|
||||
<div key={index}>
|
||||
<Weather {...part.output} />
|
||||
</div>
|
||||
);
|
||||
case 'output-error':
|
||||
return <div key={index}>Error: {part.errorText}</div>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (part.type === 'tool-getStockPrice') {
|
||||
switch (part.state) {
|
||||
case 'input-available':
|
||||
return <div key={index}>Loading stock price...</div>;
|
||||
case 'output-available':
|
||||
return (
|
||||
<div key={index}>
|
||||
<Stock {...part.output} />
|
||||
</div>
|
||||
);
|
||||
case 'output-error':
|
||||
return <div key={index}>Error: {part.errorText}</div>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
/>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
By following this pattern, you can continue to add more tools and components, expanding the capabilities of your Generative UI application.
|
||||
Reference in New Issue
Block a user