NexusAI

A production-grade AI chat platform — fully frontend, zero backend.

Built with React 19 + Vite + Tailwind CSS v4, powered by Groq's ultra-fast Llama 3.3 70B inference.

---

Why frontend-only?

This isn't a limitation — it's a deliberate architecture choice.

NexusAI proves that a full-featured, multi-session AI chat product can be built and shipped without standing up a single server. No Express, no Node API routes, no database. Session state, history, and persistence all live in the browser via localStorage, while AI inference is handled directly by Groq's API from the client.

Tradeoff acknowledged: The API key ships in the browser bundle — acceptable for personal projects and demos. For a production multi-tenant SaaS, route requests through a lightweight backend proxy (e.g. a Vercel serverless function) to keep the key server-side and add auth + rate limiting.

---

Features

Core Chat

Feature	Details
Multi-session threads	Create, switch, rename, and delete independent conversations
Auto-naming	Thread titles auto-generated from the first user message
LocalStorage persistence	Full chat history survives page refreshes — zero backend

AI & Rendering

Feature	Details
Groq inference	Llama 3.3 70B Versatile — one of the fastest LLMs available
Rich Markdown rendering	Lists, tables, blockquotes, bold, inline code via react-markdown
Code blocks	Language label header + one-click copy button
Syntax highlighting	VSCode Dark+ theme via react-syntax-highlighter
Skeleton loading	Animated typing indicator while awaiting API response

UI

Feature	Details
Minimal chat layout	Clean centered input on empty threads, ChatGPT-style
Fully responsive	Mobile sidebar drawer + desktop persistent layout

---

Tech Stack

Layer	Technology
Library	React 19
Build Tool	Vite 6
Styling	Tailwind CSS v4
AI Inference	Groq API — Llama 3.3 70B Versatile
Markdown	react-markdown
Syntax Highlighting	react-syntax-highlighter
Persistence	localStorage
Deployment	Vercel

---

Getting Started

Prerequisites

• Node.js 18+
• A free Groq API key

1. Clone the repository

git clone https://github.com/yasirrajput4/NexusAI.git
cd NexusAI

2. Install dependencies

npm install

3. Configure environment variables

Create a .env.local file in the project root:

VITE_GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxxxxxxx

Note: The file must be named .env.local (not .env). Restart the dev server after creating or editing it. Never commit this file — it's already in .gitignore.

4. Start the development server

npm run dev

5. Build for production

npm run build
npm run preview   # optional: preview the production build locally

---

Project Structure

NexusAI/
├── src/
│   ├── components/
│   │   ├── Sidebar.jsx        # Thread list, new chat, rename, delete, clear all
│   │   ├── ChatWindow.jsx     # Main chat area — header, scroll, empty state layout
│   │   ├── MessageBubble.jsx  # User / AI / Error bubbles with copy button
│   │   ├── ChatInput.jsx      # Auto-resize input with send button
│   │   ├── CodeBlock.jsx      # Code renderer with language badge + copy button
│   │   └── EmptyState.jsx     # Centered hero shown on new/empty threads
│   │
│   ├── hooks/
│   │   ├── useThreads.js      # Thread CRUD + localStorage sync + auto-naming
│   │   └── useGroqAPI.js      # Groq API fetch wrapper with error state
│   │
│   ├── utils/
│   │   └── threadUtils.js     # generateId, createThread, loadThreads, saveThreads, stripMarkdown
│   │
│   ├── constants.js           # API config, storage keys
│   ├── App.jsx                # Root component — wires all hooks and layouts
│   ├── main.jsx               # React entry point
│   └── index.css              # Global styles, Tailwind, custom animations
│
├── .env.local                 # Your API key (never commit)
├── .gitignore
├── index.html
├── package.json
└── README.md

---

Known Tradeoffs

Tradeoff	Details
API key in browser	Exposed via VITE_ prefix. Fine for demos; use a backend proxy for production.
Rate limits	Groq free tier is generous for personal use, not for high-traffic production.
No auth	All threads are local to the browser — no user accounts or sync across devices.

---

Roadmap

• Multi-session thread management
• LocalStorage persistence
• Markdown + syntax highlighting
• Skeleton loading
• Responsive layout
• Streaming responses (token-by-token rendering)
• Backend proxy for secure API key handling
• Export chat as Markdown or PDF
• Custom system prompt per thread
• Model switcher (Llama, Mixtral, Gemma)
• PWA support for offline access

---

Contributing

Contributions, issues, and feature requests are welcome. Feel free to open an issue or submit a pull request.

---

License

This project is licensed under the MIT License.

---

Built by Yasir Rajput

Live Demo · Report Bug · Request Feature