AI SDK от Vercel — это мощная библиотека с открытым исходным кодом для создания приложений, пользовательских интерфейсов и агентов на базе ИИ на языке TypeScript.
Это руководство поможет вам создать приложение Node.js на TypeScript, которое использует AI SDK для подключения к API Gemini через Google Generative AI Provider и автоматизированного анализа рыночных тенденций. Готовое приложение будет:
- Используйте Gemini с поиском Google для изучения текущих тенденций рынка.
- Извлекайте структурированные данные из исследований для создания диаграмм.
- Объедините результаты исследований и диаграммы в профессиональный HTML-отчет и сохраните его в формате PDF.
Предпосылки
Для выполнения этого руководства вам понадобится:
- Ключ API Gemini. Вы можете создать его бесплатно в Google AI Studio .
- Node.js версии 18 или более поздней.
- Менеджер пакетов, такой как
npm
,pnpm
илиyarn
.
Настройте свое приложение
Сначала создайте новый каталог для вашего проекта и инициализируйте его.
нпм
mkdir market-trend-app
cd market-trend-app
npm init -y
пнпм
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 AI и другие необходимые зависимости.
нпм
npm install ai @ai-sdk/google zod
npm install -D @types/node tsx typescript && npx tsc --init
Чтобы предотвратить ошибку компилятора TypeScript, закомментируйте следующую строку в сгенерированном tsconfig.json
:
//"verbatimModuleSyntax": true,
пнпм
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 install puppeteer chart.js
npm install -D @types/chart.js
пнпм
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
Задайте переменную среды GOOGLE_GENERATIVE_AI_API_KEY
, указав свой ключ API Gemini. Поставщик генеративного ИИ Google автоматически ищет ваш ключ API в этой переменной среды.
MacOS/Linux
export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"
Powershell
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);
Прежде чем усложнять задачу, давайте запустим этот скрипт, чтобы убедиться, что ваша среда настроена правильно. Выполните следующую команду в терминале:
нпм
npx tsc && node main.js
пнпм
pnpm tsx main.ts
пряжа
yarn tsc && node main.js
Если все настроено правильно, вы увидите ответ Gemini, выведенный на консоль.
Проведите маркетинговое исследование с помощью поиска Google
Чтобы получать актуальную информацию, вы можете включить инструмент поиска Google для 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);
Запустите ваше приложение
Теперь вы готовы запустить приложение. Выполните следующую команду в терминале:
нпм
npx tsc && node main.js
пнпм
pnpm tsx main.ts
пряжа
yarn tsc && node main.js
Вы увидите запись в терминале по мере выполнения каждого шага скрипта. После завершения в каталоге вашего проекта будет создан файл report.pdf
с вашим анализом рынка.
Ниже вы видите первые две страницы примера отчета в формате PDF:
Дополнительные ресурсы
Для получения дополнительной информации о разработке с использованием Gemini и AI SDK изучите следующие ресурсы: