Comment intégrer Claude dans votre site web en 1 jour

Le défi : un assistant IA en production avant ce soir

Voici la promesse : à 9h vous n'avez rien, à 17h vous avez un assistant IA Claude 4.7 fonctionnel sur votre site, capable de répondre aux questions de vos visiteurs avec votre ton de marque, vos infos produits et vos URLs internes. Pas de bullshit, pas de "il faut 6 mois pour bien faire". Juste un plan exécutable.

On a livré ce setup chez 14 clients en 2025 et 2026. Voici le plan minute par minute, le code à copier, et les pièges qui font perdre 3 semaines aux équipes qui improvisent.

Pré-requis (à valider en amont)

• Un compte Anthropic avec API key (5 minutes sur console.anthropic.com)
• Un projet front-end (Next.js, Astro, Vue, Nuxt, peu importe)
• Un backend ou des serverless functions (Vercel, Cloudflare Workers, AWS Lambda)
• Une page "À propos", des fiches produits, et idéalement un FAQ déjà existants

Budget temps : 8h par un dev fullstack senior. Budget API : moins de 5€ pour la phase de test.

Le planning des 8 heures

| Heure | Tâche | Livrable | |-------|-------|----------| | 9h-10h | Setup API + system prompt | Endpoint qui répond | | 10h-12h | Intégration UI front (composant chat) | Bulle visible sur le site | | 13h-14h | Streaming + gestion erreurs | UX fluide | | 14h-15h | Knowledge base (RAG light) | Réponses précises | | 15h-16h | Garde-fous + monitoring | Logs + alertes | | 16h-17h | Tests + recette + déploiement | En production |

Étape 1 : le système prompt qui change tout

Le system prompt, c'est 80% de la qualité de votre agent. Ne le négligez pas.

SYSTEM_PROMPT = """Tu es Léna, l'assistante de [Nom Entreprise], spécialiste [domaine].

TON ET STYLE :
- Tutoiement amical mais pro, jamais familier
- Réponses courtes (max 3 paragraphes), avec des bullets si liste
- Si tu ne sais pas, tu le dis et tu proposes de contacter l'équipe

CE QUE TU PEUX FAIRE :
- Répondre aux questions sur nos produits et services
- Orienter vers la bonne page du site (utilise les URLs ci-dessous)
- Qualifier un prospect (poser 2-3 questions max)
- Booker un RDV via le lien rdv.lenobot.com

CE QUE TU NE FAIS JAMAIS :
- Donner un prix exact (tu renvoies vers le devis)
- Promettre un délai de livraison sans vérifier
- Répondre sur des sujets hors périmètre [domaine]

URLS UTILES :
- Tarifs : /tarifs
- Cas clients : /realisations
- Contact : /contact
- Blog : /blog
"""

Étape 2 : l'endpoint backend (Next.js App Router)

// app/api/chat/route.ts
import Anthropic from '@anthropic-ai/sdk';

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY!,
});

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = await client.messages.stream({
    model: 'claude-opus-4-7',
    max_tokens: 1024,
    system: [
      {
        type: 'text',
        text: SYSTEM_PROMPT,
        cache_control: { type: 'ephemeral' }
      }
    ],
    messages,
  });

  return new Response(stream.toReadableStream());
}

Astuce critique : le cache_control: { type: 'ephemeral' } active le prompt caching et divise vos coûts par 4 dès la 2e requête.

Étape 3 : le composant front (React)

'use client';
import { useState } from 'react';

export function ChatBubble() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  async function send() {
    const newMessages = [...messages, { role: 'user', content: input }];
    setMessages(newMessages);
    setInput('');
    setLoading(true);

    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ messages: newMessages }),
    });
    
    const reader = res.body!.getReader();
    let assistantMsg = '';
    setMessages([...newMessages, { role: 'assistant', content: '' }]);

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      assistantMsg += new TextDecoder().decode(value);
      setMessages([
        ...newMessages,
        { role: 'assistant', content: assistantMsg }
      ]);
    }
    setLoading(false);
  }

  return (/* JSX bulle de chat */);
}

Étape 4 : la knowledge base light (sans vector DB)

Pour un MVP, pas besoin de Pinecone ou Weaviate. Concaténez vos contenus clés (FAQ, produits, à propos) dans un fichier JSON et injectez-le dans le system prompt avec prompt caching.

import knowledgeBase from './kb.json';

const CACHED_CONTEXT = `BASE DE CONNAISSANCES :
${JSON.stringify(knowledgeBase, null, 2)}`;

// Dans system: 2 blocs cache pour optimiser
system: [
  { type: 'text', text: SYSTEM_PROMPT, cache_control: { type: 'ephemeral' }},
  { type: 'text', text: CACHED_CONTEXT, cache_control: { type: 'ephemeral' }}
]

Cela fonctionne jusqu'à environ 50K tokens de contexte, soit 30 pages A4. Au-delà, passez à un vrai RAG.

💡 Vous voulez intégrer un agent IA dans votre business ? On en discute 15 minutes : rdv.lenobot.com.

Étape 5 : les garde-fous indispensables

Ne mettez jamais en prod sans :

• Rate limiting : 10 messages/min/IP via Upstash Redis ou Cloudflare
• Validation input : longueur max 2000 caractères, filtrage caractères spéciaux
• Logs : chaque conversation envoyée à PostHog ou Logtail
• Budget API alert : alerte Anthropic à 50€/jour
• Fallback humain : bouton "parler à un humain" toujours visible

Les 4 pièges qui font perdre une journée

1. Oublier le streaming : sans streaming, l'utilisateur attend 8 secondes devant un écran figé. Avec streaming, il voit la réponse arriver en temps réel.
2. System prompt trop court : moins de 300 mots, votre agent répondra n'importe quoi. Visez 800 à 1500 mots.
3. Pas de gestion d'erreur : un timeout API et votre site casse. Toujours wrapper avec try/catch et message d'erreur user-friendly.
4. Mettre la clé API en front : NE JAMAIS exposer ANTHROPIC_API_KEY côté client. Toujours via un endpoint backend.

Coût réel d'exploitation

Pour 5000 conversations/mois (moyenne 6 messages par conv) sur Claude 4.7 Opus avec prompt caching :

• Tokens input : ~75M (cachés à 90% après warm-up)
• Tokens output : ~10M
• Total mensuel : environ 180€

Pour la même volumétrie avec Claude Haiku 4.5 (souvent suffisant pour de la FAQ) : environ 35€/mois.

Et ensuite ?

Une fois en prod, les vraies optimisations arrivent :

• Ajouter le function calling pour interroger vos APIs (commandes, stock, RDV)
• Brancher un vrai RAG si votre KB dépasse 100 pages
• A/B tester des variantes de system prompt
• Mettre en place des évaluations automatisées (LangSmith, Braintrust)

Prêt à lancer votre assistant IA en production cette semaine ? Notre équipe livre des intégrations Claude clé en main en 5 à 10 jours ouvrés. Réservez votre appel découverte gratuit sur rdv.lenobot.com, 15 minutes pour comprendre votre besoin, devis ferme sous 48h, sans engagement.

Article rédigé par L'équipe Lenobot.