Skip to content

Commit 278d324

Browse files
A-NajmabadiA-Najmabadi
committed
docs: update cookbook/nextjs
1 parent e0fc5c9 commit 278d324

File tree

6 files changed

+731
-51
lines changed

6 files changed

+731
-51
lines changed

‎src/components/Sidebar/data.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,23 @@ export default {
547547
title: "استریم object",
548548
link: "/ai/cookbook/nextjs/stream-object"
549549
},
550+
{
551+
title: "فراخوانی Toolها",
552+
link: "/ai/cookbook/nextjs/call-tools"
553+
},
554+
{
555+
title: "فراخوانی Toolها به‌صورت موازی",
556+
link: "/ai/cookbook/nextjs/call-tools-in-parallel"
557+
},
558+
{
559+
title: "فراخوانی Toolها در چندمرحله",
560+
link: "/ai/cookbook/nextjs/call-tools-multiple-steps"
561+
},
562+
// {
563+
// title: "ارسال بدنه سفارشی از useChat",
564+
// link: "/ai/cookbook/nextjs/send-custom-body-from-use-chat"
565+
// },
566+
550567
],
551568

552569
'ai-sdk-core': [

‎src/pages/ai/cookbook/nextjs/call-tools-in-parallel.mdx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import Layout from "@/components/Layout";
2+
import Button from "@/components/Common/button";
3+
import Section from "@/components/Common/section";
4+
import Alert from "@/components/Common/alert";
5+
import ThemePlatformIcon from "@/components/Common/themeIcons"
6+
import Tabs from "@/components/Common/tab";
7+
import Step from "@/components/Common/step";
8+
import Card from "@/components/Common/card";
9+
import Important from "@/components/Common/important";
10+
import Highlight from "@/components/Common/highlight";
11+
import Link from "next/link";
12+
import PlatformIcon from "@/components/Common/icons";
13+
import HighlightTabs from "@/components/Common/HighlightTabs";
14+
import IconContainer from "@/components/Common/IconContainer";
15+
import {
16+
GoContainer,
17+
GoDatabase,
18+
GoRocket,
19+
GoServer,
20+
GoMail,
21+
GoGlobe,
22+
GoArrowLeft,
23+
GoTelescope,
24+
} from "react-icons/go";
25+
26+
import Head from "next/head";
27+
28+
<Layout>
29+
<Head>
30+
<title>مستندات فراخوانی Tool به صورت موازی با AI در NextJS - لیارا</title>
31+
<meta property="og:title" content="مستندات خدمات رایانش ابری لیارا" />
32+
<meta property="og:description" content="مستندات مربوط به فراخوانی Toolها به صورت موازی در فریم‌ورک NextJS به صورت موازی" />
33+
<meta property="og:image" content="https://media.liara.ir/logos/liara-poster.jpg" />
34+
</Head>
35+
36+
37+
# فراخوانی Toolها به صورت موازی با AI در NextJS
38+
<hr className="mb-2" />
39+
40+
41+
برخی از LLMها از فراخوانی Toolها به‌صورت موازی (parallel) پشتیبانی می‌کنند.
42+
این قابلیت زمانی مفید است که چندین Tool، مستقل از یکدیگر باشند و بتوانند در همان مرحله از تولید محتوا، به‌طور هم‌زمان اجرا شوند.
43+
44+
<hr className="mb-2" />
45+
<Section id='client' title='کلاینت' />
46+
47+
48+
بیایید یک کامپوننت React ایجاد کنیم که در آن از هوک <Important>useChat</Important> از ماژول <Important>ai-sdk/react@</Important> استفاده شده است.
49+
این هوک، هنگام ارسال پیام توسط کاربر، یک endpoint به نام <Important>api/chat/</Important> را فراخوانی می‌کند.
50+
این endpoint پاسخ دستیار را بر اساس تاریخچه‌ی گفتگو تولید کرده و به‌صورت استریم به کلاینت ارسال می‌کند.
51+
اگر دستیار در پاسخ خود از Tool استفاده کند، این هوک به‌صورت خودکار آن را نیز نمایش خواهد داد.
52+
<div className="h-2" />
53+
54+
شما همچنین می‌توانید از گزینه‌ی <Important>maxSteps</Important> برای مشخص کردن حداکثر تعداد مراحل، قبل از اینکه مدل یا کاربر با یک پیام متنی پاسخ دهد، استفاده کنید.
55+
در این مثال، مقدار <Important>maxSteps</Important> روی <Important>2</Important> تنظیم شده است تا امکان فراخوانی مجدد مدل با نتیجه Tool وجود داشته باشد.
56+
در فایل <Important>app/page.tsx</Important> قطعه کد زیر را قرار دهید:
57+
58+
<div className="h-2" />
59+
<div dir='ltr'>
60+
<Highlight className="js">
61+
{`'use client';
62+
63+
import { useChat } from '@ai-sdk/react';
64+
65+
export default function Page() {
66+
const { messages, input, setInput, append } = useChat({
67+
api: '/api/chat',
68+
maxSteps: 2,
69+
});
70+
71+
return (
72+
<div>
73+
<input
74+
value={input}
75+
onChange={event => {
76+
setInput(event.target.value);
77+
}}
78+
onKeyDown={async event => {
79+
if (event.key === 'Enter') {
80+
append({ content: input, role: 'user' });
81+
}
82+
}}
83+
/>
84+
85+
{messages.map((message, index) => (
86+
<div key={index}>{message.content}</div>
87+
))}
88+
</div>
89+
);
90+
}`}
91+
</Highlight>
92+
</div>
93+
94+
95+
<hr className="mb-2" />
96+
<Section id='server' title='سرور' />
97+
98+
یک مسیر جدید در <Important>api/chat/</Important> ایجاد کنید که از تابع <Important>streamText</Important> از ماژول <Important>ai</Important> برای تولید پاسخ دستیار بر اساس تاریخچه‌ی گفتگو استفاده می‌کند.
99+
در این مسیر، از فیلد <Important>tool</Important> برای تعریف ابزاری به نام <Important>getWeather</Important> استفاده کنید؛ این Tool وظیفه دارد وضعیت آب‌وهوا را برای یک موقعیت مکانی مشخص بازیابی کند.
100+
همچنین، تابع <Important>getWeather</Important> را تعریف کنید و با استفاده از کتابخانه Zod، اسکیما برای پارامترهای این Tool ارائه دهید تا داده‌های ورودی را اعتبارسنجی کند.
101+
102+
<div className="h-2" />
103+
در مسیر <Important>app/api/chat/route.ts</Important>، قطعه کد زیر را قرار دهید:
104+
105+
<div className="h-2" />
106+
<div dir='ltr'>
107+
<Highlight className="js">
108+
{`// npm i ai @ai-sdk/openai zod
109+
110+
import { createOpenAI } from '@ai-sdk/openai';
111+
import { ToolInvocation, streamText } from 'ai';
112+
import { z } from 'zod';
113+
114+
const my_model = createOpenAI({
115+
baseURL: process.env.BASE_URL!,
116+
apiKey: process.env.LIARA_API_KEY!,
117+
});
118+
119+
interface Message {
120+
role: 'user' | 'assistant';
121+
content: string;
122+
toolInvocations?: ToolInvocation[];
123+
}
124+
125+
function getWeather({ city, unit }) {
126+
return { value: 25, description: 'Sunny' };
127+
}
128+
129+
export async function POST(req: Request) {
130+
const { messages }: { messages: Message[] } = await req.json();
131+
132+
const result = streamText({
133+
model: my_model('openai/gpt-4o-mini'),
134+
system: 'You are a helpful assistant.',
135+
messages,
136+
tools: {
137+
getWeather: {
138+
description: 'Get the weather for a location',
139+
parameters: z.object({
140+
city: z.string().describe('The city to get the weather for'),
141+
unit: z
142+
.enum(['C', 'F'])
143+
.describe('The unit to display the temperature in'),
144+
}),
145+
execute: async ({ city, unit }) => {
146+
const { value, description } = getWeather({ city, unit });
147+
return \`It is currently \${value}°\${unit} and \${description} in \${city}!\`;
148+
},
149+
},
150+
},
151+
});
152+
153+
return result.toDataStreamResponse();
154+
}`}
155+
</Highlight>
156+
</div>
157+
<Alert variant="info">
158+
<p>
159+
متغیرهای محیطی <Important>BASE_URL</Important> و <Important>LIARA_API_KEY</Important> همان baseUrl <a href="https://liara.ir/products/ai/" className="text-[#2196f3]">سرویس هوش مصنوعی لیارا</a> و <a href="/references/api/about/#api-access-key" className="text-[#2196f3]">کلید API لیارا</a> هستند که باید در بخش متغیرهای محیطی برنامه خود، آن‌ها را تنظیم کنید.
160+
</p>
161+
</Alert>
162+
<Alert variant="success">
163+
<p>
164+
پروژه فوق را می‌توانید به‌صورت کامل در <a href="https://github.com/liara-cloud/ai-sdk-examples/tree/master/NextJS/call-tools-in-parallel" className="text-[#2196f3]">گیت‌هاب لیارا</a>، مشاهده کنید.
165+
</p>
166+
</Alert>
167+
168+
169+
</Layout>

0 commit comments

Comments
 (0)