Skip to content

web-nextjs

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

web-nextjs

README.md

Groq Code Companion — Web App (Next.js)

A professional coding assistant powered by Groq, with token-by-token streaming responses, task-mode buttons (Generate / Debug / Review / Refactor / Explain), a Monaco code editor for context, and per-browser conversation history. Built to deploy to Vercel in one click.

Next.js Vercel Groq

🚀 Deploy to Vercel (one click)

  1. Push this folder to your own GitHub repo
  2. Click: Deploy with Vercel → "Import Git Repository"
  3. In the Environment Variables step, add:
  4. Click Deploy. Done.

Or via Vercel CLI

npm i -g vercel
vercel login
vercel        # follow prompts
vercel env add GROQ_API_KEY production
vercel env add GROQ_MODEL production
vercel --prod

💻 Local development

npm install
cp .env.example .env.local      # paste your Groq API key
npm run dev                     # http://localhost:3000

✨ Features

  • Streaming responses — token-by-token output via Server-Sent Events; feels instant on Groq
  • Stop button — abort a generation mid-stream; partial answer is preserved
  • 5 task modes — Generate, Debug, Review, Refactor, Explain (each tunes the prompt)
  • Monaco editor — attach code as context with a real VS-Code-style editor
  • Syntax highlighting + copy — every code block in responses
  • Per-browser history — sessions stored in localStorage, sidebar to switch
  • Server-side API key — Groq key never reaches the browser

⚙️ Environment variables

Name Required Default Description
GROQ_API_KEY ✅ — Get from https://console.groq.com/keys
GROQ_MODEL ❌ llama-3.3-70b-versatile Any Groq-hosted model

🧩 Project structure

web-nextjs/
├── app/
│   ├── api/chat/route.ts     # Streaming Groq endpoint (SSE)
│   ├── layout.tsx
│   ├── page.tsx              # UI (sidebar + modes + editor + chat)
│   └── globals.css
├── components/                # Sidebar, CodeEditor, CodeBlock, Markdown
├── lib/                       # persona.ts, storage.ts
├── vercel.json                # Vercel build config (maxDuration=60s)
├── .env.example
└── package.json

🔁 Switching models

Set GROQ_MODEL in Vercel env vars (or .env.local):

Model Notes
llama-3.3-70b-versatile Default — best general/coding quality
llama-3.1-8b-instant Fastest
deepseek-r1-distill-llama-70b Reasoning-heavy
mixtral-8x7b-32768 32k context

Full list: https://console.groq.com/docs/models

🧪 How streaming works

  • /api/chat calls groq.chat.completions.create({ stream: true })
  • Server emits Server-Sent Events: meta, delta, error, done
  • Client reads the stream with ReadableStream.getReader() and renders tokens live with Markdown + syntax highlighting

📄 License

MIT