Blobby

Contents

Why Blobby · Quick start · Connect your AI · Features · Tech stack · How it works · MCP tools · Develop · Troubleshooting · Roadmap · FAQ

Related MCP server: figma-dev-tools

Why Blobby

• Your AI, not ours. Blobby has no built-in model, no account and no API key. It's an MCP server plus a canvas, so it works with the AI you already use.

• Real code, not pictures. Every design is a plain HTML page with CSS. What you see is what you export.

• Feedback loop built in. Select an element, press C, type what should change. Tell your AI "Apply my Blobby feedback" and it makes the change, checks it, and replies in the thread.

• Not random. The AI follows a set workflow: study the real site, write a brief, build section by section, then run automated QA on every artboard until it passes.

• Local and private. Projects are plain folders in ~/Blobby. Nothing leaves your computer.

Quick start

Requirements: Node.js 20.17+ (22 recommended) and Git. Works on macOS (tested). Windows and Linux are supported but not tested yet; please open an issue if something breaks.

git clone https://github.com/Ravindrabisht12/blobby.git
cd blobby
npm install      # also downloads Electron (~100 MB)
npm start

Then:

1. Click Connect AI and pick your app (Claude, Cursor, Codex, VS Code…). Follow the three steps.

2. Restart your AI app if it was open.

3. Ask it:

   Create a landing page for acme.com in Blobby

Watch it build on the canvas. If you don't name a project, Blobby asks your AI which one to use, or creates one.

Connect your AI

On macOS:

{
  "mcpServers": {
    "blobby": {
      "command": "/path/to/blobby/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron",
      "args": ["/path/to/blobby/src/mcp/server.js"],
      "env": { "ELECTRON_RUN_AS_NODE": "1" }
    }
  }
}

On Windows the command is ...\blobby\node_modules\electron\dist\electron.exe (use \\ between folders inside JSON). The exact command for your machine is in Connect AI → Other agents. The MCP server starts the app if it isn't running.

ChatGPT only connects to servers on the internet, so it can't reach a local app directly. Codex works locally today.

Prompts to try

• Create a landing page for stripe.com in Blobby, matching their brand

• Make a pricing page in my Acme project with three plans

• Apply my Blobby feedback

• Export the landing page from Blobby

Features

Press ⌘/ in the app for all keyboard shortcuts. On Windows and Linux, use Ctrl for ⌘ and Alt for ⌥; the app shows the right keys for your system.

Tech stack

Three runtime dependencies in total: the MCP SDK, linkedom and Zod.

How it works

 Your AI app (Claude, Cursor, Codex…)
        │  MCP (stdio or HTTP)
        ▼
 Blobby MCP server ──── writes ────▶ ~/Blobby/<project>/pages/*.html
        │                                      │
        │  local bridge (screenshots,          │  file watcher
        │  QA, current selection)              ▼
        └──────────────────────────▶ Blobby app: canvas reloads live

1. Your AI calls tools like create_page, write_html and update_styles. Every element gets a stable data-b-id, so edits are precise.

2. The app watches the folder and reloads the artboards, so you see each change as it happens.

3. For get_screenshot and qa_check, the MCP server asks the running app to render the page in hidden windows at each device width and run checks inside the page.

4. Your comments are saved next to the page, so get_feedback gives the AI the element, your words and a screenshot.

A project on disk:

~/Blobby/acme/
  project.json        name, site, brand tokens
  pages/landing.html  the design
  assets/             images
  feedback.json       comments and replies
  briefs/             what each page is for
  .history/           undo snapshots

MCP tools

28 tools and 2 prompts. The server also sends your AI a step-by-step design workflow, so results are consistent.

Develop

npm start            # run the app
npm test             # MCP smoke test over stdio (temp folder)
npm run test:ui      # drives the real app with Playwright (temp folder; never touches ~/Blobby)

There's no build step: edit a file in src/renderer/ and reload the window (⌘R). Changes in src/main/ need a restart. See CONTRIBUTING.md.

Troubleshooting

Run npm install again (it's often a network hiccup). Behind a proxy, set ELECTRON_MIRROR. Make sure you're on Node 20 or newer: node -v.

Restart the AI app after connecting. Most apps only read MCP settings at startup. In Connect AI, a green dot next to Claude or Claude Code means the config was written.

Another program is using the port. Start Blobby with BLOBBY_MCP_PORT=7790 npm start, then copy the new URL from Connect AI.

npm install turns the local copy of Electron into Blobby.app, and npm start launches it from there. If the Dock still says Electron, run node scripts/brand-electron.mjs, quit the app (⌘Q) and run npm start again. If an old Dock icon is pinned, remove it and pin the new one.

With stdio setups the MCP server starts the app for you. With the HTTP URL, keep Blobby open while you work.

Roadmap

• Breakpoint-specific edits in the design panel

• Redo

• Component library and reusable sections

• Figma and React exports

• Packaged installers

Ideas welcome: open an issue.

FAQ

Does Blobby cost anything or need an API key? No. It uses the AI app you already have.

Which AI works best? Any model that's good at front-end code. Claude and Codex give strong results with the built-in QA loop.

Can I edit the files directly? Yes. They're plain HTML and JSON in ~/Blobby, and the canvas updates when they change.

Can I use the export in production? Yes. It's standard HTML and CSS with no runtime, so you can drop it into any site or framework.

Contributing

Issues and pull requests are welcome. See CONTRIBUTING.md. This is a side project, so replies may take a while.

License

MIT © Ravindra Bisht. Icons from Lucide (ISC). App logos in Connect AI from Simple Icons (CC0); those marks belong to their owners and are shown only to indicate compatibility.