DEV Community

Tom Yahav
Tom Yahav

Posted on

AI‑Enhanced React: Build Your First Chatbot in less than 10 Minutes 🚀

#react #ai #openai #tutorial

Want a hands-on tutorial that shows you exactly how to build a React chatbot powered by OpenAI? Let’s dive in!

🧰 Why Do This?

  • Adds real AI interaction capability to your front-end.
  • Teaches prompt chaining and handling context.
  • Great portfolio piece and learning experience.

🔧 What You’ll Need

  1. OpenAI API key
  2. Node.js & npm or yarn
  3. Create React App or Vite setup

1. Set Up Your React Project

npx create-react-app ai-chatbot cd ai-chatbot npm install openai
Enter fullscreen mode Exit fullscreen mode

2. Secure Your API Key

Create .env.local:

REACT_APP_OPENAI_KEY=your_api_key_here
Enter fullscreen mode Exit fullscreen mode

⚠️ Never commit this file.

3. Create a Simple Backend Proxy

Since we don’t want to expose API keys in the client, create a quick Express server:

npm install express openai dotenv

// server.js import express from 'express' import OpenAI from 'openai' import 'dotenv/config' const app = express() app.use(express.json()) const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY }) app.post('/chat', async (req, res) => { const { messages } = req.body const resp = await openai.chat.completions.create({ model: 'gpt-3.5-turbo', messages, }) res.json({ reply: resp.choices[0].message.content }) }) app.listen(6000, () => console.log('API ready!'))
Enter fullscreen mode Exit fullscreen mode

4. Connect Front‑end Chat UI

In src/App.js:

import React, { useState } from 'react' function App() { const [msg, setMsg] = useState('') const [history, setHistory] = useState([]) const sendMsg = async () => { const userMsg = { role: 'user', content: msg } const updated = [...history, userMsg] setHistory(updated) setMsg('') const resp = await fetch('/chat', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ messages: updated }) }).then(r => r.json()) setHistory([...updated, { role: 'assistant', content: resp.reply }]) } return ( <div> {history.map((m,i) => <div key={i} className={m.role}>{m.content}</div> )} <input value={msg} onChange={e => setMsg(e.target.value)} /> <button onClick={sendMsg}>Send</button> </div> ) } export default App
Enter fullscreen mode Exit fullscreen mode

5. Improve the UX

  • Add a system message for personality
  • Show loading state
  • Add auto-scroll to the bottom
  • Style the chat bubbles

✅ Customizing Tips

  • Switch model to gpt-4 if you have access.
  • Stream responses for a “typewriter effect” (like this tutorial suggests)
  • Consider deploying the Express server with Vercel or Heroku.

👏 What You’ve Built

You now have a chat interface that:

  • Takes input from the user
  • Sends prompts (with conversation history) to OpenAI
  • Receives and displays AI responses

All in a modern React app with clean separation of front/back-end logic.

🚀 What’s Next?

  • Add message persistence (localStorage or a DB)
  • Improve accessibility and UX
  • Integrate with React frameworks like Next.js
  • Deploy your chatbot and show it off!

Top comments (0)