عامل تحقیقات بازار با Gemini و AI SDK توسط Vercel

AI SDK توسط Vercel یک کتابخانه منبع باز قدرتمند برای ساخت برنامه های کاربردی مبتنی بر هوش مصنوعی، رابط های کاربری و عوامل در TypeScript است.

این راهنما شما را در ساخت یک برنامه Node.js با TypeScript راهنمایی می کند که از AI SDK برای اتصال با Gemini API از طریق ارائه دهنده هوش مصنوعی Google Generative و انجام تجزیه و تحلیل خودکار روند بازار استفاده می کند. درخواست نهایی:

  1. از Gemini با جستجوی Google برای تحقیق در مورد روندهای فعلی بازار استفاده کنید.
  2. استخراج داده های ساختار یافته از تحقیق برای تولید نمودار.
  3. تحقیقات و نمودارها را در یک گزارش حرفه ای HTML ترکیب کنید و آن را به صورت PDF ذخیره کنید.

پیش نیازها

برای تکمیل این راهنما، شما نیاز دارید:

  • یک کلید Gemini API. می توانید به صورت رایگان در Google AI Studio ایجاد کنید.
  • Node.js نسخه 18 یا بالاتر.
  • یک مدیر بسته، مانند npm ، pnpm ، یا yarn .

برنامه خود را تنظیم کنید

ابتدا یک دایرکتوری جدید برای پروژه خود ایجاد کنید و آن را مقداردهی اولیه کنید.

npm

mkdir market-trend-app
cd market-trend-app
npm init -y

pnpm

mkdir market-trend-app
cd market-trend-app
pnpm init

نخ

mkdir market-trend-app
cd market-trend-app
yarn init -y

وابستگی ها را نصب کنید

سپس، AI SDK، ارائه‌دهنده هوش مصنوعی Google Generative و سایر وابستگی‌های ضروری را نصب کنید.

npm

npm install ai @ai-sdk/google zod
npm install -D @types/node tsx typescript && npx tsc --init

برای جلوگیری از خطای کامپایلر TypeScript، خط زیر را در tsconfig.json ایجاد شده نظر دهید:

//"verbatimModuleSyntax": true,

pnpm

pnpm add ai @ai-sdk/google zod
pnpm add -D @types/node tsx typescript

نخ

yarn add ai @ai-sdk/google zod
yarn add -D @types/node tsx typescript && yarn tsc --init

برای جلوگیری از خطای کامپایلر TypeScript، خط زیر را در tsconfig.json ایجاد شده نظر دهید:

//"verbatimModuleSyntax": true,

این برنامه همچنین از بسته های شخص ثالث Puppeteer و Chart.js برای ارائه نمودارها و ایجاد یک PDF استفاده می کند:

npm

npm install puppeteer chart.js
npm install -D @types/chart.js

pnpm

pnpm add puppeteer chart.js
pnpm add -D @types/chart.js

نخ

yarn add puppeteer chart.js
yarn add -D @types/chart.js

بسته puppeteer برای دانلود مرورگر Chromium به اجرای یک اسکریپت نیاز دارد. مدیر بسته شما ممکن است درخواست تأیید کند، بنابراین اطمینان حاصل کنید که وقتی از شما خواسته شد اسکریپت را تأیید کنید.

کلید API خود را پیکربندی کنید

با کلید Gemini API متغیر محیطی GOOGLE_GENERATIVE_AI_API_KEY را تنظیم کنید. Google Generative AI Provider به طور خودکار کلید API شما را در این متغیر محیطی جستجو می کند.

MacOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

پاورشل

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

اپلیکیشن خود را ایجاد کنید

حالا بیایید فایل اصلی برنامه خود را ایجاد کنیم. یک فایل جدید به نام main.ts در فهرست پروژه خود ایجاد کنید. منطق را در این فایل قدم به قدم ایجاد خواهید کرد.

برای تست سریع برای اطمینان از اینکه همه چیز به درستی تنظیم شده است، کد زیر را به main.ts اضافه کنید. این مثال اولیه از Gemini 2.5 Flash و generateText برای دریافت پاسخ ساده از Gemini استفاده می کند.

import { google } from "@ai-sdk/google";
import { generateText } from "ai";

async function main() {
  const { text } = await generateText({
    model: google("gemini-2.5-flash"),
    prompt: 'What is plant-based milk?',
  });

  console.log(text);
}

main().catch(console.error);

قبل از افزودن پیچیدگی بیشتر، اجازه دهید این اسکریپت را اجرا کنیم تا بررسی کنیم که محیط شما به درستی پیکربندی شده است. دستور زیر را در ترمینال خود اجرا کنید:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

نخ

yarn tsc && node main.js

اگر همه چیز به درستی تنظیم شده باشد، پاسخ Gemini را خواهید دید که روی کنسول چاپ شده است.

تحقیقات بازار را با جستجوی گوگل انجام دهید

برای دریافت اطلاعات به روز، می توانید ابزار جستجوی گوگل را برای Gemini فعال کنید. وقتی این ابزار فعال است، مدل می‌تواند در وب جستجو کند تا به درخواست پاسخ دهد و منابعی را که استفاده کرده است برمی‌گرداند.

برای انجام اولین مرحله تجزیه و تحلیل، محتوای 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-2.5-flash"),
    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);

استخراج داده های نمودار

در مرحله بعد، بیایید متن تحقیق را پردازش کنیم تا داده های ساختاری مناسب برای نمودارها را استخراج کنیم. از تابع generateObject AI SDK به همراه طرحواره zod برای تعریف ساختار داده دقیق استفاده کنید.

همچنین یک تابع کمکی برای تبدیل این داده های ساختاریافته به پیکربندی که Chart.js قابل درک است ایجاد کنید.

کد زیر را به main.ts اضافه کنید. به واردات جدید و «مرحله 2» اضافه شده توجه کنید.

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-2.5-flash"),
    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-2.5-flash"),
    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);

گزارش نهایی را ایجاد کنید

در مرحله آخر، به Gemini دستور دهید که به عنوان گزارش نویس متخصص عمل کند. تحقیقات بازار، پیکربندی نمودارها و مجموعه ای واضح از دستورالعمل ها را برای ساخت گزارش HTML به آن ارائه دهید. سپس، از Puppeteer برای رندر این HTML و ذخیره آن به صورت PDF استفاده کنید.

وارد کردن نهایی puppeteer و "مرحله 3" را به فایل 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-2.5-flash"),
    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);

اپلیکیشن خود را اجرا کنید

اکنون برای اجرای برنامه آماده هستید. دستور زیر را در ترمینال خود اجرا کنید:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

نخ

yarn tsc && node main.js

هنگامی که اسکریپت هر مرحله را اجرا می کند، ورود به ترمینال خود را مشاهده خواهید کرد. پس از تکمیل، یک فایل report.pdf حاوی تحلیل بازار شما در فهرست پروژه شما ایجاد می شود.

در زیر، دو صفحه اول یک نمونه گزارش PDF را خواهید دید:

گزارش تحلیل بازار

منابع بیشتر

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