Skip to content
cuttlekit

Introduction

cuttlekit is a generative UI toolkit that turns natural language into fully interactive user interfaces. Describe what you need, and an LLM builds it — live in your browser, no code required on your end.

No templates. No generated JavaScript. No framework lock-in. Just working HTML + CSS streaming to the browser in real-time.

What can it do?

  • 💬 Describe → UI — say what you want, get a working interface
  • ⚡ Real-time streaming — watch it build live in the browser
  • 🖱️ Fully interactive — buttons, forms, drag & drop — all work
  • 🔄 Iterate by talking — refine by describing changes
  • 🔌 API integrations — connect to Linear, Notion, and more
  • 🤖 Multi-model — Gemini, Groq, or any OpenAI-compatible provider
  • 🧠 Memory — remembers past interactions across sessions

How it works

YOU
”build me a sales dashboard”
TYPECLICKDRAG
PROMPT
HTML
ACTION
AI
generates a working UI
HTMLCSSLIVE
the loop keeps going — you refine, the AI adapts

Every click, form submission, or drag action is sent to the server. The LLM sees the current page state and generates minimal CSS-selector patches — no full-page re-renders for small changes.

Quick start

Running locally

Terminal window
git clone https://github.com/betalyra/cuttlekit.git
cd cuttlekit
pnpm install

Configure your environment:

Terminal window
cp .env.example .env              # add your API keys
cp config.example.toml config.toml

You’ll need at least one model provider API key in .env. The easiest way to get started is with Google AI Studio — the Gemini API is free to use.

Then start both servers:

Terminal window
pnpm run dev:backend    # terminal 1
pnpm run dev:webpage    # terminal 2

Open http://localhost:5173 and start describing UIs.

Running with Docker

Terminal window
git clone https://github.com/betalyra/cuttlekit.git
cd cuttlekit
cp .env.example .env              # add your API keys
cp config.example.toml config.toml
docker compose up --build

Open http://localhost:34513 and you’re ready to go.