Transform rough website ideas into structured, build-ready prompts using AI.
A hero section component that takes unstructured website ideas and transforms them into comprehensive specifications. Users get:
- Goal — Clear objective for the website
- Target Audience — Who the site is for
- Value Proposition — What makes it unique
- Tone/Style — Visual and voice direction
- Suggested Sections — 4-8 recommended page sections
- Node.js 18+
- npm
- Groq API key (free at console.groq.com)
# Install dependencies
npm install
# Create environment file
cp .env.example .env.local
# Add your Groq API key to .env.local
# GROQ_API_KEY=your_key_here
# Start development server
npm run devOpen http://localhost:3000 to see it running.
app/
├── api/refine-prompt/route.ts # API endpoint
├── components/
│ ├── PromptRefiner.tsx # Main component
│ ├── RefinerInput.tsx # Textarea with validation
│ ├── RefinerOutput.tsx # Markdown display
│ ├── CopyButton.tsx # Clipboard functionality
│ └── LoadingSpinner.tsx # Loading indicator
├── lib/groq.ts # AI integration
├── page.tsx # Hero page
└── layout.tsx # Root layout
| Decision | Rationale |
|---|---|
| Next.js 16 App Router | Server components, API routes, optimal DX |
| Groq + Llama 3.1 | Fast inference (2-3s), free tier available |
| TypeScript | Type safety, better maintainability |
| Tailwind CSS | Rapid UI development, consistent design |
| Server-side API calls | Keeps API key secure, enables rate limiting |
- ⚡ Fast — AI response in 2-3 seconds
- 📋 Structured Output — Consistent 5-section format
- 🎨 Modern UI — Clean, responsive design
- ✅ Error Handling — Graceful failures with retry
- 📱 Mobile Ready — Works on all screen sizes
- 🔒 Secure — API key never exposed to client
| Variable | Required | Default |
|---|---|---|
GROQ_API_KEY |
Yes | — |
GROQ_MODEL |
No | llama-3.1-8b-instant |
GROQ_TEMPERATURE |
No | 0.7 |
MIT