Blink

Turn a prompt, a screenshot, a whole screen flow, or a screen recording into a polished, self-contained web page — built by a team of AI agents running on Cerebras ultra-fast inference. A live tokens/sec gauge shows just how fast the model is working.

Built for the Cerebras hackathon. The whole point is to feel the speed: a multi-agent pipeline (director → planner → builder → critic → refiner) that would feel sluggish on typical inference runs in seconds here, with every token counted on screen.

What it does

• Prompt → full page. A Design Director agent expands a short prompt ("a landing page for a Framer competitor") into a complete creative brief — real copy, exact colors, typography, sections — then planner/builder/refiner agents implement it. No prompt-engineering required from the user.
• Clone a screenshot. Recreate any UI screenshot pixel-faithfully as a single self-contained HTML document (Tailwind via CDN, inline SVG icons, exact text).
• Clone a whole flow. Upload multiple screenshots (e.g. onboarding step 1/2/3) and clone every screen into one navigable document with scroll-snap and a dot navigator. Each screen is cloned in parallel.
• Build from a video. Drop a screen recording; an Animator agent studies the motion across frames and reproduces it with CSS animations.
• Variations. Generate N on-brand redesigns of a screenshot in parallel (with a critic polish pass). With multiple screenshots, it generates N variations per screen.
• Click-to-edit. Toggle Edit, hover any element in the preview, click it, and a popover offers quick actions (Remove, Duplicate, Push right, Make bigger) plus a free-text box ("change the background to red") that surgically edits just that element.
• Tweaks. A popover to refine the current design or spin variations from what's currently on screen.
• Live tokens/sec. A global gauge (bottom-right) shows real-time throughput for every inference, turning fiery above 1k tok/s.

How it works

The browser streams a request to a single SSE endpoint (/api/generate) that orchestrates the agents and streams every status, section, variant, and final document back as Server-Sent Events. Multiple agents (and multiple variants/screens) run through a bounded concurrency pool. All agents call Gemma on Cerebras through an OpenAI-compatible client.

prompt / image / video
        │
        ▼
  Design Director ──► Planner ──► Builder ──► Critic ⇄ Refiner ──► final HTML
        (all streamed over SSE; variants & screens fan out in parallel)

Key files:

• src/app/api/generate/route.ts — the SSE orchestrator and every mode (build, clone, multi-clone, variants, video, element-edit, …).
• src/lib/agents.ts — every agent's system prompt.
• src/lib/cerebras.ts — the Cerebras (OpenAI-compatible) client and the per-call tokens/sec reporter.
• src/lib/multimodal.ts — pure helpers (prompt builders, JSON/fence parsing, screen assembly). Unit-tested with Vitest.
• src/app/page.tsx — the two-column UI (agent activity + editor/preview).

Getting started

Requirements: Node 18+ and a Cerebras API key.

1. Install dependencies:

   npm install

2. Create .env.local in the project root:

   CEREBRAS_API_KEY=your_key_here
   CEREBRAS_BASE_URL=https://api.cerebras.ai/v1
   CEREBRAS_MODEL=gemma-4-31b

3. Run the dev server:

   npm run dev

   Open http://localhost:3000.

Optional: server-side screenshots for the critic

The critic can compare its output against a Chromium-rendered screenshot for higher fidelity, via Playwright. This is best-effort: if Chromium isn't available (e.g. on a serverless host), it automatically falls back to an in-browser snapshot, so the app works either way. To enable it on a server/container:

npx playwright install --with-deps chromium

Scripts

npm run dev     # start the dev server (Turbopack)
npm run build   # production build
npm run start   # serve the production build
npm run lint    # eslint
npx vitest run  # unit tests

Tech

Next.js 16 (App Router, Turbopack) · React 19 · TypeScript · Tailwind CSS v4 · OpenAI SDK pointed at Cerebras · Playwright (optional) · Vitest.