Agjent i Kërkimit të Tregut me Gemini dhe AI SDK nga Vercel

AI SDK nga Vercel është një bibliotekë e fuqishme me burim të hapur për ndërtimin e aplikacioneve të fuqizuara nga AI, ndërfaqeve të përdoruesit dhe agjentëve në TypeScript.

Ky udhëzues do t'ju udhëzojë në ndërtimin e një aplikacioni Node.js me TypeScript që përdor AI SDK për t'u lidhur me Gemini API përmes Ofruesit të AI Gjenerative të Google dhe për të kryer analiza të automatizuara të tendencave të tregut. Aplikimi përfundimtar do të:

  1. Përdorni Gemini me Google Search për të hulumtuar tendencat aktuale të tregut.
  2. Ekstraktoni të dhëna të strukturuara nga kërkimi për të gjeneruar grafikët.
  3. Kombinoni kërkimin dhe grafikët në një raport profesional HTML dhe ruajeni si PDF.

Parakushtet

Për të përfunduar këtë udhëzues, do t'ju duhet:

  • Një çelës API Gemini. Mund ta krijoni një të tillë falas në Google AI Studio .
  • Node.js versioni 18 ose më i ri.
  • Një menaxher paketash, si p.sh. npm , pnpm ose yarn .

Vendosni aplikacionin tuaj

Së pari, krijoni një direktori të re për projektin tuaj dhe inicializoni atë.

npm

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

pnpm

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

fije

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

Instaloni varësitë

Më pas, instaloni AI SDK, ofruesin e Google Generative AI dhe varësi të tjera të nevojshme.

npm

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

Për të parandaluar një gabim të përpiluesit TypeScript, komentoni rreshtin e mëposhtëm në tsconfig.json të krijuar:

//"verbatimModuleSyntax": true,

pnpm

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

fije

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

Për të parandaluar një gabim të përpiluesit TypeScript, komentoni rreshtin e mëposhtëm në tsconfig.json të krijuar:

//"verbatimModuleSyntax": true,

Ky aplikacion do të përdorë gjithashtu paketat e palëve të treta Puppeteer dhe Chart.js për paraqitjen e grafikëve dhe krijimin e një 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

fije

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

Paketa puppeteer kërkon ekzekutimin e një skripti për të shkarkuar shfletuesin Chromium. Menaxheri juaj i paketës mund të kërkojë miratim, prandaj sigurohuni që ta miratoni skriptin kur ju kërkohet.

Konfiguro çelësin tënd API

Cakto ndryshoren e mjedisit GOOGLE_GENERATIVE_AI_API_KEY me çelësin tënd API Gemini. Ofruesi i AI Generative Google kërkon automatikisht çelësin tuaj API në këtë variabël mjedisi.

MacOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

Powershell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Krijoni aplikacionin tuaj

Tani, le të krijojmë skedarin kryesor për aplikacionin tonë. Krijoni një skedar të ri me emrin main.ts në drejtorinë e projektit tuaj. Do ta ndërtoni logjikën në këtë skedar hap pas hapi.

Për një provë të shpejtë për t'u siguruar që gjithçka është konfiguruar saktë, shtoni kodin e mëposhtëm në main.ts Ky shembull bazë përdor Gemini 2.5 Flash dhe generateText për të marrë një përgjigje të thjeshtë nga 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);

Përpara se të shtojmë më shumë kompleksitet, le të ekzekutojmë këtë skript për të verifikuar që mjedisi juaj është konfiguruar saktë. Ekzekutoni komandën e mëposhtme në terminalin tuaj:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

fije

yarn tsc && node main.js

Nëse gjithçka është konfiguruar si duhet, do të shihni përgjigjen e Binjakëve të printuar në tastierë.

Kryeni kërkime tregu me Google Search

Për të marrë informacione të përditësuara, mund të aktivizoni veglën e Kërkimit të Google për Binjakët. Kur ky mjet është aktiv, modeli mund të kërkojë në ueb për t'iu përgjigjur kërkesës dhe do të kthejë burimet që ka përdorur.

Zëvendësoni përmbajtjen e main.ts me kodin e mëposhtëm për të kryer hapin e parë të analizës sonë.

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);

Ekstraktoni të dhënat e grafikut

Më pas, le të përpunojmë tekstin e kërkimit për të nxjerrë të dhëna të strukturuara të përshtatshme për grafikët. Përdorni funksionin generateObject të AI SDK së bashku me një skemë zod për të përcaktuar strukturën e saktë të të dhënave.

Krijoni gjithashtu një funksion ndihmës për të kthyer këto të dhëna të strukturuara në një konfigurim që mund ta kuptojë Chart.js .

Shtoni kodin e mëposhtëm në main.ts Vini re importet e reja dhe "Hapi 2" i shtuar.

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);

Gjeneroni raportin përfundimtar

Në hapin e fundit, udhëzoni Binjakët që të veprojnë si hartues i raportit të ekspertëve. Sigurojini atij hulumtimin e tregut, konfigurimin e grafikut dhe një grup të qartë udhëzimesh për ndërtimin e një raporti HTML. Pastaj, përdorni Puppeteer për të dhënë këtë HTML dhe për ta ruajtur atë si një PDF.

Shtoni importin përfundimtar puppeteer dhe "Hapi 3" në skedarin tuaj 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);

Ekzekutoni aplikacionin tuaj

Tani jeni gati për të ekzekutuar aplikacionin. Ekzekutoni komandën e mëposhtme në terminalin tuaj:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

fije

yarn tsc && node main.js

Do të shihni regjistrimin në terminalin tuaj ndërsa skripti ekzekuton çdo hap. Pasi të përfundojë, një skedar report.pdf që përmban analizën tuaj të tregut do të krijohet në drejtorinë e projektit tuaj.

Më poshtë, do të shihni dy faqet e para të një raporti shembull PDF:

Raporti i analizës së tregut

Burime të mëtejshme

Për më shumë informacion rreth ndërtimit me Gemini dhe AI ​​SDK, eksploroni këto burime: