Recherche de site Web

Construire un générateur de tutoriels avec Claude 3.5 Sonnet et React

Introduction

Quelle est la première chose que vous suivez lorsque vous apprenez quelque chose de nouveau, que ce soit la cuisine ou l’apprentissage de la programmation ? Des tutoriels, n’est-ce pas ?

Vous n’êtes pas seul : 25,6 % des internautes consomment des tutoriels. De plus, 57 % du contenu que vous voyez sur Internet est généré par l’IA. On peut dire que vous pouvez accomplir des tâches plus rapidement que jamais avec l’IA comme assistant.

Dans ce tutoriel, vous apprendrez à créer une application qui génère des tutoriels au format Markdown à l’aide de la plate-forme DigitalOcean GenAI et du dernier support de modèle Anthropic, capable de générer des guides techniques au format Markdown lorsque vous entrez un sujet. Voici une démo de ce que vous allez construire :

Conditions préalables

  • Compte DigitalOcean - Pour cette démo, vous utiliserez la plateforme d’applications de DigitalOcean pour héberger l’application et la plateforme GenAI pour développer les capacités d’IA.

  • Connaissance pratique de React, TypeScript, TailwindCSS et de l’utilisation des API.

Qu’est-ce que la plateforme GenAI de DigitalOcean ?

La plateforme GenAI est une solution tout-en-un qui peut vous aider à créer des agents d’IA et à utiliser les API pour créer toutes sortes d’applications. Il prend en charge les modèles de DeepSeek, Anthropic, Meta et Mistral AI, ainsi que des fonctionnalités avancées telles que la génération augmentée par récupération (RAG), le routage des fonctions, la personnalisation des agents et les garde-fous pour vous aider à créer des applications plus sécurisées et contextuelles.

Liste des modèles pris en charge

La plateforme GenAI prend en charge plusieurs modèles que vous pouvez utiliser pour créer et déployer des applications pilotées par l’IA. Voici la liste complète des modèles supportés par la plateforme GenAI. Nous avons récemment lancé Anthropic Claude 3.5 (Sonnet & Haiku), Claude 3 Opus et DeepSeek R1-distill-llama-70B, que vous pouvez utiliser pour créer n’importe quelle application d’IA que vous souhaitez.

Création de l’application

Maintenant que vous connaissez la plateforme GenAI, voyons comment vous pouvez l’utiliser pour créer un générateur de tutoriels.

L’application suivra un flux simple, et vous utiliserez la plateforme d’applications de DigitalOcean pour déployer l’application et la plateforme GenAI pour ajouter les capacités d’IA.

Voici à quoi ressemblera l’application :

Étape 1 - Construction du frontend

L’application se compose de deux parties principales : la gestion de l’historique et l’interface utilisateur.

Commençons par comprendre comment vous allez construire les principaux blocs :

Tutoriel de gestion de l’historique

Tout d’abord, examinons la gestion de l’état pour nos tutoriels.

Vous utiliserez le hook useState de React pour gérer la liste des tutoriels et le tutoriel actuellement sélectionné :

interface Tutorial {
  topic: string;
  timestamp: string;
  content?: string;
  isLoading?: boolean;
  error?: string;
}

function App() {
  const [tutorials, setTutorials] = useState<Tutorial[]>([]);
  const [selectedTutorial, setSelectedTutorial] = useState<Tutorial | null>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
}

Cela permet de gérer :

  • Liste des tutoriels
  • Tutoriel actuellement sélectionné
  • État d’ouverture/fermeture de la barre latérale
  • États de chargement

Logique de génération du tutoriel

Vous allez maintenant comprendre comment la logique de génération du tutoriel est gérée. La fonction handleSubmit permet de :

  • Créez un objet de didacticiel.
  • Mettez à jour l’interface utilisateur pour afficher l’état de chargement.
  • Gérer les cas de succès et d’erreurs.
  • Mettez à jour la liste des tutoriels avec le résultat.
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  if (!topic.trim()) return;

  setIsLoading(true);
  const newTutorial: Tutorial = {
    topic,
    timestamp: new Date().toLocaleString(),
    isLoading: true
  };

  setTutorials([newTutorial, ...tutorials]);
  
  try {
    const content = await generateTutorial(topic);
    const completedTutorial = { ...newTutorial, content, isLoading: false };
    setTutorials(prevTutorials => [
      completedTutorial,
      ...prevTutorials.slice(1)
    ]);
    setSelectedTutorial(completedTutorial);
  } catch (error) {
    const failedTutorial = { 
      ...newTutorial, 
      error: (error as Error).message, 
      isLoading: false 
    };
    setTutorials(prevTutorials => [
      failedTutorial,
      ...prevTutorials.slice(1)
    ]);
    setSelectedTutorial(failedTutorial);
  }
};

Mise en œuvre de la barre latérale coulissante

Vous souhaitez pouvoir accéder à nos articles précédemment générés ; Pour cela, vous devrez ajouter une barre latérale qui affiche l’historique du tutoriel à l’aide du code ci-dessous :

{/* Sidebar Toggle Button */}
<button
  onClick={() => setIsSidebarOpen(true)}
  className="fixed top-4 left-4 p-2 bg-white rounded-lg shadow-md hover:bg-gray-50 z-50"
>
  <Menu className="w-6 h-6 text-gray-700" />
</button>

{/* Sidebar Component */}
<div
  className={`fixed inset-y-0 left-0 w-80 bg-white shadow-2xl transform transition-transform duration-300 ease-in-out z-50 ${
    isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
  }`}
>
  <div className="p-4">
    <div className="flex justify-between items-center mb-6">
      <h2 className="text-xl font-semibold text-gray-900">Tutorial History</h2>
      <button
        onClick={() => setIsSidebarOpen(false)}
        className="p-2 hover:bg-gray-100 rounded-lg"
      >
        <X className="w-5 h-5 text-gray-600" />
      </button>
    </div>
    {/* Tutorial List */}
    <div className="space-y-3">
      {tutorials.map((tutorial, index) => (
        <button
          key={index}
          onClick={() => {
            setSelectedTutorial(tutorial);
            setIsSidebarOpen(false);
          }}
          className={`w-full text-left p-3 rounded-lg transition-colors ${
            selectedTutorial === tutorial
              ? 'bg-indigo-50 text-indigo-700'
              : 'hover:bg-gray-50'
          }`}
        >
          <h3 className="font-medium truncate">{tutorial.topic}</h3>
          <p className="text-sm text-gray-500">{tutorial.timestamp}</p>
        </button>
      ))}
    </div>
  </div>
</div>

Affichage du contenu du tutoriel

Pour la dernière partie, vous souhaitez disposer d’une zone de contenu qui affiche le tutoriel sélectionné à l’aide du rendu Markdown.

Voici à quoi ressemble le code :

{selectedTutorial ? (
  <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <div className="flex items-start gap-4">
      <div className="p-2 bg-indigo-100 rounded-lg">
        <BookOpen className="w-6 h-6 text-indigo-600" />
      </div>
      <div className="flex-1">
        <h3 className="text-xl font-semibold text-gray-900 mb-2">
          {selectedTutorial.topic}
        </h3>
        <p className="text-sm text-gray-500">
          Generated on {selectedTutorial.timestamp}
        </p>
        {selectedTutorial.isLoading ? (
          <div className="mt-4 p-4 bg-gray-50 rounded-lg">
            {/* Loading skeleton */}
            <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
            <div className="h-4 bg-gray-200 rounded w-1/2 mt-2 animate-pulse" />
          </div>
        ) : (
          <div 
            className="mt-4 p-4 bg-gray-50 rounded-lg prose prose-indigo max-w-none"
            dangerouslySetInnerHTML={{ 
              __html: marked(selectedTutorial.content || '') 
            }}
          />
        )}
      </div>
    </div>
  </div>
) : (
  <div className="text-center py-12">
    <div className="text-gray-400 mb-4">
      <BookOpen className="w-12 h-12 mx-auto" />
    </div>
    <h3 className="text-lg font-medium text-gray-900">
      No tutorial selected
    </h3>
    <p className="text-gray-500">
      Generate a new tutorial or select one from the history
    </p>
  </div>
)}

Étape 2 - Création de l’agent GenAI

Connectez-vous à votre compte DigitalOcean et accédez à la plateforme GenAI.

Cliquez sur Créer un agent et donnez un nom à votre agent.

L’agent vous aidera à créer des tutoriels, alors donnez-lui des instructions similaires à Votre tâche consiste à générer un tutoriel approfondi basé sur l’entrée fournie. Utilisez un langage simple et fournissez l’article au format Markdown. Vous pouvez choisir n’importe quel modèle pour effectuer la tâche. Vous utiliserez Anthropic Claude 3.5 Sonnet pour cet exemple.

Remarque : Pour utiliser les modèles Anthropic, vous aurez besoin d’une clé API que vous pouvez générer gratuitement ici.

Si vous le souhaitez, vous pouvez ajouter une base de connaissances. Pour cet exemple, vous pouvez l’ignorer et poursuivre la création de l’agent.

Une fois l’agent déployé, rendez-vous sur Playground pour tester et voir s’il a fonctionné conformément à vos attentes.

Si votre agent a besoin d’être amélioré dans le type de réponse, vous pouvez essayer de mettre à jour les instructions et d’ajuster la température à partir de l’onglet Paramètres, comme indiqué ci-dessous.

Étape 3 - Utilisation de l’agent dans notre application

Maintenant que l’agent a été créé et fonctionne comme prévu, nous devons l’intégrer au front-end. Pour cela, suivez les étapes ci-dessous :

Copiez l’URL du point de terminaison et générez une clé d’accès au point de terminaison, comme illustré dans les images ci-dessous.

Remarque : Assurez-vous d’enregistrer la clé d’accès quelque part, car vous en aurez besoin dans les étapes suivantes.

Maintenant, revenez au code frontend que vous avez écrit et poussez-le vers un dépôt GitHub (similaire à ce qui a été fait dans ce dépôt Github). Ensuite, rendez-vous sur la plateforme d’applications DigitalOcean et déployez l’application.

Ce tutoriel sur la création et le déploiement d’applications sur la plateforme d’applications DigitalOcean avec un domaine personnalisé vous apprend à déployer une application sur la plateforme d’applications.

Une fois l’application déployée, rendez-vous dans l’onglet Paramètres.

Faites ensuite défiler jusqu’à la section Variables d’environnement au niveau de l’application et cliquez sur Modifier pour ajouter les variables suivantes :

AGENT_BASE_URL: <Your agent endpoint URL>
SECURE_AGENT_KEY: <The endpoint access key that you saved in the first step>

Étape 4 - Intégration du SDK OpenAI dans l’application

Pour la dernière étape, vous allez intégrer le SDK OpenAI dans l’application, nous utiliserons le code ci-dessous :

import OpenAI from "openai";
const SECURE_AGENT_KEY = import.meta.env.VITE_SECURE_AGENT_KEY;
const AGENT_BASE_URL = import.meta.env.VITE_AGENT_BASE_URL;
const AGENT_ENDPOINT = `${AGENT_BASE_URL}/api/v1/`;

if (!SECURE_AGENT_KEY || !AGENT_BASE_URL) {
  throw new Error("Missing agent access key or base URL! Ensure VITE_SECURE_AGENT_KEY and VITE_AGENT_BASE_URL are set in .env");
}
const client = new OpenAI({
  apiKey: SECURE_AGENT_KEY,
  baseURL: AGENT_ENDPOINT, 
  dangerouslyAllowBrowser: true
});
export async function generateTutorial(topic: string): Promise<string> {
  try {
    console.log("Starting tutorial generation for topic:", topic);

    const prompt = `Your task is to generate a nice in-depth tutorial based on the input provided. Use simple language and provide the article in markdown format.\n\nTopic: ${topic}\n\nPlease create a comprehensive tutorial that includes:\n1. Introduction\n2. Prerequisites (if any)\n3. Step-by-step instructions\n4. Code examples (if applicable)\n5. Best practices\n6. Common pitfalls\n7. Conclusion`;

    const response = await client.chat.completions.create({
      model: "Anthropic Claude 3.5 Sonnet",
      messages: [
        { role: "system", content: "You are an expert technical writer who creates clear, concise, and comprehensive tutorials." },
        { role: "user", content: prompt }
      ],
      temperature: 0.7,
      max_tokens: 2000
    });

    console.log("OpenAI response received:", response);    
    const content = response.choices[0]?.message?.content || "No response from AI";
    
    return content;
    
  } catch (error) {
    console.error("Error generating tutorial:", error);
  
    let errorMessage = "Unknown error occurred.";
  
  if (error instanceof OpenAI.RateLimitError) {
      errorMessage = "Rate limit exceeded. Please try again later.";
    } else if (error instanceof Error) {
      errorMessage = error.message; 
    }  
    throw new Error(`OpenAI SDK Error: ${errorMessage}`);
  }
}

Et c’est terminé ! Vous pouvez maintenant utiliser cette application pour imaginer ou écrire vos tutoriels.

Après avoir suivi toutes les étapes, voici à quoi ressemblera votre application :

Vous pouvez également essayer l’application en direct du générateur de didacticiels déployé.

Conclusion

Dans ce tutoriel, vous avez appris à utiliser la plateforme GenAI pour créer des applications pilotées par l’IA en fonction de votre cas d’utilisation et à l’intégrer à des API tierces.

En attendant, si vous souhaitez en savoir plus sur la plateforme GenAI, voici quelques ressources utiles :

  1. Référentiel GitHub avec le code de l’application.
  2. Intégration des agents GenAI dans votre site Web : un guide étape par étape.
  3. Construire une expérience de chat personnalisée en temps réel avec la plateforme GenAI de DigitalOcean
  4. 12 jours de DigitalOcean (Jour 9) - Automatisation de l’analyse des reçus avec l’agent GenAI de DigitalOcean

Si vous avez des questions, vous pouvez nous contacter sur Discord.