Este sistema busca noticias en fuentes de todo el mundo, extrae el contenido completo de los artículos (saltándose los muros de pago), detecta la parcialidad en la cobertura y genera análisis inteligentes basados en hechos noticiosos reales.
Aprenderá:
- Cómo construir herramientas de investigación de noticias utilizando Bright Data SDK para Scraping web.
- Cómo aprovechar Vercel IA SDK para el análisis inteligente de noticias y conversación
- Cómo saltarse los cortafuegos de pago y la protección anti-bot para acceder a cualquier fuente de noticias
- Cómo detectar la parcialidad comparando la cobertura en múltiples medios de comunicación
- Cómo crear un proceso automatizado desde el descubrimiento de noticias hasta la comprobación de hechos.
Empecemos
Requisitos previos
Para seguir este tutorial, necesitas
- Conocimientos básicos de React y Next.js
- Node.js 20.18.1+ instalado en su entorno de desarrollo local
- Una cuenta de Bright Data con acceso a la API (nivel gratuito disponible)
- Una clave API OpenAI con acceso GPT-4
- Familiaridad con TypeScript y JavaScript moderno
- Conocimientos básicos de trabajo con API y variables de entorno
Desafíos en el consumo convencional de noticias
Las formas tradicionales de acceder a la información y a las noticias tienen varias limitaciones clave:
- Sobrecarga de información: Cada día aparecen cientos de titulares. Esto hace que sea difícil averiguar qué es lo que importa o se relaciona con sus intereses.
- Sesgo y falta de perspectiva: La mayoría de la gente obtiene las noticias de un número reducido de fuentes. Te pierdes puntos de vista importantes y a menudo ves una cobertura unilateral de temas complejos.
- Barreras de pago: El periodismo de calidad suele estar detrás de muros de pago. Le resulta difícil acceder a artículos completos de diversas fuentes para investigar a fondo.
- Carga de la comprobación de hechos: Para verificar las afirmaciones, hay que buscar en varias fuentes, contrastar la información y evaluar la credibilidad de las fuentes. La mayoría de la gente no tiene tiempo para esto.
- Falta de contexto: Las noticias de última hora suelen carecer de contexto histórico o de acontecimientos relacionados. Es difícil tener una visión completa del desarrollo de las noticias.
NewsIQ aborda estos retos. Combina el análisis basado en IA con el Scraping web de nivel empresarial. El sistema accede a cualquier fuente de noticias (eludiendo la protección anti-bot), analiza la cobertura en múltiples medios y proporciona una visión inteligente con la atribución adecuada de la fuente.
Creación del asistente de investigación de noticias
Construiremos NewsIQ, un completo asistente de investigación de noticias con IA que utilizará Bright Data y Vercel IA SDK. Crearemos una solución para procesar noticias de cualquier fuente y proporcionar un análisis inteligente a través de una interfaz conversacional.
Paso 1: Configuración del proyecto
En primer lugar, configura tu entorno de desarrollo Next.js. Crea un nuevo directorio para el proyecto:
npx create-next-app@latest ai-news-assistantCuando se te solicite, selecciona la siguiente opción:
Navega hasta el directorio de tu proyecto e instala los paquetes necesarios:
cd ai-news-assistant &&
npm install @brightdata/sdk ai zod @ai-sdk/openaiEstos paquetes proporcionan todo lo que necesita: Bright Data SDK para el Scraping web, Vercel IA SDK para el análisis inteligente, Zod para la validación de esquemas a prueba de tipos y OpenIA para la generación de texto LLM.
A continuación, cree un archivo .env.local para almacenar sus credenciales de API:
BRIGHTDATA_API_KEY=su_clave_api_de_brightdata_aquí
OPENAI_API_KEY=tu_clave_api_openai_aquíNecesita
- Token de API de Bright Data: Generado desde su panel de Bright Data
- Clave de API de OpenAI: Para la generación de texto LLM
Paso 2: Definir las herramientas de investigación de noticias
Cree la funcionalidad principal de investigación de noticias definiendo tres herramientas para aprovechar el Scraping web de Bright Data. En el directorio del proyecto, cree un nuevo archivo llamado lib/brightdata-tools.ts:
import { tool, type Tool } de "ai";
import { z } de "zod";
import { bdclient } de "@brightdata/sdk";
type NewsTools = "searchNews" | "scrapeArticle" | "searchWeb";
interfaz NewsToolsConfig {
apiKey: cadena;
¿excludeTools?: NewsTools[];
}
export const newsTools = (
config: NewsToolsConfig
): Partial<Record<NewsTools, Tool>> => {
const client = new bdclient({
apiKey: config.apiKey,
autoCreateZones: true,
});
const herramientas: Partial<Record<NewsTools, Tool>> = {
searchNews: tool({
descripción:
"Busca artículos de noticias sobre cualquier tema mediante Google Noticias. Devuelve artículos de noticias recientes con títulos, fragmentos, fuentes y fechas de publicación. Utilízala para buscar noticias actuales sobre temas específicos",
inputSchema: z.object({
consulta: z
.string()
.describe(
'La consulta de búsqueda de noticias (por ejemplo, "inteligencia artificial", "política de cambio climático", "ganancias tecnológicas")'
),
país: z
.string()
.length(2)
.opcional()
.describe(
'Código de país de dos letras para noticias localizadas (por ejemplo, "us", "gb", "de", "fr", "jp")'
),
}),
ejecutar: async ({
consulta,
país,
}: {
consulta: cadena;
¿país?: cadena;
}) => {
try {
const noticiasQuery = `${consulta} noticias`;
const result = await client.search(newsQuery, {
searchEngine: "google
dataFormat: "markdown",
formato: "raw",
country: country?.toLowerCase() || "us",
});
devolver resultado;
} catch (error) {
return `Error al buscar noticias en "${query}": ${String(error)}`;
}
},
}),
scrapeArticle: tool({
descripción:
"Extrae el contenido completo de un artículo de noticias desde cualquier URL. Devuelve el texto completo del artículo en formato markdown limpio, saltándose los paywalls y la protección anti-bot. Utilícelo para leer artículos completos después de encontrarlos con searchNews",
inputSchema: z.object({
url: z.string().url().describe("La URL del artículo de noticias a scrapear"),
país: z
.string()
.length(2)
.opcional()
.describe("Código de país de dos letras para la ubicación del Proxy"),
}),
execute: async ({ url, country }: { url: string; country?: string }) => {
try {
const result = await client.scrape(url, {
dataFormat: "markdown",
formato: "raw",
country: country?.toLowerCase(),
});
devolver resultado;
} catch (error) {
return `Error scraping article at ${url}: ${String(error)}`;
}
},
}),
searchWeb: tool({
descripción:
"Búsqueda web general utilizando Google, Bing o Yandex. Utilízala para investigar antecedentes, comprobar hechos o encontrar contexto adicional más allá de los artículos de noticias",
inputSchema: z.object({
consulta: z
.cadena()
.describe(
"La consulta de búsqueda para información de fondo o comprobación de hechos"
),
motor de búsqueda: z
.enum(["google", "bing", "yandex"])
.optional()
.default("google")
.describe("Motor de búsqueda a utilizar"),
país: z
.string()
.length(2)
.opcional()
.describe("Código de país de dos letras para resultados localizados"),
}),
ejecutar: async ({
consulta,
searchEngine = "google",
país,
}: {
consulta: cadena;
searchEngine?: "google" | "bing" | "yandex";
¿país?: cadena;
}) => {
try {
const result = await client.search(query, {
searchEngine,
dataFormat: "markdown",
formato: "raw",
country: country?.toLowerCase(),
});
devolver resultado;
} catch (error) {
return `Error al buscar en la web "${query}": ${String(error)}`;
}
},
}),
};
for (const toolName in tools) {
if (config.excludeTools?.includes(toolName as NewsTools)) {
elimina tools[toolName como NewsTools];
}
}
return herramientas;
};Este código define tres herramientas esenciales que utilizan la interfaz de herramientas del SDK de IA de Vercel. La herramienta searchNews consulta Google News en busca de artículos recientes. La herramienta scrapeArticle extrae el contenido completo de cualquier URL de noticias (evitando los muros de pago). La herramienta searchWeb realiza búsquedas generales en la web para comprobar los hechos. Todas las herramientas utilizan esquemas Zod para la validación de entradas seguras y devuelven Datos para IA estructurados para su análisis. El cliente de Bright Data gestiona automáticamente toda la complejidad de la protección anti-bot y la gestión de Proxy.
Paso 3: Crear la ruta API de chat de IA
Cree el punto final de la API para alimentar la interfaz conversacional. Cree app/api/chat/route.ts:
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages, stepCountIs } from "ai";
import { newsTools } de "@/lib/brightdata-tools";
export const maxDuration = 60;
export async function POST(req: Request) {
const { messages } = await req.json();
const modelMessages = convertToModelMessages(mensajes);
const tools = newsTools({
apiKey: process.env.BRIGHTDATA_API_KEY!,
});
const result = streamText({
modelo: openai("gpt-4o"),
mensajes: modelMessages,
herramientas,
stopWhen: stepCountIs(5),
system: `Tú eres NewsIQ, un asistente avanzado de IA para la búsqueda de noticias. Tu función es ayudar a los usuarios a mantenerse informados, analizar la cobertura de las noticias y comprender la compleja actualidad.
**Capacidades principales
1. **Descubrimiento de noticias**: Buscar noticias de actualidad sobre cualquier tema utilizando searchNews.
2. **Lectura en profundidad**: Extraiga artículos completos con scrapeArticle para proporcionar un contexto completo.
3. **Comprobación de hechos**: Utilizar searchWeb para verificar afirmaciones y encontrar fuentes adicionales
4. **Análisis de sesgos**: Comparar la cobertura de varias fuentes e identificar posibles sesgos.
5. **Análisis de tendencias**: Identificar historias emergentes y seguir la evolución de los temas.
**Directrices
- Cite siempre sus fuentes con el nombre y la fecha de la publicación.
- Al analizar los prejuicios, sea objetivo y aporte pruebas.
- Para temas controvertidos, presente múltiples perspectivas
- Distinga claramente entre hechos y análisis
- Si la información no está actualizada, anote la fecha de publicación.
- Cuando extraiga artículos, resuma los puntos clave antes de analizarlos.
- Para comprobar los hechos, utilice varias fuentes independientes.
**Formato de la respuesta
- Empiece con una respuesta clara y directa
- Citar las fuentes en su contexto
- Utilizar viñetas para varias fuentes
- Termine con un breve análisis o reflexión
- Ofrezca profundizar en aspectos concretos
Recuerde: su objetivo es ayudar a los usuarios a convertirse en pensadores críticos mejor informados,
});
return result.toUIMessageStreamResponse();
}Esta ruta API crea un punto final de transmisión para conectar sus herramientas de investigación de noticias con la GPT-4 de OpenAI. El completo sistema de instrucciones guía a la IA para que actúe como un analista de noticias profesional. Hace hincapié en la cita de fuentes, la objetividad y el pensamiento crítico. La respuesta en streaming muestra a los usuarios el análisis en tiempo real a medida que se genera, creando una experiencia conversacional receptiva.
Paso 4: Crear la interfaz de chat
Crea la interfaz de usuario para interactuar con NewsIQ. Sustituye el contenido de app/page.tsx por:
```typescript
"use client";
import { useChat } from "@ai-sdk/react";
import { useState } de "react";
export default function NewsResearchAssistant() {
const { mensajes, enviarMensaje, estado } = useChat();
const [input, setInput] = useState("");
const [exampleQueries] = useState([
"🌍 ¿Cuáles son las últimas novedades en política de cambio climático?",
"💻 Buscar noticias sobre la regulación de la inteligencia artificial",
"📊 ¿Cómo cubren la economía las distintas fuentes?",
"¿Cuáles son las tendencias tecnológicas de la semana?",
"🔍 Comprobación de hechos: ¿Sucedió realmente [afirmación específica]?",
]);
return (
<div className="flex flex-col h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
{/* Encabezado */}
<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">NoticiasIQ</h1>
<p className="text-sm text-gray-600">
Investigación y análisis de noticias impulsados por IA
</p>
</div>
</div> <div>
</div> <div>
</header>
{/* Área principal del chat */}
<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">
{/* Contenedor de mensajes */}
<div className="flex-1 overflow-y-auto p-6 space-y-6">
{messages.length === 0 ? (
<div className="h-full flex flex-col items-center justify-center text-center px-4">
{/* Pantalla de bienvenida */}
<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">
Bienvenido a NewsIQ
</h2>
<p className="text-gray-600 mb-8 max-w-2xl text-lg">
Tu asistente de investigación impulsado por IA para el análisis de noticias,
comprobación de hechos, y mantenerse informado. Puedo buscar en
fuentes de noticias, analizar sesgos y ayudarte a entender
complejas.
</p>
{/* Píldoras de características */}
<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">
🔍 Investigación multifuente
</div>
<div className="px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
🎯 Detección de sesgos
</div>
<div className="px-4 py-2 bg-verde-100 text-verde-700 rounded-full text-sm font-medium">
✓ Comprobación de hechos
</div>
<div className="px-4 py-2 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">
📊 Análisis de tendencias
</div> <div>
</div>
{/* Ejemplo de consultas */}
<div className="w-full max-w-3xl">
<p className="text-sm font-semibold text-gray-700 mb-4">
Prueba a preguntar:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{ejemploQueries.map((query, i) => (
<button
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"
>
{consulta}
</button>
))}
</div>
</div>
</div>
) : (
// Visualización de mensajes
messages.map((m: any) => (
<div
key={m.id}
className={`flex ${
m.role === "user" ? "justify-end" : "justify-start"
}`}
>
<div
className={`max-w-[85%] redondeado-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 === "usuario" ? "You" : "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"
peligrosamenteSetInnerHTML={{
__html:
m.partes
?.map((part: any) => {
if (part.type === "text") {
let html = part.text
// Encabezados
.replace(/### (.*?)$/gm, "<h3>$1</h3>")
// Negrita
.replace(
/**(.*?)**/g,
"<strong>$1</strong>"
)
// Enlaces
.replace(
/[(.*?)]((.*?))/g,
'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
);
html = html.replace(
/(^- .*$n?)+/gm,
(match: cadena) => {
const items = coincidencia
.split("n")
.filter((línea: cadena) => línea.recortar())
.map((línea: cadena) =>
line.replace(/^- /, "")
)
.map((item: any) => `<li>${item}</li>`)
.join("");
return `<ul>${items}</ul>`;
}
);
// Párrafos
html = html
.split("nn")
.map((para: cadena) => {
if (
para.trim() &&
!para.startsWith("<")
) {
return `<p>${para}</p>`;
}
return para;
})
.join("");
return html;
}
return "";
})
.join("") || "",
}}
/>
</div>
</div>
</div>
))
)}
{/* Indicador de carga */}
{(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 espacio-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">
Investigando fuentes de noticias...
</span>
</div>
</div>
</div>
)}
</div>
{/* Área de entrada */}
<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="Pregunta sobre cualquier tema de actualidad, solicita un análisis o comprueba una afirmación..."
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"}
/>
<botón
type="enviar"
disabled={
status === "submitted" ||
status === "streaming" ||
!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">
<círculo
className="opacidad-25"
cx="12"
cy="12"
r="10"
stroke="coloractual"
ancho trazo="4"
fill="ninguno"
/>
<ruta
className="opacidad-75"
fill="coloractual"
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>
Análisis de
</span>
) : (
"Investigación"
)}
</button>
</form>
<div className="flex items-center justify-between mt-3">
<p className="text-xs text-gray-500">
Desarrollado por Bright Data × Vercel IA SDK
</p>
<div className="flex gap-2">
<span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">
✓ En tiempo real
</span>
<span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">
🌐 Fuentes globales
</span>
</div>
</div>
</div> <div>
</div> <div>
</div>
</div>
);
}Esta interfaz crea una experiencia conversacional atractiva con el hook useChat del SDK de IA de Vercel. La pantalla de bienvenida presenta consultas de ejemplo para ayudarle a empezar. El área de chat principal muestra mensajes con soporte de streaming. El diseño utiliza CSS Tailwind para conseguir un aspecto moderno y profesional con fondos degradados y animaciones suaves. El componente maneja los estados de carga con elegancia y proporciona información visual durante el procesamiento de IA.
Paso 5: Actualizar el diseño raíz
Complete la configuración de la aplicación actualizando app/layout.tsx con los metadatos adecuados:
import type { Metadata } from 'next
import { Inter } from 'next/font/google'
importar './globals.css'
const inter = Inter({ subconjuntos: ['latin'] })
export const metadata: Metadatos = {
title: 'NewsIQ - Asistente de investigación de noticias de IA',
description:
'Herramienta de investigación de noticias, análisis y comprobación de hechos impulsada por IA. Busque entre fuentes, detecte prejuicios y manténgase informado con información inteligente',
palabras clave: [
noticias
IA
"investigación",
"comprobación de hechos",
"detección de prejuicios",
análisis de noticias
],
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="es">
<body className={inter.className}>{children}</body>
</html>
)
}Esta configuración de diseño establece los metadatos SEO adecuados y carga la fuente Inter para una tipografía limpia y profesional en toda la aplicación.
Paso 6: Ejecutar la aplicación
Para ejecutar la aplicación, utilice este comando:
npm run devLa aplicación se iniciará en http://localhost. Para probar las capacidades de NewsIQ, prueba este ejemplo de consulta:
Comprobación de hechos: ¿Apple anunció un nuevo producto la semana pasada?La IA utilizará automáticamente las herramientas adecuadas en función de tu consulta. Cuando pides noticias, busca en Google News. Cuando pides artículos completos, rastrea el contenido. Para comprobar los hechos, cruza referencias de múltiples fuentes. Verás los resultados en tiempo real a medida que la IA procesa la información.
Paso 7: Despliegue en Vercel
Para desplegar tu aplicación en producción, primero envía tu código a GitHub:
git init
git add .
git commit -m "Confirmación inicial: Asistente de noticias IA de NewsIQ".
git branch -M main
git remote add origen https://github.com/yourusername/ai-news-assistant.git
git push -u origen mainA continuación, despliega en Vercel:
- Ve a vercel.com e inicia sesión con GitHub
- Haz clic en “Añadir nuevo proyecto” e importa tu repositorio
- Configura las variables de entorno:
- Añade
BRIGHTDATA_API_KEY - Añade
OPENAI_API_KEY
- Haz clic en “Desplegar”.
Tu aplicación estará lista en 2-3 minutos en una URL como https://ai-news-assistant.vercel.app.
Reflexiones finales
Este asistente de investigación de noticias con IA muestra cómo la automatización agiliza la recopilación y el análisis de noticias. Si está interesado en enfoques alternativos para integrar Bright Data con herramientas de IA, explore nuestra guía sobre Scraping web con un servidor MCP. Para mejorar aún más sus flujos de trabajo de supervisión de noticias, tenga en cuenta productos de Bright Data como nuestra API de Raspador web para acceder a cualquier fuente de noticias, así como otros Conjuntos de datos y herramientas de automatización creados para la agregación de contenidos y los equipos de supervisión de medios.
Explore más soluciones en la documentación de Bright Data.
Cree una cuenta gratuita de Bright Data para empezar a utilizar sus flujos de trabajo automatizados de investigación de noticias.
