Agente de investigación de mercado con Gemini y el SDK de IA de Vercel

El SDK de IA de Vercel es una potente biblioteca de código abierto para compilar aplicaciones, interfaces de usuario y agentes potenciados por IA en TypeScript.

En esta guía, se explica cómo compilar una aplicación de Node.js con TypeScript que usa el SDK de IA para conectarse con la API de Gemini a través del proveedor de IA generativa de Google y realizar análisis automatizados de tendencias del mercado. La aplicación final hará lo siguiente:

  1. Usa Gemini con la Búsqueda de Google para investigar las tendencias actuales del mercado.
  2. Extrae datos estructurados de la investigación para generar gráficos.
  3. Combina la investigación y los gráficos en un informe HTML profesional y guárdalo como PDF.

Requisitos previos

Para completar esta guía, necesitarás lo siguiente:

  • Una clave de API de Gemini Puedes crear una gratis en Google AI Studio.
  • Node.js versión 18 o posterior
  • Un administrador de paquetes, como npm, pnpm o yarn

Configura tu aplicación

Primero, crea un directorio nuevo para tu proyecto y, luego, inicialízalo.

npm

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

pnpm

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

hilo

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

Instala dependencias

A continuación, instala el SDK de IA, el proveedor de IA generativa de Google y otras dependencias necesarias.

npm

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

Para evitar un error del compilador de TypeScript, comenta la siguiente línea en el archivo tsconfig.json generado:

//"verbatimModuleSyntax": true,

pnpm

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

hilo

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

Para evitar un error del compilador de TypeScript, comenta la siguiente línea en el archivo tsconfig.json generado:

//"verbatimModuleSyntax": true,

Esta aplicación también usará los paquetes de terceros Puppeteer y Chart.js para renderizar gráficos y crear un 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

hilo

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

El paquete puppeteer requiere que se ejecute una secuencia de comandos para descargar el navegador Chromium. Es posible que el administrador de paquetes te solicite aprobación, así que asegúrate de aprobar el script cuando se te solicite.

Configura tu clave de API

Establece la variable de entorno GOOGLE_GENERATIVE_AI_API_KEY con tu clave de la API de Gemini. El proveedor de IA generativa de Google busca automáticamente tu clave de API en esta variable de entorno.

macOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

PowerShell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Crea tu aplicación

Ahora, creemos el archivo principal de nuestra aplicación. Crea un archivo nuevo llamado main.ts en el directorio de tu proyecto. Compilarás la lógica en este archivo paso a paso.

Para realizar una prueba rápida y asegurarte de que todo esté configurado correctamente, agrega el siguiente código a main.ts. En este ejemplo básico, se usan Gemini 2.5 Flash y generateText para obtener una respuesta simple de 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);

Antes de agregar más complejidad, ejecutemos esta secuencia de comandos para verificar que tu entorno esté configurado correctamente. Ejecuta el siguiente comando en la terminal:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

hilo

yarn tsc && node main.js

Si todo está configurado correctamente, verás la respuesta de Gemini impresa en la consola.

Realiza una investigación de mercado con la Búsqueda de Google

Para obtener información actualizada, puedes habilitar la herramienta Búsqueda de Google para Gemini. Cuando esta herramienta está activa, el modelo puede buscar en la Web para responder a la instrucción y mostrará las fuentes que usó.

Reemplaza el contenido de main.ts con el siguiente código para realizar el primer paso de nuestro análisis.

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

Cómo extraer datos de gráficos

A continuación, procesaremos el texto de investigación para extraer datos estructurados adecuados para los gráficos. Usa la función generateObject del SDK de IA junto con un esquema zod para definir la estructura de datos exacta.

También crea una función auxiliar para convertir estos datos estructurados en una configuración que Chart.js pueda comprender.

Agrega el siguiente código a main.ts. Observa las nuevas importaciones y el "Paso 2" agregado.

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

Genera el informe final

En el último paso, indícale a Gemini que actúe como un redactor experto de informes. Proporcionarle la investigación de mercado, las configuraciones de gráficos y un conjunto claro de instrucciones para crear un informe HTML Luego, usa Puppeteer para renderizar este código HTML y guardarlo como PDF.

Agrega la importación final de puppeteer y "Paso 3" a tu archivo 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);

Ejecuta tu aplicación

Ya puedes ejecutar la aplicación. Ejecuta el siguiente comando en tu terminal:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

hilo

yarn tsc && node main.js

Verás el registro en tu terminal a medida que la secuencia de comandos ejecute cada paso. Cuando se complete, se creará un archivo report.pdf que contendrá tu análisis de mercado en el directorio del proyecto.

A continuación, verás las dos primeras páginas de un informe en PDF de ejemplo:

Informe de análisis de mercado

Más recursos

Para obtener más información sobre cómo compilar con Gemini y el SDK de IA, explora estos recursos: