Build Your First AI App with React + Tailwind — Even If You're a Beginner!

🎯 Goal: Help beginners build a simple, working AI app using React, Tailwind CSS, and a free AI API (like OpenAI or HuggingFace).

🧠 No heavy theory. No complex code. Just easy steps with real results.

🌟 Why You Should Read This

✅ You're curious about AI but don’t know where to start
✅ You want a hands-on project to show off or use
✅ You like pretty UIs (Tailwind ❤️)
✅ You want that “I built this myself” feeling!

🧰 What You'll Use

React (with Vite for speed)
Tailwind CSS for styling
Free AI API (OpenAI or HuggingFace)
Fetch API for making requests

🚀 Let’s Get Started

🎨 Set Up Your Project

npm create vite@latest ai-react-app --template react
cd ai-react-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

🔧 Configure Tailwind

Replace the content of your tailwind.config.js with:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Update your src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

And include it in your main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

🧠 Create a Simple AI App

Let’s build a small text generator using OpenAI or HuggingFace’s free API.

🗂️ Create Your App.jsx File :

import { useState } from "react";

function App() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    if (!input.trim()) return;
    setLoading(true);

    try {
      const res = await fetch("https://api-inference.huggingface.co/models/gpt2", {
        method: "POST",
        headers: {
          "Authorization": "Bearer YOUR_HUGGINGFACE_API_KEY",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          inputs: input
        })
      });

      const data = await res.json();
      setResponse(data?.[0]?.generated_text || "No response 😥");
    } catch (err) {
      setResponse("Something went wrong 😵");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white p-8 flex flex-col items-center justify-center">
      <h1 className="text-3xl font-bold mb-6 text-center">🤖 Tiny AI Generator</h1>
      <textarea
        className="w-full max-w-md p-4 rounded bg-gray-800 mb-4"
        rows="5"
        placeholder="Type a sentence to continue..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button
        onClick={handleGenerate}
        className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded disabled:opacity-50"
        disabled={loading}
      >
        {loading ? "Generating..." : "Generate with AI"}
      </button>

      {response && (
        <div className="mt-6 bg-gray-800 p-4 rounded max-w-md w-full">
          <p className="text-green-400 font-semibold">AI Says:</p>
          <p>{response}</p>
        </div>
      )}
    </div>
  );
}

export default App;