Posted on Aug 1

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;