کیت توسعه نرمافزار هوش مصنوعی (AI SDK) ساختهی ورسل (Vercel) یک کتابخانهی متنباز قدرتمند برای ساخت برنامههای مبتنی بر هوش مصنوعی، رابطهای کاربری و عاملها در تایپاسکریپت است.
این راهنما شما را در ساخت یک برنامه Node.js با TypeScript راهنمایی میکند که از AI SDK برای اتصال به Gemini API از طریق Google Generative AI Provider و انجام خودکار تحلیل روند بازار استفاده میکند. برنامه نهایی:
- از Gemini با جستجوی گوگل برای تحقیق در مورد روندهای فعلی بازار استفاده کنید.
- استخراج دادههای ساختاریافته از تحقیق برای تولید نمودارها.
- تحقیق و نمودارها را در یک گزارش HTML حرفهای ترکیب کنید و آن را به صورت PDF ذخیره کنید.
پیشنیازها
برای تکمیل این راهنما، به موارد زیر نیاز دارید:
- یک کلید API جمینی. میتوانید آن را به صورت رایگان در Google AI Studio ایجاد کنید.
- Node.js نسخه ۱۸ یا بالاتر.
- یک مدیر بسته، مانند
npm،pnpmیاyarn.
برنامه خود را تنظیم کنید
ابتدا، یک دایرکتوری جدید برای پروژه خود ایجاد کنید و آن را مقداردهی اولیه کنید.
انپیام
mkdir market-trend-appcd market-trend-appnpm init -y
پی ان پی ام
mkdir market-trend-appcd market-trend-apppnpm init
نخ
mkdir market-trend-appcd market-trend-appyarn init -y
نصب وابستگیها
در مرحله بعد، کیت توسعه نرمافزار هوش مصنوعی (AI SDK)، ارائهدهنده هوش مصنوعی نسل گوگل (Google Generative AI) و سایر وابستگیهای لازم را نصب کنید.
انپیام
npm install ai @ai-sdk/google zodnpm install -D @types/node tsx typescript && npx tsc --init
برای جلوگیری از خطای کامپایلر TypeScript، خط زیر را در فایل tsconfig.json تولید شده، به صورت کامنت درآورید:
//"verbatimModuleSyntax": true,
پی ان پی ام
pnpm add ai @ai-sdk/google zodpnpm add -D @types/node tsx typescript
نخ
yarn add ai @ai-sdk/google zodyarn add -D @types/node tsx typescript && yarn tsc --init
برای جلوگیری از خطای کامپایلر TypeScript، خط زیر را در فایل tsconfig.json تولید شده، به صورت کامنت درآورید:
//"verbatimModuleSyntax": true,
این برنامه همچنین از بستههای شخص ثالث Puppeteer و Chart.js برای رندر کردن نمودارها و ایجاد PDF استفاده خواهد کرد:
انپیام
npm install puppeteer chart.jsnpm install -D @types/chart.js
پی ان پی ام
pnpm add puppeteer chart.jspnpm add -D @types/chart.js
نخ
yarn add puppeteer chart.jsyarn add -D @types/chart.js
بسته puppeteer برای دانلود مرورگر Chromium نیاز به اجرای یک اسکریپت دارد. ممکن است مدیر بسته شما درخواست تأیید کند، بنابراین مطمئن شوید که اسکریپت را در صورت درخواست تأیید میکنید.
کلید API خود را پیکربندی کنید
متغیر محیطی GOOGLE_GENERATIVE_AI_API_KEY با کلید API Gemini خود تنظیم کنید. ارائه دهنده هوش مصنوعی مولد گوگل به طور خودکار کلید API شما را در این متغیر محیطی جستجو میکند.
مکاواس/لینوکس
export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"پاورشل
setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"برنامه خود را ایجاد کنید
حالا، بیایید فایل اصلی برنامهمان را ایجاد کنیم. یک فایل جدید با نام main.ts در دایرکتوری پروژه خود ایجاد کنید. منطق این فایل را گام به گام خواهید ساخت.
برای یک آزمایش سریع و اطمینان از اینکه همه چیز به درستی تنظیم شده است، کد زیر را به main.ts اضافه کنید. این مثال ساده generateText برای دریافت یک پاسخ ساده از Gemini استفاده میکند.
import { google } from "@ai-sdk/google";
import { generateText } from "ai";
async function main() {
const { text } = await generateText({
model: google("gemini-3-flash-preview"),
prompt: 'What is plant-based milk?',
});
console.log(text);
}
main().catch(console.error);
قبل از اضافه کردن پیچیدگی بیشتر، این اسکریپت را اجرا کنید تا مطمئن شوید محیط شما به درستی پیکربندی شده است. دستور زیر را در ترمینال خود اجرا کنید:
انپیام
npx tsc && node main.jsپی ان پی ام
pnpm tsx main.tsنخ
yarn tsc && node main.jsاگر همه چیز به درستی تنظیم شده باشد، پاسخ Gemini را در کنسول چاپ خواهید کرد.
انجام تحقیقات بازار با جستجوی گوگل
To get up-to-date information, you can enable the Google Search tool for Gemini. When this tool is active, the model can search the web to answer the prompt and will return the sources it used.
برای انجام اولین مرحله از تحلیل خود، محتوای main.ts را با کد زیر جایگزین کنید.
import { google } from "@ai-sdk/google";
import { generateText } from "ai";
async function main() {
// Step 1: Search market trends
const { text: marketTrends, sources } = await generateText({
model: google("gemini-3-flash-preview"),
tools: {
google_search: google.tools.googleSearch({}),
},
prompt: `Search the web for market trends for plant-based milk in North America for 2024-2025.
I need to know the market size, key players and their market share, and primary consumer drivers.
`,
});
console.log("Market trends found:\n", marketTrends);
// To see the sources, uncomment the following line:
// console.log("Sources:\n", sources);
}
main().catch(console.error);
استخراج دادههای نمودار
Next, let's process the research text to extract structured data suitable for charts. Use the AI SDK's generateObject function along with a zod schema to define the exact data structure.
همچنین یک تابع کمکی ایجاد کنید تا این دادههای ساختاریافته را به پیکربندیای تبدیل کند که Chart.js بتواند آن را درک کند.
کد زیر را به main.ts اضافه کنید. به importهای جدید و عبارت "مرحله ۲" اضافه شده توجه کنید.
import { google } from "@ai-sdk/google";
import { generateText, generateObject } from "ai";
import { z } from "zod/v4";
import { ChartConfiguration } from "chart.js";
// Helper function to create Chart.js configurations
function createChartConfig({labels, data, label, type, colors,}: {
labels: string[];
data: number[];
label: string;
type: "bar" | "line";
colors: string[];
}): ChartConfiguration {
return {
type: type,
data: {
labels: labels,
datasets: [
{
label: label,
data: data,
borderWidth: 1,
...(type === "bar" && { backgroundColor: colors }),
...(type === "line" && colors.length > 0 && { borderColor: colors[0] }),
},
],
},
options: {
animation: { duration: 0 }, // Disable animations for static PDF rendering
},
};
}
async function main() {
// Step 1: Search market trends
const { text: marketTrends, sources } = await generateText({
model: google("gemini-3-flash-preview"),
tools: {
google_search: google.tools.googleSearch({}),
},
prompt: `Search the web for market trends for plant-based milk in North America for 2024-2025.
I need to know the market size, key players and their market share, and primary consumer drivers.
`,
});
console.log("Market trends found.");
// Step 2: Extract chart data
const { object: chartData } = await generateObject({
model: google("gemini-3-flash-preview"),
schema: z.object({
chartConfigurations: z
.array(
z.object({
type: z.enum(["bar", "line"]).describe('The type of chart to generate. Either "bar" or "line"',),
labels: z.array(z.string()).describe("A list of chart labels"),
data: z.array(z.number()).describe("A list of the chart data"),
label: z.string().describe("A label for the chart"),
colors: z.array(z.string()).describe('A list of colors to use for the chart, e.g. "rgba(255, 99, 132, 0.8)"',),
}),
)
.describe("A list of chart configurations"),
}),
prompt: `Given the following market trends text, come up with a list of 1-3 meaningful bar or line charts
and generate chart data.
Market Trends:
${marketTrends}
`,
});
const chartConfigs = chartData.chartConfigurations.map(createChartConfig);
console.log("Chart configurations generated.");
}
main().catch(console.error);
گزارش نهایی را تولید کنید
In the final step, instruct Gemini to act as an expert report writer. Provide it with the market research, the chart configurations, and a clear set of instructions for building an HTML report. Then, use Puppeteer to render this HTML and save it as a PDF.
ایمپورت نهایی puppeteer و «مرحله ۳» را به فایل main.ts خود اضافه کنید.
// ... (imports from previous step)
import puppeteer from "puppeteer";
// ... (createChartConfig helper function from previous step)
async function main() {
// ... (Step 1 and 2 from previous step)
// Step 3: Generate the final HTML report and save it as a PDF
const { text: htmlReport } = await generateText({
model: google("gemini-3-flash-preview"),
prompt: `You are an expert financial analyst and report writer.
Your task is to generate a comprehensive market analysis report in HTML format.
**Instructions:**
1. Write a full HTML document.
2. Use the provided "Market Trends" text to write the main body of the report. Structure it with clear headings and paragraphs.
3. Incorporate the provided "Chart Configurations" to visualize the data. For each chart, you MUST create a unique <canvas> element and a corresponding <script> block to render it using Chart.js.
4. Reference the "Sources" at the end of the report.
5. Do not include any placeholder data; use only the information provided.
6. Return only the raw HTML code.
**Chart Rendering Snippet:**
Include this script in the head of the HTML: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
For each chart, use a structure like below, ensuring the canvas 'id' is unique for each chart, and apply the correspinding config:
---
<div style="width: 800px; height: 600px;">
<canvas id="chart1"></canvas>
</div>
<script>
new Chart(document.getElementById('chart1'), config);
</script>
---
(For the second chart, use 'chart2' and the corresponding config, and so on.)
**Data:**
- Market Trends: ${marketTrends}
- Chart Configurations: ${JSON.stringify(chartConfigs)}
- Sources: ${JSON.stringify(sources)}
`,
});
// LLMs may wrap the HTML in a markdown code block, so strip it.
const finalHtml = htmlReport.replace(/^```html\n/, "").replace(/\n```$/, "");
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(finalHtml);
await page.pdf({ path: "report.pdf", format: "A4" });
await browser.close();
console.log("\nReport generated successfully: report.pdf");
}
main().catch(console.error);
برنامه خود را اجرا کنید
اکنون آماده اجرای برنامه هستید. دستور زیر را در ترمینال خود اجرا کنید:
انپیام
npx tsc && node main.jsپی ان پی ام
pnpm tsx main.tsنخ
yarn tsc && node main.js با اجرای هر مرحله از اسکریپت، ورود به سیستم را در ترمینال خود مشاهده خواهید کرد. پس از تکمیل، یک فایل report.pdf حاوی تحلیل بازار شما در دایرکتوری پروژه شما ایجاد میشود.
در زیر، دو صفحه اول یک نمونه گزارش PDF را مشاهده خواهید کرد:

منابع بیشتر
برای اطلاعات بیشتر در مورد ساخت با Gemini و AI SDK، این منابع را بررسی کنید: