Vue.js AI Chat : Tutoriel Complet d'Intégration API pour Débutants

Bienvenue dans ce guide pratique. Je m'appelle Marie, développeuse full-stack avec 8 ans d'expérience, et je vais vous accompagner pas à pas dans la création d'un composant de chat intelligent avec Vue.js. Si vous n'avez jamais travaillé avec une API auparavant, pas de panique : nous partons de zéro et je vous expliquerai chaque concept simplement.

Pourquoi ce tutoriel change la donne

Créer un chatbot performant peut sembler intimidant. Pourtant, avec les bons outils et une approche méthodique, n'importe quel développeur — même junior — peut y arriver en quelques heures. J'ai moi-même galéré pendant des semaines avec des intégrations complexes avant de découvrir des solutions plus simples. Aujourd'hui, je partage avec vous exactement ce que j'aurais voulu avoir comme guide à mes débuts.

Prérequis et objectif du projet

Dans ce tutoriel, nous allons construire un composant de chat Vue.js capable de communiquer avec une IA puissante. Notre objectif : afficher une interface utilisateur élégante, envoyer des messages, recevoir des réponses en temps réel, et gérer proprement les erreurs.

Ce dont vous aurez besoin :

Node.js installé (version 18 ou supérieure)
Un compte sur HolySheep AI — la plateforme que nous allons utiliser pour son excellent rapport qualité-prix
Visual Studio Code ou votre éditeur préféré
30 minutes de votre temps et beaucoup de curiosité

Comprendre le système de tarification HolySheep AI

Avant de coder, parlons argent. HolySheep AI propose des tarifs compétitifs qui peuvent faire une énorme différence pour vos projets personnels ou professionnels. Voici les prix actualisés pour 2026 par million de tokens (MTok) :

DeepSeek V3.2 : 0,42 $ — Le plus économique, parfait pour les budgets serrés
Gemini 2.5 Flash : 2,50 $ — Excellent équilibre coût/vitesse
GPT-4.1 : 8 $ — Le standard de l'industrie
Claude Sonnet 4.5 : 15 $ — Idéal pour les tâches complexes

Le taux de change avantageux (1 $ = 1 ¥) rend ces tarifs encore plus attractifs pour les développeurs chinois. De plus, HolySheheep AI offre des crédits gratuits à l'inscription et accepte WeChat/Alipay pour les paiements.

Étape 1 : Configuration initiale du projet Vue.js

Création du projet

Ouvrez votre terminal et tapez les commandes suivantes. Ne vous inquiétez pas si vous ne comprenez pas tout : je vais vous expliquer chaque ligne.

npm create vue@latest mon-chat-ai
cd mon-chat-ai
npm install
npm install axios

Explication simplifiée :

npm create vue@latest : Crée un nouveau projet Vue.js automatiquement
cd mon-chat-ai : Entre dans le dossier du projet
npm install : Installe les dépendances de base
npm install axios : Ajoute la bibliothèque pour communiquer avec les API

Structure des fichiers

Votre projet contiendra plusieurs fichiers. Pour notre tutoriel, nous allons principalement modifier src/components/ChatComponent.vue. Voici à quoi ressemblera notre arborescence finale :

mon-chat-ai/
├── src/
│   ├── components/
│   │   └── ChatComponent.vue    ← Notre fichier principal
│   ├── App.vue
│   └── main.js
├── index.html
└── package.json

Étape 2 : Obtenir votre clé API HolySheheep

La clé API, c'est comme un mot de passe qui vous identifie auprès du service. Sans elle, impossible de communiquer avec l'IA.

Rendez-vous sur la page d'inscription HolySheep AI
Créez un compte avec votre email
Dans le tableau de bord, cliquez sur "Clés API"
Générez une nouvelle clé et copiez-la quelque part en sécurité

Important : Ne partagez jamais votre clé API publiquement. Dans un projet réel, vous la stockerez dans une variable d'environnement (nous verrons cela plus tard).

Étape 3 : Code complet du composant Chat

Voici le code complet et fonctionnel. Copiez-le directement dans votre fichier ChatComponent.vue.

<template>
  <div class="chat-container">
    <div class="chat-header">
      <h3>💬 Chat IA avec HolySheep</h3>
      <select v-model="selectedModel" class="model-selector">
        <option value="deepseek-v3.2">DeepSeek V3.2 (0,42$/MTok)</option>
        <option value="gemini-2.5-flash">Gemini 2.5 Flash (2,50$/MTok)</option>
        <option value="gpt-4.1">GPT-4.1 (8$/MTok)</option>
        <option value="claude-sonnet-4.5">Claude Sonnet 4.5 (15$/MTok)</option>
      </select>
    </div>
    
    <div class="messages-area" ref="messagesContainer">
      <div v-for="(msg, index) in messages" :key="index" 
           :class="['message', msg.role]">
        <div class="message-content">{{ msg.content }}</div>
        <div class="message-time">{{ msg.timestamp }}</div>
      </div>
      <div v-if="isLoading" class="message assistant">
        <div class="message-content loading">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </div>
      </div>
    </div>
    
    <div class="input-area">
      <textarea 
        v-model="userInput" 
        @keydown.enter.exact="sendMessage"
        placeholder="Tapez votre message..."
        rows="2"
      ></textarea>
      <button @click="sendMessage" :disabled="isLoading || !userInput.trim()">
        {{ isLoading ? 'Envoi...' : 'Envoyer' }}
      </button>
    </div>
    
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import axios from 'axios'

const messages = ref([
  {
    role: 'assistant',
    content: 'Bonjour ! Je suis votre assistant IA alimenté par HolySheep. La latence moyenne est inférieure à 50ms. Comment puis-je vous aider ?',
    timestamp: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
  }
])

const userInput = ref('')
const isLoading = ref(false)
const error = ref('')
const selectedModel = ref('deepseek-v3.2')
const messagesContainer = ref(null)

const API_KEY = 'YOUR_HOLYSHEHEEP_API_KEY'
const BASE_URL = 'https://api.holysheep.ai/v1'

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

const sendMessage = async () => {
  const content = userInput.value.trim()
  if (!content || isLoading.value) return
  
  error.value = ''
  messages.value.push({
    role: 'user',
    content: content,
    timestamp: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
  })
  
  userInput.value = ''
  isLoading.value = true
  scrollToBottom()
  
  try {
    const response = await axios.post(
      ${BASE_URL}/chat/completions,
      {
        model: selectedModel.value,
        messages: messages.value.map(m => ({
          role: m.role,
          content: m.content
        })),
        stream: false
      },
      {
        headers: {
          'Authorization': Bearer ${API_KEY},
          'Content-Type': 'application/json'
        }
      }
    )
    
    const assistantMessage = response.data.choices[0].message.content
    messages.value.push({
      role: 'assistant',
      content: assistantMessage,
      timestamp: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
    })
    
    scrollToBottom()
    
  } catch (err) {
    console.error('Erreur complète:', err)
    if (err.response) {
      error.value = Erreur ${err.response.status}: ${err.response.data?.error?.message || 'Problème de communication avec l\'API'}
    } else if (err.request) {
      error.value = 'Impossible de contacter le serveur. Vérifiez votre connexion internet.'
    } else {
      error.value = 'Une erreur inattendue s\'est produite.'
    }
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  scrollToBottom()
})
</script>

Étape 4 : Stylisation CSS du composant

Ajoutez ce CSS dans la même balise <style> pour obtenir une interface moderne et responsive.

<style scoped>
.chat-container {
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
  font-size: 18px;
}

.model-selector {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.2);
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.model-selector option {
  background: #333;
  color: white;
}

.messages-area {
  height: 450px;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 4px;
}

.message.assistant {
  align-self: flex-start;
  background: white;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.message-content {
  line-height: 1.6;
  white-space: pre-wrap;
}

.message-time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
  text-align: right;
}

.message.user .message-time {
  color: rgba(255,255,255,0.8);
}

.message.assistant .message-time {
  color: #999;
}

.loading {
  display: flex;
  gap: 4px;
  padding: 16px 20px;
}

.loading .dot {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading .dot:nth-child(1) { animation-delay: -0.32s; }
.loading .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.input-area {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #eee;
}

.input-area textarea {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  resize: none;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.input-area textarea:focus {
  outline: none;
  border-color: #667eea;
}

.input-area button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.input-area button:hover:not(:disabled) {
  opacity: 0.9;
  transform: scale(1.02);
}

.input-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error-message {
  padding: 12px 20px;
  background: #fee;
  color: #c00;
  font-size: 14px;
  border-top: 1px solid #fcc;
}

@media (max-width: 600px) {
  .chat-container {
    border-radius: 0;
    height: 100vh;
  }
  
  .messages-area {
    height: calc(100vh - 180px);
  }
  
  .chat-header {
    flex-direction: column;
    gap: 12px;
  }
}
</style>

Étape 5 : Intégration dans App.vue

Pour voir votre composant en action, remplacez le contenu de App.vue par :

<template>
  <main>
    <h1>Mon Application de Chat IA</h1>
    <p>Bienvenue dans ce tutoriel Vue.js.Commencez à discuter ci-dessous !</p>
    <ChatComponent />
  </main>
</template>

<script setup>
import ChatComponent from './components/ChatComponent.vue'
</script>

<style>
body {
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

main {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 8px;
}

p {
  color: #666;
  margin-bottom: 24px;
}
</style>

Lancer et tester l'application

Ouvrez votre terminal à la racine du projet et exécutez :

npm run dev

Cliquez sur le lien local qui apparaît (généralement http://localhost:5173). Vous devriez voir votre interface de chat. Tapez un message et cliquez sur "Envoyer" — après quelques millisecondes (grâce à la latence ultra-faible de HolySheheep), vous recevrez une réponse de l'IA.

Comprendre le flux de données

Permettez-moi de vous expliquer ce qui se passe quand vous envoyez un message :

Vous tapez : Le message est stocké dans userInput
Vous cliquez : La fonction sendMessage() s'active
Affichage : Votre message apparaît immédiatement dans le chat
Requête HTTP : Axios envoie une requête POST à https://api.holysheep.ai/v1/chat/completions
Réponse IA : HolySheheep traite votre demande et renvoie une réponse en moins de 50ms
Affichage final : La réponse s'ajoute à la liste des messages

Améliorations optionnelles

Mode streaming pour des réponses en temps réel

Si vous voulez voir le texte apparaître mot par mot (comme ChatGPT), modifiez le paramètre stream à true et gérez les Server-Sent Events. Cette fonctionnalité est plus complexe mais offre une expérience utilisateur premium.

Gestion des variables d'environnement

Dans un projet de production, ne codez jamais votre clé API en dur. Créez un fichier .env à la racine :

VITE_HOLYSHEEP_API_KEY=votre_cle_ici

Puis utilisez-la ainsi :

import axios from 'axios'

const API_KEY = import.meta.env.VITE_HOLYSHEEP_API_KEY
const BASE_URL = 'https://api.holysheep.ai/v1'

// ... reste du code inchangé

Erreurs courantes et solutions

Erreur 401 : Clé API invalide ou manquante

Symptômes : La console affiche Error 401: Unauthorized

Causes possibles :

La clé API est incorrecte ou contient des espaces
La clé n'a pas été copiée complètement
La clé a été révoquée depuis le tableau de bord

Solution :

// Vérifiez que votre clé commence correctement
const API_KEY = 'sk-holysheep-...' // Doit contenir 'sk-'

// Et que le header Authorization est bien formaté
headers: {
  'Authorization': Bearer ${API_KEY},  // Espace après 'Bearer' OBLIGATOIRE
  'Content-Type': 'application/json'
}

Erreur 429 : Trop de requêtes (Rate Limiting)

Symptômes : Error 429: Too Many Requests

Cause : Vous envoyez trop de messages en peu de temps. HolySheheep AI, comme toutes les API, limite le nombre de requêtes par minute.