⚛️ Front-End Setup

This setup gets you a frontend with Vite + React that can talk to your Node.js backend. You’ll use simple, clean styling so you can focus more on the AI functionality.

---

🚀 Create Your React App

Let’s create a new React app using Vite. Run this command in your terminal (outside your backend folder):

npm create vite@latest chat-frontend --template react

Navigate into your new project:

cd chat-frontend

---

📦 Install Dependencies

Install the packages you need for your chat interface:

npm install lucide-react react-markdown motion prism-react-renderer

Install Tailwind CSS:

npm install -D tailwindcss @tailwindcss/vite

What each package does:

• lucide-react - Beautiful icons for your chat interface
• react-markdown - Renders AI responses that include markdown
• motion - Smooth animations for better UX
• prism-react-renderer - Syntax highlighting for code blocks
• tailwindcss - Utility-first CSS framework
• @tailwindcss/vite - Tailwind integration for Vite

---

⚙️ Configure Path Aliases

To avoid messy imports like ../../../components/Button, let’s set up clean imports with @.

Update your vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  plugins: [react()],
})

What this does:

• @ now points to your src folder
• Import components with @/components/Button instead of ../../../components/Button
• Much cleaner and easier to refactor

---

🎨 Setup Tailwind CSS 4.0

Step 1: Update Vite Config

Add Tailwind to your Vite plugins:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  plugins: [react(), tailwindcss()],
})

Step 2: Update Your CSS

Replace the contents of src/index.css with:

@import "tailwindcss";

---

🧪 Test Your Setup

Start your development server:

npm run dev

You should see your React app running at http://localhost:5173.

To test Tailwind is working, update src/App.jsx:

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-gray-800">Chat App Frontend</h1>
        <p className="text-gray-600 mt-2">Ready to connect to your backend!</p>
      </div>
    </div>
  )
}

export default App

If you see a styled card with your text, everything is working!

---

🔧 Troubleshooting

Issue	Fix
Vite command not found	Make sure Node.js is installed and try npx create vite@latest
Tailwind styles not working	Check that @import "tailwindcss"; is in your CSS file
Import alias not working	Restart your dev server after changing vite.config.js
Port already in use	Vite will automatically use the next available port

---

✅ What’s Next

Next, you’ll build the actual chat components and connect them to your Node.js backend. Let’s make this thing interactive! 💬