Créez un chat avec Azure AI et réagissez par Chad Adams | Juin 2025.

Commençons par créer une nouvelle application React et définissez les dépendances nécessaires:

npx create-react-app azure-chatbot
cd azure-chatbot
npm install @azure/openai axios

Créer une interface de chat

Créez un nouveau composant pour notre interface chatbot:

// src/components/Chatbot.js
import React, { useState } from 'react';
import './Chatbot.css';
const Chatbot = () => {
const [messages, setMessages] = useState([
{ role: 'assistant', content: 'Hello! How can I help you today?' }
]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const sendMessage = async () => {
if (!input.trim()) return;
const userMessage = { role: 'user', content: input };
setMessages(prev => [...prev, userMessage]);
setInput('');
setIsLoading(true);
try {
const response = await fetch('/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
messages: [...messages, userMessage]
}),
});
const data = await response.json();
if (data.content) {
setMessages(prev => [...prev, { role: 'assistant', content: data.content }]);
}
} catch (error) {
console.error('Error sending message:', error);
setMessages(prev => [...prev, { 
role: 'assistant', 
content: 'Sorry, I encountered an error. Please try again.' 
}]);
} finally {
setIsLoading(false);
}
};
const handleKeyPress = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
};
return (
<div className="chatbot-container">
<div className="chat-header">
<h2>AI Assistant</h2>
</div>
<div className="messages-container">
{messages.map((message, index) => (
<div key={index} className={`message ${message.role}`}>
<div className="message-content">
{message.content}
</div>
</div>
))}
{isLoading && (
<div className="message assistant">
<div className="message-content">
<div className="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
)}
</div>
<div className="input-container">
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="Type your message here..."
rows="2"
disabled={isLoading}
/>
<button onClick={sendMessage} disabled={isLoading || !input.trim()}>
Send
</button>
</div>
</div>
);
};
export default Chatbot;

Ajout de styles

Créez un fichier CSS pour chatbot:

/* src/components/Chatbot.css */
.chatbot-container {
max-width: 800px;
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.chat-header {
background: linear-gradient(135deg, #0078d4, #106ebe);
color: white;
padding: 1rem;
text-align: center;
}
.chat-header h2 {
margin: 0;
font-size: 1.2rem;
}
.messages-container {
flex: 1;
overflow-y: auto;
padding: 1rem;
background-color: #f8f9fa;
}
.message {
margin-bottom: 1rem;
display: flex;
}
.message.user {
justify-content: flex-end;
}
.message.assistant {
justify-content: flex-start;
}
.message-content {
max-width: 70%;
padding: 0.75rem 1rem;
border-radius: 18px;
word-wrap: break-word;
}
.message.user .message-content {
background-color: #0078d4;
color: white;
}
.message.assistant .message-content {
background-color: white;
border: 1px solid #e0e0e0;
color: #333;
}
.input-container {
padding: 1rem;
background-color: white;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 0.5rem;
}
.input-container textarea {
flex: 1;
border: 1px solid #ccc;
border-radius: 20px;
padding: 0.75rem 1rem;
resize: none;
font-family: inherit;
outline: none;
}
.input-container textarea:focus {
border-color: #0078d4;
}
.input-container button {
background-color: #0078d4;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
transition: background-color 0.2s;
}
.input-container button:hover:not(:disabled) {
background-color: #106ebe;
}
.input-container button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.typing-indicator {
display: flex;
gap: 4px;
}
.typing-indicator span {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #999;
animation: typing 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}

Configuration du backend API

Pour une approche rapide des tests, créez un serveur express.js simple. Définissez d’abord les dépendances nécessaires:

npm install express cors dotenv

Créer un fichier de serveur server.js:

// server.js
const express = require('express');
const cors = require('cors');
const { OpenAIApi } = require('@azure/openai');
require('dotenv').config();
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
// Initialize Azure OpenAI client
const client = new OpenAIApi({
endpoint: process.env.AZURE_OPENAI_ENDPOINT,
apiKey: process.env.AZURE_OPENAI_API_KEY,
apiVersion: "2024-02-15-preview"
});
app.post('/api/chat', async (req, res) => {
try {
const { messages } = req.body;
const response = await client.getChatCompletions(
process.env.AZURE_OPENAI_DEPLOYMENT_NAME,
messages,
{
maxTokens: 500,
temperature: 0.7,
}
);
const assistantMessage = response.choices[0]?.message?.content;
res.json({ content: assistantMessage });
} catch (error) {
console.error('Error:', error);
res.status(500).json({ error: 'Failed to get response from AI' });
}
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});

Créer un .env Souscrivez-vous à la racine de votre projet:

AZURE_OPENAI_ENDPOINT=your-azure-openai-endpoint
AZURE_OPENAI_API_KEY=your-api-key
AZURE_OPENAI_DEPLOYMENT_NAME=your-deployment-name
PORT=5000

Mettez à jour votre composant principal de l’application:

// src/App.js
import React from 'react';
import Chatbot from './components/Chatbot';
import './App.css';
function App() {
return (
<div className="App">
<Chatbot />
</div>
);
}
export default App;

Chatbate en cours d’exécution

1. Exécutez le serveur backend:

node server.js

2. Dans le nouveau terminal, exécutez la réaction:

npm start

Maintenant, votre chat devrait fonctionner http://localhost:3000!

Pour des tests et une itération rapides:

1. Utiliser un environnement variable Pour changer de configuration commodément
2. Implémentez les limites des erreurs Pour attraper et exquis pour montrer les erreurs
3. Ajoutez votre enregistrement de console Pour les appels d’API de débogage
4. Vérifiez avec différents types de messages y compris les longs textes et les caractères spéciaux
5. Continuez l’utilisation d’Azure à travers le portail Azure pour éviter les coûts inattendus

Une fois que votre chat principal fonctionne, considérez ces améliorations:

• Ajouter la persistance des messages
• Implémenter l’authentification des utilisateurs
• Ajouter les capacités de téléchargement des fichiers
• Inclure les balises de jeu de texte et de messages temporaires
• Ajouter un support à support –D
• Réalisez la mémoire des conversations et du contexte

Vous avez maintenant un chat entièrement fonctionnel qui fonctionne sur la base Plante fixe Azure Ai et Réagir. Cette installation fournit une base solide qui peut être étendue avec des fonctionnalités supplémentaires telles que la mémoire de conversation, l’authentification des utilisateurs et les composants d’interface utilisateur plus complexes. L’approche modulaire facilite la vérification des modifications rapidement et les déployer en production lorsqu’elle est prête.

N’oubliez pas de garder une trace de l’utilisation d’Azure AI et de mettre en œuvre des erreurs appropriées et une restriction de vitesse au déploiement de la production.