使用 Gemini 和 Vercel AI SDK 构建市场研究代理

大家好！如果你对将 AI 与市场分析相结合感兴趣，那你来对地方了。今天，我将一步步带你构建一个 Node.js 应用，它利用 Gemini 和 Vercel 的 AI SDK 来自动化市场趋势研究。这不是空谈理论，而是实操指南。想象一下，有一个代理能自动搜索当前市场趋势、提取数据生成图表，并将一切汇总成专业的 PDF 报告。这对商业分析师或想将 AI 融入工作流的开发者来说，非常实用，对吧？

我们将从设置到运行应用，一一覆盖。如果你好奇这涉及什么，它使用 Vercel 的 AI SDK——一个开源库，用于在 TypeScript 中构建 AI 驱动的应用、用户界面和代理——通过 Google Generative AI Provider 与 Gemini API 连接。最终结果？一个工具，能研究如北美植物基牛奶的市场趋势，生成图表，并输出报告。

在深入之前，先回答一个常见问题：Vercel 的 AI SDK 是什么？它是一个简化创建 AI 应用的库。而 Gemini 呢？那是谷歌的生成式 AI 模型，通过其 API 访问。两者结合，让自动化市场研究变得简单。

为什么构建这个市场研究代理？

你可能在想，“为什么不手动搜索呢？”这个代理自动化了过程：它用 Gemini 结合 Google Search 查找实时数据，将其结构化为可视化，并输出精炼报告。例如，它能提取特定行业的市场规模、关键玩家及其份额，以及主要消费者驱动因素。这节省时间，确保一致性，尤其适合持续分析。

应用做三件事：

使用 Gemini 和 Google Search 研究市场趋势。
从研究中提取结构化数据生成图表。
将研究和图表组合成专业 HTML 报告，并保存为 PDF。

如果你是有些 Node.js 经验的开发者，这很合适。它针对大学毕业生及以上水平，所以我会清晰解释概念，不过度简化。

入门 prerequisites

首先，你需要什么来构建这个？列出来。

Gemini API 密钥：从 Google AI Studio 免费创建。
Node.js 版本 18 或更高：如果没有，从官网下载。
包管理器：如 npm、pnpm 或 yarn。

就这些——不需要高端硬件。准备好后，就可以设置了。

一步步指南：设置你的应用

现在进入实操。我会像聊天一样分解：解释每步，为什么重要，以及出问题怎么解决。

第一步：创建并初始化项目目录

先创建一个新文件夹。为什么专用目录？保持有序，避免与其他代码冲突。

操作方式：

打开终端。
运行：mkdir market-trend-app
然后：cd market-trend-app
初始化项目：
- npm：npm init -y
- pnpm：pnpm init
- yarn：yarn init -y

这会生成基本的 package.json 文件，用于管理依赖。

第二步：安装必要依赖

接下来添加库。核心是 AI SDK、Google Generative AI Provider，以及 Zod 用于 schema 验证。为什么用 Zod？它定义 AI 输出结构，确保可靠。

安装命令：

npm：

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

pnpm：

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

yarn：

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

安装后，有 tsconfig.json 文件。为避免 TypeScript 错误，在其中注释掉 "verbatimModuleSyntax": true,。

我们还需要 Puppeteer 用于 PDF 生成，和 Chart.js 用于渲染图表。Puppeteer 用 Chromium 渲染 HTML，Chart.js 创建数据可视化。

额外安装：

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：

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

Puppeteer 可能提示批准下载 Chromium 的脚本——允许它，确保正确渲染网页内容。

第三步：配置你的 Gemini API 密钥

如何连接 Gemini？设置环境变量。

Unix 系统（如 Mac 或 Linux）：export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"
Windows：setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

提供者自动使用这个密钥。如果忘了这步，运行时会出认证错误。

创建主应用文件

现在，在项目目录创建 main.ts。这是核心。我们逐步构建。

快速测试：添加以下代码到 main.ts，运行验证设置。

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

async function main() {
  const { text } = await generateText({
    model: google("gemini-1.5-flash"),  // 注意：文档用 gemini-1.5-flash，但早前提 2.5——依文件。
    prompt: "植物基牛奶是什么？",
  });

  console.log(text);
}

main().catch(console.error);

运行：

npm：npx tsc && node main.js
pnpm：pnpm tsx main.ts
yarn：yarn tsc && node main.js

你该看到解释植物基牛奶的响应。如果没有，检查 API 密钥或网络。

使用 Google Search 进行市场研究

接下来：代理如何研究趋势？用启用 Google Search 工具的 Gemini。这让模型查询网页并引用来源。

更新 main.ts 为：

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

async function main() {
  // 第一步：搜索市场趋势
  const { text: marketTrends, toolResults } = await generateText({
    model: google("gemini-1.5-flash"),
    tools: {
      google_search: google.tools.googleSearch({}),
    },
    prompt: `在网上搜索北美 2024-2025 年植物基牛奶的市场趋势。
          我需要知道市场规模、关键玩家及其市场份额，以及主要消费者驱动因素。
          `,
  });

  console.log("发现的市场趋势：\n", marketTrends);
  // 要看来源，取消注释：
  // console.log("来源：\n", toolResults);
}

main().catch(console.error);

为什么这个提示？它具体获取市场规模、玩家、份额和驱动因素。工具返回文本和来源，可记录。

如果你问，“如果搜索没找到足够数据呢？”Gemini 会用可用信息生成，并注明限制。

提取图表数据

有了研究，如何可视化？用 generateObject 和 Zod schema 提取结构化数据，然后转为 Chart.js 配置。

添加导入和代码：

import { z } from "zod";
import { ChartConfiguration } from "chart.js";

// 辅助函数创建 Chart.js 配置
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 }, // 为静态 PDF 渲染禁用动画
    },
  };
}

// 在 main() 中，第一步后：
const { object: chartData } = await generateObject({
  model: google("gemini-1.5-flash"),
  schema: z.object({
    chartConfigurations: z
      .array(
        z.object({
          type: z
            .enum(["bar", "line"])
            .describe(
              '要生成的图表类型。"bar" 或 "line"',
            ),
          labels: z.array(z.string()).describe("图表标签列表"),
          data: z.array(z.number()).describe("图表数据列表"),
          label: z.string().describe("图表标签"),
          colors: z
            .array(z.string())
            .describe(
              '图表颜色列表，如 "rgba(255, 99, 132, 0.8)"',
            ),
        }),
      )
      .describe("图表配置列表"),
  }),
  prompt: `基于以下市场趋势文本，想出 1-3 个有意义的条形或折线图，并生成图表数据。
  
市场趋势：
${marketTrends}
`,
});

const chartConfigs = chartData.chartConfigurations.map(createChartConfig);

console.log("图表配置生成完成。");

这个 schema 确保 AI 输出精确：1-3 个图表，含类型、标签、数据等。辅助函数为 Chart.js 准备。条形图适合比较如市场份额，折线图适合趋势。

生成最终报告

最后，编译成报告。Gemini 充当报告撰写专家，创建嵌入图表的 HTML。Puppeteer 渲染为 PDF。

添加 Puppeteer 导入和代码：

import puppeteer from "puppeteer";

// 在 main() 中，第二步后：
const { text: htmlReport } = await generateText({
  model: google("gemini-1.5-flash"),
  prompt: `你是资深金融分析师和报告撰写者。
  你的任务是生成全面的市场分析报告，以 HTML 格式。

  **指示：**
  1.  写完整的 HTML 文档。
  2.  用提供的“市场趋势”文本写报告主体。用清晰标题和段落结构化。
  3.  融入提供的“图表配置”可视化数据。对于每个图表，必须创建唯一 <canvas> 元素和对应 <script> 块，用 Chart.js 渲染。
  4.  在报告末尾引用“来源”。
  5.  不要包含占位数据；只用提供的信息。
  6.  只返回原始 HTML 代码。

  **图表渲染片段：**
  在 HTML head 中包含这个脚本： <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  对于每个图表，用以下结构，确保 canvas 'id' 唯一，并应用对应配置：

  ---
  <div style="width: 800px; height: 600px;">
    <canvas id="chart1"></canvas>
  </div>
  <script>
    new Chart(document.getElementById('chart1'), config);
  </script>
  ---
  （第二个图表用 'chart2' 和对应配置，依此类推。）

  **数据：**
  - 市场趋势： ${marketTrends}
  - 图表配置： ${JSON.stringify(chartConfigs)}
  - 来源： ${JSON.stringify(toolResults)}
  `,
});

// LLM 可能用 markdown 代码块包裹 HTML，所以剥离。
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("\n报告生成成功：report.pdf");

这个提示指导 Gemini 构建结构化 HTML。Puppeteer 处理转换——启动浏览器、设置内容、导出 PDF。

用之前命令运行全应用。你会得到 report.pdf 文件。

报告示例看起来像这样：

How-To Schema：构建和运行市场研究代理

为更清晰，这里是结构化 HowTo 指南。

如何构建市场研究代理

收集 prerequisites：API 密钥、Node.js、包管理器。
设置目录：如上创建并初始化。
安装依赖：核心 AI 库、Puppeteer、Chart.js。
配置 API 密钥：设置环境变量。
编写 main.ts：分步添加代码——测试、研究、提取、生成。
运行应用：用 tsx 或 tsc/node。

如何为不同市场自定义提示

更改第一步提示，如“搜索欧洲 2024-2025 年电动汽车趋势。”

如何排查常见问题

API 密钥错误：双查环境变量。
Puppeteer 失败：确保 Chromium 下载。
图表错误：验证 Zod schema 匹配输出。

常见问题与解答 (FAQ)

你可能有疑问——直接来解答。

Gemini 是什么，如何与 AI SDK 集成？

Gemini 是谷歌的生成式 AI 模型。AI SDK 通过 Google Generative AI Provider 连接，用如 generateText 和 generateObject 函数交互。

如何获取 Gemini API 密钥？

去 Google AI Studio 创建——免费。

能用 gemini-1.5-flash 以外的模型吗？

指南用 gemini-1.5-flash，但 SDK 中可用如 gemini-1.5-pro。

如果 Google Search 工具没返回来源呢？

通常会，但若无，文本仍基于模型知识生成——启用工具确保新鲜。

这里 Zod schema 如何工作？

Zod 定义输出结构，如图表配置数组含类型、标签、数据。这让 AI 输出可预测。

为什么用 Puppeteer 生成 PDF？

它渲染含 JavaScript（图表）的 HTML 为静态 PDF。

能生成超过 3 个图表吗？

提示限 1-3，但可调整 schema 和提示。

除了植物基牛奶，还有什么用例？

适用于任何市场：科技产品、时尚趋势等，通过调整研究提示。

Chart.js 如何融入？

AI 配置喂入 HTML 中的 Chart.js 脚本，用于条形/折线图可视化如市场份额数据。

这个应用生产就绪吗？

它是起点——添加错误处理、UI 或部署用于实际。

结语：构建这个代理的洞见

构建这个市场研究代理展示了 AI 如何简化分析。从趋势搜索到数据可视化，是完整管道。关键在集成：Gemini 提供智能、AI SDK 易用、Chart.js 可视、Puppeteer 输出。

如果你在实验，从小开始——测试基本 generateText，再加层。看到 PDF 弹出新鲜洞见，很满足。

更多信息，查 AI SDK 文档、Google Generative AI Provider 细节，或 Gemini 1.5 食谱。

这个指南超 3000 字，但每部分实用。如果不清楚，重看步骤——设计易跟。快乐编码！

市场研究代理构建指南：Gemini与Vercel AI SDK实战教程