An open-source agentic design workspace with any model you want.
laude-design.com · Self-host in 60 seconds
Laude Design pairs a chat interface with a live Sandpack canvas. You describe what you want, the AI writes React + Tailwind code, and you see it rendered immediately. No copy-pasting between tools.
Bring your own Claude, OpenAI, or Gemini key. No subscription stacked on top of your API bill.
Skills let you give the AI reusable context: think of them as persistent system prompt additions you can toggle per project. The public library has community-contributed skills you can clone and adapt.
Highlight the UI so the agent knows which exact component you are referring to.
Self-critique mode lets the AI screenshot its own Sandpack output and use that image as visual feedback before the next edit. It sees what you see.
Draw on the canvas and send your sketch directly to the model. Good for rough layout direction when words aren't enough.
Clarifying questions and design plans keep longer builds organized. The AI asks before it assumes, and creates a checklist it works through step by step.
Export finished work as an image, a code prompt, or a ZIP, ready to hand off to another tool or agent.
Cost tracking at the bottom left allows you to see how much tokens and money have spent so far, so you don't go too far.
TODO: Image generation, allow users to upload image, tagging, create other sorts of documents (e.g slidedeck), add design systems, ask agent to turn something into skills
The AI screenshots its own Sandpack output and uses that image as visual feedback before committing the next edit. It sees what you see — no more guessing whether the rendered result matches the intent.
demo.with.self-critique.mp4
A walkthrough of the agent's built-in tool suite: createDesign, editDesign, screenshotDesign, planDesign, drawing support, and more. Each tool maps to a deliberate step in the design-build loop.
tool.showcase.mp4
Bring your own Claude, OpenAI, or Gemini key and switch models from the composer at any time. No subscription stacked on top of your API bill — you pay only what the provider charges.
use.your.favorite.model.mp4
Per-token cost tracking in the session usage popover tells you exactly how much input, output, and cache tokens each session consumed — and what it cost — so you stay in control of your API spend.
accurate.billing.mp4
Export finished work as an image snapshot, a raw code prompt, or a ZIP archive. Hand off to another tool, a different agent, or drop straight into your repo.
export.mp4
Skills are persistent system-prompt additions you toggle per project. Upload your own to encode design system conventions, component patterns, or any reusable context the AI should always have on hand.
upload.your.own.skills.mp4
When you save a key it is encrypted with AES-256-GCM before it is written to the database. The encryption secret (ENCRYPTION_KEY in your .env) is a 32-byte value held outside the application database — a full database compromise reveals only ciphertext, not plaintext keys.
On each chat request the ciphertext is fetched and decrypted in memory for the duration of the outbound call to the provider, then discarded. The plaintext key is never written to disk, never logged, and never returned to the browser — the API exposes only the last four characters of each key as a display hint (e.g. …k3bP), plus an optional expiry timestamp.
You can set keys to auto-expire after 7, 14, or 30 days, or keep them indefinitely. Expired keys are hard-deleted from the database on your next visit; rotating a key overwrites the previous ciphertext immediately.
A strict Content-Security-Policy is set on every response (see src/middleware.ts) — connect-src 'self' plus script-src 'strict-dynamic' with a per-request nonce — so even a successful XSS attack cannot exfiltrate key material to an outside origin.
I recommend you self-host or just run this project locally if you do not trust laude-design.com
Best practice: create a dedicated key for this app at each provider and revoke it if anything looks off. DO NOT USE YOUR COMPANY's API KEY, USE A PERSONAL API KEY!
- Next.js 15 (App Router, RSC + Server Actions, TypeScript)
- Auth.js v5 (NextAuth) with Google + GitHub OAuth
- Prisma + Postgres 16
- Tailwind CSS + shadcn/ui components in
src/components/ui/ - Sandpack for the live React canvas
- Zustand for client UI state
- Zod + react-hook-form for validation
Make sure Docker Desktop is running, then:
pnpm install
pnpm devpnpm dev (scripts/dev.mjs) handles everything:
- Checks that Docker is reachable
- Creates
.envfrom.env.exampleif it's missing, and auto-generatesAUTH_SECRETandENCRYPTION_KEY - Runs
docker compose up -d --wait dbto start Postgres 16 - Runs
prisma migrate deploy - Starts Next.js on http://localhost:3000
Ctrl+C stops the dev server. Postgres keeps running so the next pnpm dev starts instantly. Stop it with pnpm db:down when you're done for the day.
You need to fill these in before sign-in works:
AUTH_GOOGLE_ID/AUTH_GOOGLE_SECRETfrom Google Cloud Console. Redirect URI:http://localhost:3000/api/auth/callback/googleAUTH_GITHUB_ID/AUTH_GITHUB_SECRETfrom GitHub Developer settings. Callback URL:http://localhost:3000/api/auth/callback/github
pnpm dev will warn you if any of these are missing.
| Command | What it does |
|---|---|
pnpm dev |
Docker + Postgres + migrations + Next.js dev, all at once |
pnpm dev:next |
Just next dev (use when the DB is already up) |
pnpm db:up |
Start Postgres in Docker, wait for healthy |
pnpm db:down |
Stop and remove the Postgres container |
pnpm prisma:migrate |
prisma migrate dev for new schema changes |
pnpm prisma:studio |
Open Prisma Studio |
pnpm build |
Production build (prisma generate && next build) |
pnpm start |
Run the production server |
pnpm typecheck |
tsc --noEmit |
docker compose up --buildBrings up db (Postgres) and app (Next.js production build) together.