Call Tools in Parallel
Learn how to tools in parallel text using the AI TOOLKIT and React Server Components.
Some language models support calling tools in parallel. This is particularly useful when multiple tools are independent of each other and can be executed in parallel during the same generation step. history={[ { role: 'User', content: 'How is it going?' }, { role: 'Assistant', content: 'All good, how may I help you?' }, ]} inputMessage={{ role: 'User', content: 'What is the weather in Paris and New York?', }} outputMessage={{ role: 'Assistant', content: 'The weather is 24°C in New York and 25°C in Paris. It is sunny in both cities.', }} />
Run it locally
$ npm install aiClient
Let's modify our previous example to call getWeather tool for multiple cities in parallel.
'use client';
import { useState } from 'react';
import { Message, continueConversation } from './actions';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export default function Home() {
const [conversation, setConversation] = useState<Message[]>([]);
const [input, setInput] = useState<string>('');
return (
<div>
<div>
{conversation.map((message, index) => (
<div key={index}>
{message.role}: {message.content}
</div>
))}
</div>
<div>
<input
type="text"
value={input}
onChange={event => {
setInput(event.target.value);
}}
/>
<button
onClick={async () => {
const { messages } = await continueConversation([
...conversation,
{ role: 'user', content: input },
]);
setConversation(messages);
}}
>
Send Message
</button>
</div>
</div>
);
}
- 1'use client';
- 2import { useState } from 'react';
- 3import { Message, continueConversation } from './actions';
- 4// Allow streaming responses up to 30 seconds
- 5export const maxDuration = 30;
- 6export default function Home() {
- 7 const [conversation, setConversation] = useState<Message[]>([]);
- 8 const [input, setInput] = useState<string>('');
- 9 return (
- 10 <div>
- 11 <div>
- 12 {conversation.map((message, index) => (
- 13 <div key={index}>
- 14 {message.role}: {message.content}
- 15 </div>
- 16 ))}
- 17 </div>
- 18 <div>
- 19 <input
- 20 type="text"
- 21 value={input}
- 22 onChange={event => {
- 23 setInput(event.target.value);
- 24 }}
- 25 />
- 26 <button
- 27 onClick={async () => {
- 28 const { messages } = await continueConversation([
- 29 ...conversation,
- 30 { role: 'user', content: input },
- 31 ]);
- 32 setConversation(messages);
- 33 }}
- 34 >
- 35 Send Message
- 36 </button>
- 37 </div>
- 38 </div>
- 39 );
- 40}
Server
Let's update the tools object to now use the getWeather function instead.
'use server';
import { generateText } from 'ai-toolkit';
import { openai } from '@ai-toolkit/openai';
import { z } from 'zod';
export interface Message {
role: 'user' | 'assistant';
content: string;
}
function getWeather({ city, unit }) {
// This function would normally make an
// API request to get the weather.
return { value: 25, description: 'Sunny' };
}
export async function continueConversation(history: Message[]) {
'use server';
const { text, toolResults } = await generateText({
model: openai('gpt-3.5-turbo'),
system: 'You are a friendly weather assistant!',
messages: history,
tools: {
getWeather: {
description: 'Get the weather for a location',
inputSchema: z.object({
city: z.string().describe('The city to get the weather for'),
unit: z
.enum(['C', 'F'])
.describe('The unit to display the temperature in'),
}),
execute: async ({ city, unit }) => {
const weather = getWeather({ city, unit });
return It is currently ${weather.value}°${unit} and ${weather.description} in ${city}!;
},
},
},
});
return {
messages: [
...history,
{
role: 'assistant' as const,
content:
text || toolResults.map(toolResult => toolResult.result).join('\n'),
},
],
};
}
- 1'use server';
- 2import { generateText } from 'ai-toolkit';
- 3import { openai } from '@ai-toolkit/openai';
- 4import { z } from 'zod';
- 5export interface Message {
- 6 role: 'user' | 'assistant';
- 7 content: string;
- 8}
- 9function getWeather({ city, unit }) {
- 10 // This function would normally make an
- 11 // API request to get the weather.
- 12 return { value: 25, description: 'Sunny' };
- 13}
- 14export async function continueConversation(history: Message[]) {
- 15 'use server';
- 16 const { text, toolResults } = await generateText({
- 17 model: openai('gpt-3.5-turbo'),
- 18 system: 'You are a friendly weather assistant!',
- 19 messages: history,
- 20 tools: {
- 21 getWeather: {
- 22 description: 'Get the weather for a location',
- 23 inputSchema: z.object({
- 24 city: z.string().describe('The city to get the weather for'),
- 25 unit: z
- 26 .enum(['C', 'F'])
- 27 .describe('The unit to display the temperature in'),
- 28 }),
- 29 execute: async ({ city, unit }) => {
- 30 const weather = getWeather({ city, unit });
- 31 return `It is currently ${weather.value}°${unit} and ${weather.description} in ${city}!`;
- 32 },
- 33 },
- 34 },
- 35 });
- 36 return {
- 37 messages: [
- 38 ...history,
- 39 {
- 40 role: 'assistant' as const,
- 41 content:
- 42 text || toolResults.map(toolResult => toolResult.result).join('\n'),
- 43 },
- 44 ],
- 45 };
- 46}