Эта система ищет новости в глобальных источниках, извлекает полное содержание статей (в обход платных стен), выявляет предвзятость в освещении и генерирует интеллектуальный анализ на основе реальных новостных событий.
Вы узнаете:
- Как создавать инструменты для изучения новостей с помощью Bright Data SDK для веб-скрейпинга
- Как использовать Vercel ИИ SDK для интеллектуального анализа и обсуждения новостей
- Как обойти платные стены и защиту от ботов, чтобы получить доступ к любому источнику новостей
- Как выявить предвзятость, сравнивая освещение событий в разных изданиях
- Как создать автоматизированный конвейер от обнаружения новостей до проверки фактов
Давайте начнем!
Необходимые условия
Чтобы следовать этому руководству, вам необходимо:
- Базовые знания о React и Next.js
- Node.js 20.18.1+, установленный в вашей локальной среде разработки
- Учетная запись Bright Data с доступом к API (доступен бесплатный уровень)
- Ключ OpenAI API с доступом GPT-4
- Знакомство с TypeScript и современным JavaScript
- Базовое понимание работы с API и переменными окружения
Проблемы традиционного потребления новостей
Традиционные способы получения информации и новостей имеют ряд ключевых ограничений:
- Информационная перегрузка: Ежедневно вы сталкиваетесь с сотнями заголовков. Это затрудняет понимание того, что важно или имеет отношение к вашим интересам.
- Предвзятость и отсутствие перспектив: Большинство людей получают новости из небольшого числа источников. Вы упускаете важные точки зрения и часто видите однобокое освещение сложных вопросов.
- Платные барьеры: Качественная журналистика часто находится за платными стенами. Вам трудно получить доступ к полным текстам статей из разных источников для проведения тщательного исследования.
- Бремя проверки фактов: Чтобы проверить утверждения, вам нужно найти несколько источников, перепроверить информацию и оценить достоверность источника. У большинства людей нет на это времени.
- Отсутствие контекста: В свежих новостях часто отсутствует исторический контекст или связанные с ними события. Вам сложно увидеть полную картину развития событий.
NewsIQ решает эти проблемы. В ней сочетаются анализ на основе ИИ и веб-скрейпинг корпоративного уровня. Система получает доступ к любому источнику новостей (в обход защиты от ботов), анализирует освещение событий в различных изданиях и предоставляет интеллектуальные выводы с правильной атрибуцией источников.
Создание помощника по исследованию новостей
Мы создадим NewsIQ, полноценный помощник для исследования новостей с помощью ИИ, используя Bright Data и Vercel ИИ SDK. Мы создадим решение для обработки новостей из любого источника и проведения интеллектуального анализа с помощью разговорного интерфейса.
Шаг 1: Настройка проекта
Сначала настройте среду разработки Next.js. Создайте новую директорию для проекта:
npx create-next-app@latest ai-news-assistantКогда появится запрос, выберите следующий вариант:
Перейдите в каталог проекта и установите необходимые пакеты:
cd ai-news-assistant &&
npm install @brightdata/sdk ai zod @ai-sdk/openaiЭти пакеты содержат все необходимое: Bright Data SDK для веб-скрейпинга, Vercel ИИ SDK для интеллектуального анализа, Zod для проверки схем с сохранением типов и OpenИИ для генерации текста LLM.
Затем создайте файл .env.local для хранения учетных данных API:
BRIGHTDATA_API_KEY=ваш_brightdata_api_key_here
OPENAI_API_KEY=ваш_openai_api_key_hereВам потребуется:
- API-токен Bright Data: Генерируется на панели инструментов Bright Data
- Ключ API OpenAI: Для генерации текста LLM
Шаг 2: Определите инструменты для исследования новостей
Создайте основную функциональность исследования новостей, определив три инструмента для использования веб-скрейпинга Bright Data. В директории проекта создайте новый файл lib/brightdata-tools.ts:
import { tool, type Tool } из "ai";
import { z } from "zod";
import { bdclient } from "@brightdata/sdk";
type NewsTools = "searchNews" | "scrapeArticle" | "searchWeb";
интерфейс NewsToolsConfig {
apiKey: string;
excludeTools?: NewsTools[];
}
export const newsTools = (
config: NewsToolsConfig
): Partial<Record<NewsTools, Tool>> => {
const client = new bdclient({
apiKey: config.apiKey,
autoCreateZones: true,
});
const tools: Partial<Record<NewsTools, Tool>> = {
searchNews: tool({
описание:
"Поиск новостных статей на любую тему с помощью Google News. Возвращает последние новостные статьи с заголовками, фрагментами, источниками и датами публикации. Используйте этот инструмент для поиска текущих новостей по определенным темам."
inputSchema: z.object({
запрос: z
.string()
.describe(
'Запрос на поиск новостей (например, "искусственный интеллект", "политика изменения климата", "заработок на технологиях")'
),
страна: z
.string()
.length(2)
.optional()
.describe(
'Двухбуквенный код страны для локализованных новостей (например, "us", "gb", "de", "fr", "jp")'
),
}),
execute: async ({
query,
страна,
}: {
запрос: строка;
страна?: string;
}) => {
try {
const newsQuery = `${query} news`;
const result = await client.search(newsQuery, {
searchEngine: "google",
dataFormat: "markdown",
format: "raw",
страна: country?toLowerCase() || "us",
});
return result;
} catch (error) {
return `Ошибка при поиске новостей по "${запросу}": ${String(error)}`;
}
},
}),
scrapeArticle: tool({
описание:
"Соскребает полное содержимое новостной статьи с любого URL. Возвращает полный текст статьи в чистом формате markdown, обходя платные стены и защиту от ботов. Используйте это для чтения полных текстов статей после их поиска с помощью SearchNews.",
inputSchema: z.object({
url: z.string().url().describe("URL-адрес новостной статьи для соскоба"),
страна: z
.string()
.length(2)
.optional()
.describe("Двухбуквенный код страны для местоположения прокси"),
}),
execute: async ({ url, country }: { url: string; country?: string }) => {
try {
const result = await client.scrape(url, {
dataFormat: "markdown",
format: "raw",
country: country?.toLowerCase(),
});
return result;
} catch (error) {
return `Ошибка при соскабливании статьи по адресу ${url}: ${String(error)}`;
}
},
}),
searchWeb: tool({
описание:
"Общий поиск в Интернете с помощью Google, Bing или Yandex. Используйте его для изучения истории, проверки фактов или поиска дополнительного контекста, помимо новостных статей."
inputSchema: z.object({
запрос: z
.string()
.describe(
"Поисковый запрос для получения справочной информации или проверки фактов"
),
searchEngine: z
.enum(["google", "bing", "yandex"])
.optional()
.default("google")
.describe("Используемая поисковая система"),
страна: z
.string()
.length(2)
.optional()
.describe("Двухбуквенный код страны для локализации результатов"),
}),
execute: async ({
query,
searchEngine = "google",
страна,
}: {
запрос: строка;
searchEngine?: "google" | "bing" | "yandex";
страна?: string;
}) => {
try {
const result = await client.search(query, {
searchEngine,
dataFormat: "markdown",
format: "raw",
страна: country?.toLowerCase(),
});
return result;
} catch (error) {
return `Ошибка поиска в Интернете по запросу "${запрос}": ${String(error)}`;
}
},
}),
};
for (const toolName in tools) {
if (config.excludeTools?.includes(toolName as NewsTools)) {
удаляем tools[toolName as NewsTools];
}
}
return tools;
};Этот код определяет три важных инструмента, использующих интерфейс инструментов Vercel ИИ SDK. Инструмент searchNews запрашивает последние статьи в Google News. Инструмент scrapeArticle извлекает полный контент из любого URL-адреса новости (в обход платных стен). SearchWeb обеспечивает общий веб-поиск для проверки фактов. Каждый инструмент использует схемы Zod для проверки ввода с сохранением типов и возвращает структурированные данные для анализа ИИ. Клиент Bright Data автоматически справляется со всеми сложностями защиты от ботов и управления прокси.
Шаг 3: Создание маршрута API для чата ИИ
Создайте конечную точку API для работы с разговорным интерфейсом. Создайте app/api/chat/route.ts:
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages, stepCountIs } from "ai";
import { newsTools } from "@/lib/brightdata-tools";
export const maxDuration = 60;
export async function POST(req: Request) {
const { messages } = await req.json();
const modelMessages = convertToModelMessages(messages);
const tools = newsTools({
apiKey: process.env.BRIGHTDATA_API_KEY!
});
const result = streamText({
model: openai("gpt-4o"),
сообщения: modelMessages,
инструменты,
stopWhen: stepCountIs(5),
system: `Вы - NewsIQ, продвинутый помощник ИИ по изучению новостей. Ваша роль - помогать пользователям оставаться в курсе событий, анализировать новостную ленту и разбираться в сложных текущих событиях.
**Основные возможности:**.
1. **Поиск новостей**: Поиск актуальных новостей по любой теме с помощью SearchNews.
2. **Глубокое чтение**: Соскребайте полные тексты статей с помощью scrapeArticle, чтобы получить полный контекст.
3. **Проверка фактов**: Используйте SearchWeb для проверки утверждений и поиска дополнительных источников.
4. **Анализ предвзятости**: Сравните освещение событий в нескольких источниках и определите потенциальную предвзятость.
5. **Анализ тенденций**: Выявление новых сюжетов и отслеживание развития тем.
**Рекомендации:**
- Всегда ссылайтесь на источники с указанием названия и даты публикации.
- Анализируя предвзятость, будьте объективны и приводите доказательства.
- При анализе спорных тем представляйте несколько точек зрения
- Четко разграничивайте факты и анализ
- Если информация устарела, указывайте дату публикации.
- При вырезке статей резюмируйте ключевые моменты перед анализом
- Для проверки фактов используйте несколько независимых источников
**Формат ответа:**
- Начните с четкого, прямого ответа
- Приводите ссылки на источники в контексте
- Используйте маркированные пункты для нескольких источников
- Завершите кратким анализом или размышлением
- Предложите подробнее изучить конкретные аспекты
Помните: ваша цель - помочь пользователям стать более информированными и критически мыслящими людьми,
});
return result.toUIMessageStreamResponse();
}Этот маршрут API создает потоковую конечную точку для соединения ваших инструментов для изучения новостей с GPT-4 от OpenAI. Комплексные системные подсказки помогают ИИ действовать как профессиональному аналитику новостей. При этом особое внимание уделяется цитированию источников, объективности и критическому мышлению. Потоковый ответ показывает пользователям анализ в реальном времени по мере его генерации, создавая оперативный разговор.
Шаг 4: Создание интерфейса чата
Создайте пользовательский интерфейс для взаимодействия с NewsIQ. Замените содержимое файла app/page.tsx на:
``typescript
"use client";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";
export default function NewsResearchAssistant() {
const { messages, sendMessage, status } = useChat();
const [input, setInput] = useState("");
const [exampleQueries] = useState([
"🌍 Каковы последние события в политике изменения климата?",
"💻 Поиск новостей о регулировании искусственного интеллекта",
"📊 Как различные источники освещают экономику?",
"⚡ Какие трендовые новости в сфере технологий выходят на этой неделе?",
"🔍 Проверка фактов: Действительно ли [конкретное утверждение] произошло?",
]);
return (
<div className="flex flex-col h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
{/* Заголовок */}
<header className="bg-white shadow-md border-b border-gray-200">
<div className="max-w-5xl mx-auto px-6 py-5">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-blue-600 to-indigo-600 w-12 h-12 rounded-xl flex items-center justify-center shadow-lg">
<span className="text-2xl">📰</span>
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">NewsIQ</h1>
<p className="text-sm text-gray-600">
Исследование и анализ новостей с помощью ИИ
</p>
</div>
</div>
</div>
</header>
{/* Основная область чата */}
<div className="flex-1 overflow-hidden max-w-5xl w-full mx-auto px-6 py-6">
<div className="h-full flex flex-col bg-white rounded-2xl shadow-xl border border-gray-200">
{/* Контейнер сообщений */}
<div className="flex-1 overflow-y-auto p-6 space-y-6">
{messages.length === 0 ? (
<div className="h-full flex flex flex-col items-center justify-center text-center px-4">
{/* Экран приветствия */}
<div className="bg-gradient-to-br from-blue-500 to-indigo-600 w-20 h-20 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
<span className="text-4xl">📰</span>
</div>
<h2 className="text-3xl font-bold text-gray-900 mb-3">
Добро пожаловать в NewsIQ
</h2>
<p className="text-gray-600 mb-8 max-w-2xl text-lg">
Ваш исследовательский помощник на базе ИИ для анализа новостей,
проверки фактов и информирования. Я могу осуществлять поиск по всем новостным
источниках, анализировать предвзятость и помогать вам разобраться в сложных
истории.
</p>
{/* Feature Pills */}
<div className="flex flex-wrap gap-3 justify-center mb-8">
<div className="px-4 py-2 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
🔍 Исследование из нескольких источников
</div>
<div className="px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
🎯 Обнаружение предвзятости
</div>
<div className="px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-medium">
✓ Проверка фактов
</div>
<div className="px-4 py-2 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">
📊 Анализ тенденций
</div>
</div>
{/* Примеры запросов */}
<div className="w-full max-w-3xl">
<p className="text-sm font-semibold text-gray-700 mb-4">
Попробуйте спросить:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{exampleQueries.map((query, i) => (
<кнопка
key={i}
onClick={() => {
setInput(query);
}}
className="p-4 text-left bg-gradient-to-br from-gray-50 to-gray-100 hover:from-blue-50 hover:to-indigo-50 rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-200 text-sm text-gray-700 hover:text-gray-900 shadow-sm hover:shadow-md"
>
{query}
</button>
))}
</div>
</div>
</div>
) : (
// Отображение сообщений
messages.map((m: any) => (
<div
key={m.id}
className={`flex ${
m.role === "user" ? "justify-end" : "justify-start"
}`}
>
<div
className={`max-w-[85%] rounded-2xl px-5 py-4 ${
m.role === "user"
? "bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-lg"
: "bg-gray-100 text-gray-900 border border-gray-200"
}`}
>
<div className="flex items-center gap-2 mb-2">
<span className="text-lg">
{m.role === "user" ? "👤" : "📰"}
</span>
<span className="text-xs font-semibold opacity-90">
{m.role === "user" ? "Вы" : "NewsIQ"}
</span>
</div>
<div className="prose prose-sm max-w-none prose-headings:font-bold prose-h3:text-lg prose-h3:mt-4 prose-h3:mb-2 prose-p:my-2 prose-ul:my-2 prose-li:my-1 prose-a:text-blue-600 prose-a:underline prose-strong:font-semibold">
<div
className="whitespace-pre-wrap"
dangerouslySetInnerHTML={{
__html:
m.parts
?.map((part: any) => {
if (part.type === "text") {
let html = part.text
// Заголовки
.replace(/### (.*?)$/gm, "<h3>$1</h3>")
// Полужирный
.replace(
/**(.*?)**/g,
"<strong>$1</strong>"
)
// Ссылки
.replace(
/[(.*?)]((.*?))/g,
'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
);
html = html.replace(
/(^- .*$n?)+/gm,
(match: string) => {
const items = match
.split("n")
.filter((line: string) => line.trim())
.map((line: string) =>
line.replace(/^- /, "")
)
.map((item: any) => `<li>${item}</li>`)
.join("");
return `<ul>${items}</ul>`;
}
);
// Абзацы
html = html
.split("nn")
.map((para: string) => {
if (
para.trim() &&
!para.startsWith("<")
) {
return `<p>${para}</p>`;
}
return para;
})
.join("");
return html;
}
return "";
})
.join("") || "",
}}
/>
</div>
</div>
</div>
))
)}
{/* Индикатор загрузки */}
{(status === "submitted" || status === "streaming") && (
<div className="flex justify-start">
<div className="bg-gray-100 rounded-2xl px-5 py-4 border border-gray-200">
<div className="flex items-center gap-3">
<div className="flex space-x-2">
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-100"></div>
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-200"></div>
</div>
<span className="text-sm text-gray-600">
Изучение источников новостей...
</span>
</div>
</div>
</div>
)}
</div>
{/* Область ввода */}
<div className="border-t border-gray-200 p-5 bg-gray-50">
<form
onSubmit={(e) => {
e.preventDefault();
if (input.trim()) {
sendMessage({ text: input });
setInput("");
}
}}
className="flex gap-3"
>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Спросите о любой теме новостей, запросите анализ или проверьте утверждение..."
className="flex-1 px-5 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white shadow-sm text-gray-900 placeholder-gray-600"
disabled={status === "submitted" || status === "streaming"}
/>
<кнопка
type="submit"
disabled={
статус === "отправлено" ||
статус === "поток" ||
!input.trim()
}
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 font-semibold shadow-lg hover:shadow-xl"
>
{status === "submitted" || status === "streaming" ? (
<span className="flex items-center gap-2">
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<путь
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
Анализ
</span>
) : (
"Исследование"
)}
</button>.
</form>
<div className="flex items-center justify-between mt-3">
<p className="text-xs text-gray-500">
На базе Bright Data × Vercel ИИ SDK
</p>
<div className="flex gap-2">
<span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">
✓ В режиме реального времени
</span>
<span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">
🌐 Глобальные источники
</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}Этот интерфейс создает увлекательный разговорный опыт с помощью хука useChat в Vercel ИИ SDK. На экране приветствия представлены примеры запросов, которые помогут вам начать работу. В основной области чата отображаются сообщения с поддержкой потоковой передачи. В дизайне используется Tailwind CSS для придания современного, профессионального вида с градиентными фонами и плавной анимацией. Компонент изящно обрабатывает состояния загрузки и обеспечивает визуальную обратную связь во время обработки ИИ.
Шаг 5: Обновление корневого макета
Завершите настройку приложения, обновив app/layout.tsx с соответствующими метаданными:
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'NewsIQ - ИИ помощник по исследованию новостей',
описание:
'Инструмент для исследования, анализа и проверки фактов в новостях на базе ИИ. Поиск по всем источникам, выявление предвзятости и информирование с помощью интеллектуальных знаний',
keywords: [
'news',
'ИИ',
'исследование',
'проверка фактов',
'выявление предвзятости',
'анализ новостей',
],
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}Эта конфигурация макета устанавливает правильные SEO-метаданные и загружает шрифт Inter для чистой, профессиональной типографики во всем приложении.
Шаг 6: Запуск приложения
Чтобы запустить приложение, воспользуйтесь этой командой:
npm run devПриложение запустится на сайте http://localhost. Чтобы проверить возможности NewsIQ, попробуйте выполнить этот пример запроса:
Проверка фактов: Анонсировала ли Apple новый продукт на прошлой неделе?ИИ автоматически использует соответствующие инструменты на основе вашего запроса. Когда вы запрашиваете новости, он выполняет поиск в Google News. Если вы запрашиваете полные тексты статей, он делает соскоб контента. Для проверки фактов он использует перекрестные ссылки на несколько источников. Вы увидите результаты в режиме реального времени, когда ИИ обрабатывает информацию.
Шаг 7: Развертывание в Vercel
Чтобы развернуть приложение в производство, сначала разместите код на GitHub:
git init
git add .
git commit -m "Initial commit: NewsIQ ИИ News Assistant"
git branch -M main
git remote add origin https://github.com/yourusername/ai-news-assistant.git
git push -u origin mainЗатем разверните систему на Vercel:
- Перейдите на сайт vercel.com и авторизуйтесь на GitHub.
- Нажмите “Добавить новый проект” и импортируйте свой репозиторий
- Настройте переменные окружения:
- Добавьте
BRIGHTDATA_API_KEY - Добавить
OPENAI_API_KEY
- Нажмите “Развернуть”.
Ваше приложение будет запущено через 2-3 минуты по адресу https://ai-news-assistant.vercel.app.
Заключительные мысли
Этот помощник ИИ для изучения новостей показывает, как автоматизация упрощает сбор и анализ новостей. Если вас интересуют альтернативные подходы к интеграции Bright Data с инструментами ИИ, изучите наше руководство по веб-скрейпингу с помощью MCP-сервера. Чтобы еще больше усовершенствовать рабочие процессы мониторинга новостей, обратите внимание на такие продукты Bright Data, как наш API веб-скрапера для доступа к любому источнику новостей, а также другие наборы данных и инструменты автоматизации, созданные для команд, занимающихся агрегацией контента и мониторингом СМИ.
Ознакомьтесь с другими решениями в документации Bright Data.
Создайте бесплатную учетную запись Bright Data, чтобы начать использовать автоматизированные рабочие процессы исследования новостей.
