Criando um Chatbot com Node.js e Agentes de IA: Tutorial Passo a Passo

# Inicialização do projeto pelo Claude Code npm init -y # Dependências do backend npm install express socket.io cors dotenv npm install openai @anthropic-ai/sdk # Dependências do frontend (React) npm install react react-dom npm install socket.io-client # Dependências de desenvolvimento npm install -D typescript @types/node npm install -D vite vitest

// Servidor WebSocket gerado pelo Claude Code import express from 'express'; import { createServer } from 'http'; import { Server } from 'socket.io'; import OpenAI from 'openai'; const app = express(); const httpServer = createServer(app); const io = new Server(httpServer, { cors: { origin: '*' } }); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); io.on('connection', (socket) => { console.log('Usuário conectado:', socket.id); socket.on('message', async (data) => { const { content, history } = data; // Enviar indicador de digitação socket.emit('typing', true); // Chamar API da IA const response = await openai.chat.completions.create({ model: 'gpt-4', messages: [...history, { role: 'user', content }], stream: true, }); // Stream da resposta em tempo real for await (const chunk of response) { socket.emit('response', { content: chunk.choices[0]?.delta?.content || '', done: false, }); } socket.emit('response', { content: '', done: true }); socket.emit('typing', false); }); socket.on('disconnect', () => { console.log('Usuário desconectado:', socket.id); }); }); httpServer.listen(3001, () => { console.log('Chatbot server running on port 3001'); });

// Componente Chat gerado pelo Codex import { useState, useEffect, useRef } from 'react'; import { io } from 'socket.io-client'; export function Chat() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const socketRef = useRef(null); useEffect(() => { socketRef.current = io('http://localhost:3001'); socketRef.current.on('response', ({ content, done }) => { if (done) { setIsTyping(false); } else { setMessages(prev => { const last = prev[prev.length - 1]; if (last?.role === 'assistant') { return [...prev.slice(0, -1), { ...last, content: last.content + content }]; } return [...prev, { role: 'assistant', content }]; }); } }); return () => socketRef.current.disconnect(); }, []); const sendMessage = () => { if (!input.trim()) return; setMessages(prev => [...prev, { role: 'user', content: input }]); socketRef.current.emit('message', { content: input, history: messages }); setInput(''); }; return ( <div className="chat-container"> <div className="messages"> {messages.map((msg, i) => ( <div key={i} className={msg.role === 'user' ? 'user-msg' : 'bot-msg'}> {msg.content} </div> ))} {isTyping && <div className="typing">Digitando...</div>} </div> <div className="input-area"> <input value={input} onChange={e => setInput(e.target.value)} onKeyPress={e => e.key === 'Enter' && sendMessage()} /> <button onClick={sendMessage}>Enviar</button> </div> </div> ); }