AI & MCP, on your terms

Bring your own model, connect any MCP client, and push code from anywhere — with design systems the AI actually honours.

AI

Your AI.
Your rules.

Connect Claude, GPT or Gemini with your own API key. The AI has full project context and works in a continuous agentic loop — reading your code, making targeted edits, checking for errors, and iterating until it's right.

  • Your key, your cost — no subscription markup
  • Agentic loop: reads, edits, checks errors, iterates
  • Web search, screenshots, and one-click rewind
  • Or connect Claude Code / Cursor via MCP — same result
  • Ask for 3 designs — each one streams into a live picker as it builds
Try now
MCP

Connect AI agents to the editor

Blnq exposes an MCP endpoint that lets AI agents read, write, and manage your project in real time. Claude, Cursor, Windsurf, or any MCP-compatible client can connect. See the full tool specification for details.

Connect in 3 steps

  1. Open an editor tab at blnq.studio/e and click Start MCP in the header. Your MCP ID copies to the clipboard. If the button isn't lit, agents see an empty project.
  2. Add blnq to your AI client. Pick a snippet below.
  3. Just start prompting — "using blnq, build me X". The agent will ask for your MCP ID the first time it needs it; paste it then. Or hand it over upfront if you prefer.

Claude Code — one command:

claude mcp add --transport http blnq https://blnq.studio/mcp

Claude Desktop, Cursor, Windsurf — drop this into your MCP config file (path varies by app):

{
  "mcpServers": {
    "blnq": {
      "type": "http",
      "url": "https://blnq.studio/mcp"
    }
  }
}

Any other MCP-compatible client works too — blnq speaks the standard Streamable HTTP transport. See the full per-client setup guide for exact config paths and fallbacks.

Then just ask — once the agent has your ID, prompt it like any other tool:

Using blnq, build me a one-page portfolio:
sticky nav, hero with my name, three project
cards, contact section. Dark theme, no AI blue.

Treat the MCP ID as a credential. Anyone with it can read and write your project while the tab is open. Close the tab to revoke; the ID is freed after a short grace period so brief network blips (wifi → LTE, sleep/wake) survive.

What agents can do

Once connected, AI agents can interact with your project in real time:

Read code See line-numbered content from every file in your project
Write and edit live Replace files or make targeted edits by line range — changes appear instantly
Search across files Find text or regex patterns across all project files with line numbers
Check the preview Catch JS errors and accessibility violations in one call after every change
Inspect project Project name, ID, and file list with line counts — plan before reading
DESIGN.md

Design systems your AI respects

Blnq supports Google Labs' DESIGN.md format — one file at the project root that declares your palette, typography, spacing, and radii as YAML tokens. Drop it in and blnq auto-compiles the tokens into CSS custom properties on :root, injects them into the preview, and tells the AI what's in the palette so it references var(--color-primary) instead of inventing hex codes.

A DESIGN.md at the root

YAML frontmatter between --- fences. Blocks for colors, typography, spacing, rounded. A markdown body for rationale.

---
name: Heritage
colors:
  primary: "#1A1C1E"
  accent: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
  body:
    fontFamily: Public Sans
    fontSize: 1rem
spacing:
  sm: 8px
  md: 16px
  lg: 32px
rounded:
  sm: 4px
  md: 8px
---

## Overview
Editorial gravitas — typography-led,
restrained palette, generous whitespace.

Ask the AI to "set up a design system" and it creates the file for you. Edit colours visually from the palette swatches in the file explorer.

What blnq does with it

Everything below happens automatically the moment the file exists — no build step, no imports, no configuration.

Auto-compiled CSS variables Tokens become --color-primary, --spacing-md, --radius-sm, --type-h1-font-size on :root — use them directly in any CSS file
Palette editor in the sidebar Every colour becomes a clickable swatch — native colour picker writes the new hex back to DESIGN.md and the preview restyles live
AI honours the palette The token manifest is injected into the AI system prompt — it references var(--color-*) instead of inventing hex codes, and adds new tokens to DESIGN.md when it needs them
Drift lint in check_preview Flags any hex or font-family in your CSS that isn't in the token set, alongside JS errors and a11y violations
API

Push code from anywhere

Send files to the editor with a single POST — useful for CLI tools, browser extensions, or any workflow that generates code. The response loads your files straight into a live editor tab.

POST /api/push

Post a payload form field (or JSON body) with a files array — the browser lands in the editor with the code loaded.

const f = document.createElement('form');
f.action = 'https://blnq.studio/api/push';
f.method = 'post';
const i = document.createElement('input');
i.type = 'hidden';
i.name = 'payload';
i.value = JSON.stringify({
  name: 'My Project',
  files: [
    { filename: '/index.html', content: '<h1>Hello</h1>' },
    { filename: '/style.css', content: 'h1 { color: tomato; }' }
  ]
});
f.appendChild(i);
document.body.appendChild(f);
f.submit();

GET /api/projects/:id/code

Retrieve a project's files as JSON — returns id, name, and a files array of { filename, content } objects.

https://blnq.studio/api/projects/YOUR_PROJECT_ID/code