Forge

Turn any website into your next product idea.

Forge analyzes any website, understands its customers, and generates product concepts with live landing page previews — in minutes, not weeks.

Features

• Website Analysis — Paste any URL. Forge scrapes the site, extracts business model, target audience, strengths, and gaps.
• Product Concept Generation — AI generates a complete product concept: name, tagline, features, positioning, UI direction, and a self-contained React landing page.
• Live Preview — See the generated landing page rendered in a sandboxed iframe with Tailwind CSS, live on every concept.
• AI Chat Refinement — Ask follow-up questions, request code changes, or tweak the concept through a streaming chat interface.
• Auto-QA — Generated code is automatically validated and fixed before preview.
• Multi-Model Support — Choose from all listed AI models or use the default. Automatic fallback on rate limits.
• Project Management — Create, browse, and delete projects. All data is private and isolated per user.

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
React	React 19
Language	TypeScript
Styling	Tailwind CSS 4
UI	shadcn/ui (Radix UI)
Auth / Database	Supabase (Auth + PostgreSQL)
AI	Vercel AI SDK + OpenRouter
State	Zustand
Validation	Zod

Getting Started

Prerequisites

• Node.js 18+
• A Supabase project
• An OpenRouter API key

1. Clone and install

git clone https://github.com/surazbissoyi/9o-code.git
cd 9o-code
npm install

2. Set up environment variables

Copy the example and fill in your keys:

cp .env.local.example .env.local

Required variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
OPENROUTER_API_KEY=your_openrouter_api_key

3. Set up the database

Run the Supabase migrations to create the required tables:

npx supabase db push

Or manually run the SQL in supabase/migrations/ through the Supabase dashboard.

4. Start the dev server

npm run dev

Open http://localhost:3000.

Project Structure

app/
├── page.tsx                    # Landing page
├── (auth)/
│   ├── login/page.tsx          # Email/password login
│   └── signup/page.tsx         # Email/password signup
├── dashboard/
│   ├── page.tsx                # Project list
│   └── [projectId]/
│       ├── page.tsx            # Project workspace
│       └── _components/        # UI components
└── api/projects/[projectId]/
    └── refine/route.ts         # Streaming chat endpoint

lib/
├── ai.ts                       # AI generation (OpenRouter wrapper)
├── concept-schema.ts           # Zod schemas for concepts & chat actions
├── qa.ts                       # Auto-QA pass on generated code
├── free-models.ts              # Free model list from OpenRouter
├── screenshots.ts              # Screenshot URL generator
├── task-store.ts               # Zustand store for in-flight tasks
├── supabase/                   # Supabase client helpers
└── actions/                    # Server actions (analyze, concepts, chat)

components/
├── model-selector.tsx          # AI model dropdown
├── user-avatar.tsx             # User avatar + logout
└── ui/                         # shadcn/ui primitives

supabase/migrations/            # Database schema migrations

Database Schema

Table	Purpose
projects	One row per analyzed website URL
analyses	AI analysis results (JSON) per project
product_concepts	Generated concept + landing page code per project
chat_messages	Conversation history per project

All tables have Row-Level Security (RLS) — users can only access their own data.

How It Works

1. Add a website — Paste any URL into Forge.
2. Run analysis — Forge fetches the page, extracts content, and generates a structured analysis of the business.
3. Build a concept — AI generates a product idea with positioning, features, and a live React landing page.
4. Refine via chat — Ask questions, request changes to the code or concept. The AI applies edits and the preview updates live.

Environment Variables

Variable	Required	Description
NEXT_PUBLIC_SUPABASE_URL	Yes	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Yes	Supabase anonymous key
SUPABASE_SERVICE_ROLE_KEY	Yes	Supabase service role key
OPENROUTER_API_KEY	Yes	OpenRouter API key for AI models

---

AI Models Used

• Primary model: [your default model, e.g. Gemini 3.7 Flash] via OpenRouter — used for website analysis, concept + code generation, and chat refinement.
• QA pass: a faster model (Claude Hiaku), used separately to validate and auto-correct generated code before it's rendered.
• Optional models: users can switch to any model from listed OpenRouter models; the app automatically falls back to the primary model if a selected model errors or rate-limits.

Deployment

Deployed on Vercel (https://9o-code.vercel.app/). To deploy your own instance:

1. Push the repo to GitHub.
2. Import it into Vercel.
3. Add the four environment variables (above) in the Vercel project settings.
4. Run the Supabase migrations against your production project (npx supabase db push, or paste the SQL from supabase/migrations/ into the Supabase dashboard).
5. Deploy.

Known Limitations

• Generated landing page code is a single self-contained React component — no multi-page generation or real backend logic inside generated code.
• Live preview renders one page (the landing page) at a time, not the full proposed page structure.
• Website analysis fetches raw HTML first and falls back to a JS-rendering proxy (r.jina.ai) for client-side React/SPA sites; sites that block both will still fail to analyze correctly.
• Embedding the original site (Original tab) doesn't work for sites that set restrictive X-Frame-Options/CSP headers — these show a fallback link instead.

Full development process, AI prompt log, and debugging writeups: [link].

License

MIT