Agen Riset Pasar dengan Gemini dan AI SDK dari Vercel

AI SDK by Vercel adalah library open source yang canggih untuk membangun aplikasi, antarmuka pengguna, dan agen yang didukung AI di TypeScript.

Panduan ini akan memandu Anda membuat aplikasi Node.js dengan TypeScript yang menggunakan AI SDK untuk terhubung dengan Gemini API melalui Google Generative AI Provider dan melakukan analisis tren pasar otomatis. Aplikasi akhir akan:

  1. Menggunakan Gemini dengan Google Penelusuran untuk meneliti tren pasar saat ini.
  2. Ekstrak data terstruktur dari riset untuk membuat diagram.
  3. Gabungkan riset dan diagram ke dalam laporan HTML profesional, lalu simpan sebagai PDF.

Prasyarat

Untuk menyelesaikan panduan ini, Anda memerlukan:

  • Kunci Gemini API. Anda dapat membuatnya secara gratis di Google AI Studio.
  • Node.js versi 18 atau yang lebih baru.
  • Pengelola paket, seperti npm, pnpm, atau yarn.

Menyiapkan aplikasi Anda

Pertama, buat direktori baru untuk project Anda dan lakukan inisialisasi.

npm

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

pnpm

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

benang

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

Menginstal dependensi

Selanjutnya, instal AI SDK, penyedia AI Generatif Google, dan dependensi lain yang diperlukan.

npm

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

Untuk mencegah error compiler TypeScript, jadikan baris berikut sebagai komentar di tsconfig.json yang dihasilkan:

//"verbatimModuleSyntax": true,

pnpm

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

benang

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

Untuk mencegah error compiler TypeScript, jadikan baris berikut sebagai komentar di tsconfig.json yang dihasilkan:

//"verbatimModuleSyntax": true,

Aplikasi ini juga akan menggunakan paket pihak ketiga Puppeteer dan Chart.js untuk merender diagram dan membuat 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

benang

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

Paket puppeteer memerlukan skrip yang dijalankan untuk mendownload browser Chromium. Pengelola paket Anda mungkin meminta persetujuan, jadi pastikan Anda menyetujui skrip saat diminta.

Mengonfigurasi kunci API

Tetapkan variabel lingkungan GOOGLE_GENERATIVE_AI_API_KEY dengan kunci Gemini API Anda. Penyedia AI Generatif Google akan otomatis mencari kunci API Anda di variabel lingkungan ini.

MacOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

Powershell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Buat aplikasi Anda

Sekarang, mari kita buat file utama untuk aplikasi kita. Buat file baru bernama main.ts di direktori project Anda. Anda akan membangun logika dalam file ini langkah demi langkah.

Untuk pengujian cepat guna memastikan semuanya telah disiapkan dengan benar, tambahkan kode berikut ke main.ts. Contoh dasar ini menggunakan Gemini 2.5 Flash dan generateText untuk mendapatkan respons sederhana dari 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);

Sebelum menambahkan kompleksitas, jalankan skrip ini untuk memverifikasi bahwa lingkungan Anda dikonfigurasi dengan benar. Jalankan perintah berikut di terminal.

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

benang

yarn tsc && node main.js

Jika semuanya telah disiapkan dengan benar, Anda akan melihat respons Gemini dicetak ke konsol.

Melakukan riset pasar dengan Google Penelusuran

Untuk mendapatkan informasi terbaru, Anda dapat mengaktifkan alat Google Penelusuran untuk Gemini. Saat alat ini aktif, model dapat menelusuri web untuk menjawab perintah dan akan menampilkan sumber yang digunakannya.

Ganti konten main.ts dengan kode berikut untuk melakukan langkah pertama analisis kita.

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

Mengekstrak data diagram

Selanjutnya, mari kita proses teks penelitian untuk mengekstrak data terstruktur yang cocok untuk diagram. Gunakan fungsi generateObject AI SDK bersama dengan skema zod untuk menentukan struktur data yang tepat.

Buat juga fungsi helper untuk mengonversi data terstruktur ini menjadi konfigurasi yang dapat dipahami oleh Chart.js.

Tambahkan kode berikut ke main.ts. Perhatikan impor baru dan "Langkah 2" yang ditambahkan.

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

Membuat laporan akhir

Pada langkah terakhir, minta Gemini untuk bertindak sebagai penulis laporan ahli. Berikan riset pasar, konfigurasi diagram, dan serangkaian petunjuk yang jelas untuk membuat laporan HTML. Kemudian, gunakan Puppeteer untuk merender HTML ini dan menyimpannya sebagai PDF.

Tambahkan impor puppeteer terakhir dan "Step 3" ke file main.ts Anda.

// ... (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);

Jalankan aplikasi Anda

Sekarang Anda siap menjalankan aplikasi. Jalankan perintah berikut di terminal Anda:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

benang

yarn tsc && node main.js

Anda akan melihat logging di terminal saat skrip menjalankan setiap langkah. Setelah selesai, file report.pdf yang berisi analisis pasar Anda akan dibuat di direktori project Anda.

Di bawah, Anda akan melihat dua halaman pertama contoh laporan PDF:

Laporan analisis pasar

Aset lainnya

Untuk mengetahui informasi selengkapnya tentang cara membangun dengan Gemini dan AI SDK, pelajari referensi berikut: