🚀 Integrating AI into Your React Application: A Practical Guide

This content originally appeared on DEV Community and was authored by Manu Kumar Pal

Hey community!

AI is everywhere these days—powering chatbots, recommendation engines, and even image generators. The best part? You can easily bring this power into your React apps without starting from scratch.

1. Decide Your AI Use Case

Before writing any code, figure out what you want to build:

Chatbot (OpenAI, LangChain)
Image generation (Stable Diffusion, OpenAI Image API)
Sentiment analysis
Recommendations

2. Choose an AI Provider

Some popular options:

-> OpenAI API (ChatGPT, GPT-4, DALL·E)

-> Hugging Face Inference API (NLP, vision models)

-> Google Gemini or Claude API

-> Custom ML Model hosted on AWS, Flask, or FastAPI

3. Install Dependencies

For OpenAI, install:

npm install openai axios

4. Set Up a Backend Proxy (Recommended)

Never expose your API keys in the frontend! Create a simple Express server:

// server.js
import express from 'express';
import axios from 'axios';
const app = express();
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  const { message } = req.body;
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }]
    },
    { headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` } }
  );
  res.json(response.data);
});

app.listen(5000, () => console.log('Server running on port 5000'));

5. Connect Your React Frontend

Here’s a simple React component for your AI chatbot:

import { useState } from "react";
import axios from "axios";

function ChatBot() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSend = async () => {
    const res = await axios.post("/api/chat", { message: input });
    setResponse(res.data.choices[0].message.content);
  };

  return (
    <div>
      <h2>AI Chatbot</h2>
      <textarea value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleSend}>Send</button>
      <p>{response}</p>
    </div>
  );
}

export default ChatBot;

6. Bonus: Real-Time Responses

For a ChatGPT-like experience, use Server-Sent Events (SSE) or WebSockets to stream tokens in real-time.

Wrap-Up: AI in React Made Simple

Define your use case
Keep API keys secure with a backend
Build a clean UI for your AI features

AI can turn ordinary apps into extraordinary experiences. Now it’s your turn to try it out!

What AI feature would you add to your React app? Share your ideas below!

This content originally appeared on DEV Community and was authored by Manu Kumar Pal