Ce système recherche des informations dans des sources mondiales, extrait le contenu intégral des articles (sans passer par les paywalls), détecte la partialité de la couverture et génère une analyse intelligente basée sur des événements réels de l’actualité.
Vous apprendrez
- Comment construire des outils de recherche d’actualités en utilisant Bright Data SDK pour le Scraping web.
- Comment tirer parti du SDK Vercel IA pour l’analyse intelligente des actualités et la conversation.
- Comment contourner les paywalls et la protection anti-bot pour accéder à n’importe quelle source d’information
- Comment détecter la partialité en comparant la couverture entre plusieurs points de vente ?
- Comment créer un pipeline automatisé de la découverte d’informations à la vérification des faits.
Commençons !
Conditions préalables
Pour suivre ce tutoriel, vous avez besoin de :
- Des connaissances de base sur React et Next.js
- Node.js 20.18.1+ installé sur votre environnement de développement local
- Un compte Bright Data avec un accès à l’API (niveau gratuit disponible).
- Une clé API OpenAI avec un accès GPT-4
- Familiarité avec TypeScript et JavaScript moderne
- Compréhension de base du travail avec les API et les variables d’environnement.
Les défis de la consommation conventionnelle d’informations
Les méthodes traditionnelles d’accès à l’information et aux actualités présentent plusieurs limites majeures :
- Surcharge d’informations : Vous rencontrez des centaines de titres par jour. Il est donc difficile de déterminer ce qui est important ou ce qui correspond à vos intérêts.
- Préjugés et lacunes dans les perspectives : La plupart des gens s’informent auprès d’un petit nombre de sources. Vous passez à côté de points de vue importants et vous voyez souvent une couverture unilatérale de questions complexes.
- Obstacles liés au paywall : Le journalisme de qualité se trouve souvent derrière des murs payants. Il vous est difficile d’accéder à des articles complets provenant de diverses sources pour effectuer des recherches approfondies.
- Le fardeau de la vérification des faits : Pour vérifier les affirmations, vous devez rechercher des sources multiples, recouper les informations et évaluer la crédibilité des sources. La plupart des gens n’ont pas le temps de le faire.
- Absence de contexte : Les nouvelles de dernière minute manquent souvent de contexte historique ou d’événements connexes. Vous avez du mal à avoir une vue d’ensemble des événements en cours.
NewsIQ relève ces défis. Il combine une analyse alimentée par l’IA avec un scraping web de qualité professionnelle. Le système accède à n’importe quelle source d’information (en contournant la protection anti-bot), analyse la couverture à travers de multiples points de vente et fournit des informations intelligentes avec l’attribution correcte de la source.
Création de l’assistant de recherche d’informations
Nous construirons NewsIQ, un assistant complet de recherche d’informations par l’IA en utilisant Bright Data et Vercel IA SDK. Nous créerons une solution pour traiter les informations provenant de n’importe quelle source et fournir une analyse intelligente par le biais d’une interface conversationnelle.
Étape 1 : Configuration du projet
Tout d’abord, configurez votre environnement de développement Next.js. Créer un nouveau répertoire pour le projet :
npx create-next-app@latest IA-news-assistantLorsque vous y êtes invité, sélectionnez l’option suivante :
Naviguez jusqu’au répertoire de votre projet et installez les paquets nécessaires :
cd IA-news-assistant &&
npm install @brightdata/sdk ai zod @ai-sdk/openaiCes paquets fournissent tout ce dont vous avez besoin : Bright Data SDK pour le Scraping web, Vercel IA SDK pour l’analyse intelligente, Zod pour la validation de schéma à sécurité de type et OpenAI pour la génération de texte LLM.
Ensuite, créez un fichier .env.local pour stocker vos identifiants d’API :
BRIGHTDATA_API_KEY=votre_clé_d'API_brightdata_ici
OPENAI_API_KEY=votre_clé_openai_api_iciVous avez besoin de :
- La clé API de Bright Data : Générée à partir de votre tableau de bord Bright Data
- Clé API OpenAI : Pour la génération de texte LLM
Étape 2 : définition des outils de recherche d’actualités
Créez la fonctionnalité principale de recherche d’actualités en définissant trois outils pour exploiter le Scraping web de Bright Data. Dans le répertoire du projet, créez un nouveau fichier appelé lib/brightdata-tools.ts :
import { tool, type Tool } from "IA" ;
import { z } from "zod" ;
import { bdclient } from "@brightdata/sdk" ;
type NewsTools = "searchNews" | "scrapeArticle" | "searchWeb" ;
interface 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 : outil({
description :
"Recherche d'articles d'actualité sur n'importe quel sujet à l'aide de Google Actualités. Renvoie les articles récents avec les titres, les extraits, les sources et les dates de publication. Cet outil permet de trouver des articles d'actualité sur des sujets spécifiques,
inputSchema : z.object({
query : z
.string()
.describe(
'La requête de recherche d'actualités (par exemple, "intelligence artificielle", "politique en matière de changement climatique", "bénéfices technologiques")'
),
pays : z
.string()
.length(2)
.optional()
.describe(
'Code pays à deux lettres pour les informations localisées (par exemple, "us", "gb", "de", "fr", "jp")'
),
}),
execute : async ({
query,
pays,
} : {
query : chaîne de caractères ;
country? : string ;
}) => {
try {
const newsQuery = `${query} news` ;
const result = await client.search(newsQuery, {
searchEngine : "google",
dataFormat : "markdown",
format : "raw",
country : country ?.toLowerCase() || "us",
}) ;
return result ;
} catch (error) {
return `Erreur dans la recherche de nouvelles sur "${query}" : ${String(error)}` ;
}
},
}),
scrapeArticle : tool({
description :
"Récupère le contenu complet d'un article de presse à partir de n'importe quelle URL. Renvoie le texte complet de l'article dans un format markdown propre, en contournant les paywalls et la protection anti-bot. Utilisez ceci pour lire des articles complets après les avoir trouvés avec searchNews.",
inputSchema : z.object({
url : z.string().url().describe("L'URL de l'article à récupérer"),
country : z
.string()
.length(2)
.optional()
.describe("Code de pays à deux lettres pour l'emplacement du Proxy"),
}),
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 `Erreur de récupération de l'article à ${url} : ${String(error)}` ;
}
},
}),
searchWeb : tool({
description :
"Recherche générale sur le web à l'aide de Google, Bing ou Yandex. À utiliser pour les recherches de fond, la vérification des faits ou la recherche d'un contexte supplémentaire au-delà des articles de presse.",
inputSchema : z.object({
query : z
.string()
.describe(
"La requête de recherche d'informations de fond ou de vérification des faits"
),
searchEngine : z
.enum(["google", "bing", "yandex"])
.optional()
.default("google")
.describe("Moteur de recherche à utiliser"),
pays : z
.string()
.length(2)
.optional()
.describe("Code pays à deux lettres pour les résultats localisés"),
}),
execute : async ({
query,
searchEngine = "google",
pays,
} : {
query : string ;
searchEngine? : "google" | "bing" | "yandex" ;
country? : string ;
}) => {
try {
const result = await client.search(query, {
searchEngine,
dataFormat : "markdown",
format : "raw",
country : country ?.toLowerCase(),
}) ;
return result ;
} catch (error) {
return `Erreur de recherche sur le web pour "${query}" : ${String(error)}` ;
}
},
}),
} ;
for (const toolName in tools) {
if (config.excludeTools ?.includes(toolName as NewsTools)) {
supprimer les outils [nom d'outil comme NewsTools] ;
}
}
return tools ;
} ;Ce code définit trois outils essentiels à l’aide de l’interface d’outils du SDK Vercel IA. L’outil searchNews interroge Google News à la recherche d’articles récents. L’outil scrapeArticle extrait le contenu intégral de n’importe quelle URL d’actualités (en contournant les paywalls). L’outil searchWeb permet une recherche générale sur le web pour la vérification des faits. Chaque outil utilise des schémas Zod pour une validation des entrées sécurisée et renvoie des données structurées pour que l’IA puisse les analyser. Le client Bright Data gère automatiquement toute la complexité de la protection anti-bot et de la gestion des proxys.
Étape 3 : création de la route API de chat de l’IA
Créez le point de terminaison de l’API pour alimenter l’interface conversationnelle. Créez app/api/chat/route.ts:
import { openai } from "@ai-sdk/openai" ;
import { streamText, convertToModelMessages, stepCountIs } from "IA" ;
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"),
messages : modelMessages,
outils,
stopWhen : stepCountIs(5),
system : `Vous êtes NewsIQ, un assistant de recherche d'informations avancé de l'IA. Votre rôle est d'aider les utilisateurs à rester informés, à analyser la couverture médiatique et à comprendre les événements complexes de l'actualité.
**Capacités de base :**
1. **Découverte d'actualités** : Recherche d'actualités sur n'importe quel sujet à l'aide de searchNews
2. **Lecture approfondie** : Récupérer des articles complets avec scrapeArticle pour fournir un contexte complet.
3. **Vérification des faits** : Utiliser searchWeb pour vérifier les affirmations et trouver des sources supplémentaires.
4. **Analyse des préjugés** : Comparez la couverture de plusieurs sources et identifiez les biais potentiels.
5. **Analyse des tendances** : Identifier les sujets émergents et suivre l'évolution des thèmes
**Lignes directrices
- Citez toujours vos sources en indiquant le nom de la publication et la date
- Lorsque vous analysez la partialité, soyez objectif et fournissez des preuves.
- Pour les sujets controversés, présentez plusieurs points de vue
- Faites une distinction claire entre les faits et l'analyse
- Si les informations sont obsolètes, indiquez la date de publication.
- Lorsque vous récupérez des articles, résumez les points clés avant de les analyser.
- Pour la vérification des faits, utiliser plusieurs sources indépendantes.
**Format de la réponse
- Commencez par une réponse claire et directe
- Fournir des citations de sources dans le contexte
- Utiliser des puces pour les sources multiples
- Terminer par une brève analyse ou un aperçu
- Proposer d'approfondir des aspects spécifiques
N'oubliez pas que votre objectif est d'aider les utilisateurs à devenir mieux informés et à développer leur esprit critique,
}) ;
return result.toUIMessageStreamResponse() ;
}Cette route API crée un point d’extrémité de streaming pour connecter vos outils de recherche d’actualités avec le GPT-4 d’OpenAI. L’invite complète du système guide l’IA pour qu’elle agisse comme un analyste professionnel de l’actualité. Il met l’accent sur la citation des sources, l’objectivité et l’esprit critique. La réponse en continu montre aux utilisateurs l’analyse en temps réel au fur et à mesure qu’elle est générée, créant ainsi une expérience conversationnelle réactive.
Étape 4 : Création de l’interface de dialogue en ligne
Créez l’interface utilisateur pour interagir avec NewsIQ. Remplacez le contenu de app/page.tsx par :
```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([
"🌍 Quels sont les derniers développements en matière de politique de lutte contre le changement climatique ?",
"💻 Recherche d'actualités sur la réglementation en matière d'intelligence artificielle",
"📊 Comment les différentes sources couvrent-elles l'économie ?",
"⚡ Quelles sont les tendances technologiques de la semaine ?",
"🔍 Vérification des faits : Est-ce que [affirmation spécifique] s'est réellement produit ?",
]) ;
return (
<div className="flex flex-col h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
{/* En-tête */}
<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">
Recherche et analyse de l'actualité alimentées par l'IA.
</p>
</div>
</div>
</div>
</header>
{/* Zone de discussion principale */}
<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">
{/* Conteneur de messages */}
<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">
{/* Écran de bienvenue */}
<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">
Bienvenue à NewsIQ
</h2>
<p className="text-gray-600 mb-8 max-w-2xl text-lg">
Votre assistant de recherche alimenté par l'IA pour l'analyse de l'actualité,
la vérification des faits et l'information. Je peux effectuer des recherches dans les sources d'information, analyser la partialité et vous aider à vous informer.
sources d'information, analyser les partis pris et vous aider à
complexes.
</p>
{/* Pilules de la fonctionnalité */}
<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">
🔍 Recherche multi-sources
</div>
<div className="px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
🎯 Détection des biais
</div>
<div className="px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-medium">
Vérification des faits
</div>
<div className="px-4 py-2 bg-orange-100 text-orange-700 rounded-full text-sm font-medium">
📊 Analyse des tendances
</div>
</div>
{/* Exemples de requêtes */}
<div className="w-full max-w-3xl">
<p className="text-sm font-semibold text-gray-700 mb-4">
Essayez de demander :
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{exampleQueries.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"
>
{query}
</button>
))}
</div>
</div>
</div>
) : (
// Affichage des messages
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" ? "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"
dangerouslySetInnerHTML={{
__html :
m.parts
?.map((part : any) => {
if (part.type === "text") {
let html = part.text
// En-têtes
.replace(/### (.* ?)$/gm, "<h3>$1</h3>")
// Gras
.replace(
/**(.* ?)**/g,
"<strong>$1</strong>"
)
// Liens
.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>` ;
}
) ;
// Paragraphes
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>
))
)}
{/* Indicateur de chargement */}
{(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">
Recherche de sources d'information...
</span>
</div>
</div>
</div>
)}
</div>
{/* Zone de saisie */}
<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="Posez des questions sur n'importe quel sujet d'actualité, demandez une analyse ou vérifiez les faits..."
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"}
/>
<button
type="submit"
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">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<chemin
className="opacité-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>
Analyse
</span>
) : (
"Recherche"
)}
</button>
</form>
<div className="flex items-center justify-between mt-3">
<p className="text-xs text-gray-500">
Réalisé par 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">
Temps réel
</span>
<span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">
🌐 Sources globales
</span>
</div>
</div>
</div>
</div>
</div>
</div>
) ;
}Cette interface crée une expérience conversationnelle engageante avec le hook useChat du SDK Vercel IA. L’écran d’accueil présente des exemples de requêtes pour vous aider à démarrer. La zone de discussion principale affiche les messages avec prise en charge de la diffusion en continu. La conception utilise Tailwind CSS pour une apparence moderne et professionnelle avec des arrière-plans dégradés et des animations fluides. Le composant gère les états de chargement avec élégance et fournit un retour d’information visuel pendant le traitement de l’IA.
Étape 5 : Mise à jour de la disposition de la racine
Complétez la configuration de l’application en mettant à jour app/layout.tsx avec les métadonnées appropriées :
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 - IA News Research Assistant',
description :
'Outil de recherche, d'analyse et de vérification des faits alimenté par l'IA. Recherchez parmi les sources, détectez les biais et restez informé grâce à des informations intelligentes,
mots-clés : [
'news',
'IA',
'research',
'fact-checking',
détection de la partialité",
analyse de l'actualité",
],
}
export default function RootLayout({
children,
} : {
children : React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{enfants}</body>
</html>
)
}Cette configuration met en place les métadonnées SEO appropriées et charge la police Inter pour une typographie propre et professionnelle dans l’ensemble de l’application.
Étape 6 : Exécution de l’application
Pour exécuter l’application, utilisez cette commande :
npm run devL’application démarrera sur http://localhost. Pour tester les capacités de NewsIQ, essayez cet exemple de requête :
Vérification des faits : Apple a-t-il annoncé un nouveau produit la semaine dernière ?L’IA utilisera automatiquement les outils appropriés en fonction de votre requête. Lorsque vous demandez des informations, elle consulte Google News. Lorsque vous demandez des articles complets, elle récupère le contenu. Pour la vérification des faits, elle recoupe plusieurs sources. Vous verrez les résultats défiler en temps réel au fur et à mesure que l’IA traite les informations.
Étape 7 : Déploiement sur Vercel
Pour déployer votre application en production, commencez par pousser votre code sur GitHub :
git init
git add .
git commit -m "Initial commit : NewsIQ IA News Assistant"
git branch -M main
git remote add origin https://github.com/yourusername/ai-news-assistant.git
git push -u origin mainDéployez ensuite sur Vercel :
- Allez sur vercel.com et connectez-vous avec GitHub
- Cliquez sur “Add New Project” et importez votre dépôt
- Configurez les variables d’environnement :
- Ajouter
BRIGHTDATA_API_KEY - Ajouter
OPENAI_API_KEY
- Cliquez sur “Déployer”
Votre application sera en ligne en 2 à 3 minutes sur une URL comme https://ai-news-assistant.vercel.app.
Réflexions finales
Cet assistant de recherche de nouvelles IA montre comment l’automatisation rationalise la collecte et l’analyse des nouvelles. Si vous êtes intéressé par des approches alternatives pour intégrer Bright Data avec des outils IA, explorez notre guide sur le scraping web avec un serveur MCP. Pour améliorer encore vos flux de travail de surveillance des actualités, pensez aux produits Bright Data comme notre API Web Scraper pour accéder à n’importe quelle source d’actualités, ainsi qu’à d’autres jeux de données et outils d’automatisation conçus pour les équipes d’agrégation de contenu et de surveillance des médias.
Découvrez d’autres solutions dans la documentation Bright Data.
Créez un compte Bright Data gratuit pour commencer à utiliser vos flux de recherche d’actualités automatisés.
