Build, edit, ship & iterate your vibe-coded frontend.

SumCode is a visual editor for vibe-coded frontends. Your AI agent connects over MCP and writes real HTML, CSS and JavaScript that follows your design system. You fine-tune any element in the visual editor, then deploy to GitHub, Netlify or Bubble. Every change is versioned, so you can iterate safely.

MCP (Model Context Protocol) is the standard way AI agents plug into tools. SumCode runs an MCP server, so your agent can read, write, preview and version your projects directly instead of you copying code between windows.

Add https://mcp.sumcode.io to your agent as a connector or MCP server, then sign in with your SumCode account. From there, ask it to build something and the work appears in your SumCode workspace.

Any agent that speaks MCP, including Claude, Codex, Cursor, Antigravity and VS Code. If your agent supports custom MCP servers, it can work with SumCode.

Yes. Each connection is named after the agent and the person using it, like Claude · Sarah or Codex · John. Every version records who made it, so a team can mix agents on one project and still see exactly who changed what.

No. Your agent writes the code. You describe what you want, then use the visual editor for the small changes. A Claude or Codex subscription is all you need to start.

Select any element and use the inspector. Appearance covers type, colour and borders. Layout covers display, direction, size, padding and gap. Conditions show, hide or restyle an element based on data or state. Code lets you edit the element's code directly. Every change is written back into the code.

Your fonts, colours, spacing and radii live in SumCode as tokens. Your agent reads them before every change and uses them instead of hard-coded values, and edits are checked for colours that are not tokens. New work matches what you already have.

Yes. Save a header, a card or any block as a reusable, then place it on as many pages as you like. Edit the reusable once and every page that uses it updates.

Yes. The editor previews your page at desktop, tablet and phone widths, and you can adjust styles per breakpoint so each size looks right.

GitHub and Netlify publish straight from the editor. For Bubble, you copy the code and paste it into the free SumCode Connector plugin or an HTML element.

Connect your Netlify account and publish from the editor. Each project becomes a page on your site with a shared header and footer, and the output is static HTML that search engines can read.

Connect a repository and SumCode commits your site to it when you publish. The code lives in your repo, so you can review it, keep history and deploy it with your own pipeline.

Copy the latest version from the editor and paste it into the free SumCode Connector plugin, or into a Bubble HTML element. It runs inside your app as one native element.

Yes. SumCode's token bridge pipes live Bubble fields into your code with keys like [[plans]], and output values send data back to your Bubble workflows. The setup for each key is documented in the project.

No. Your agent follows SumCode's build rules for Bubble, which cover how Bubble renders and resizes elements, so your code behaves like a native part of the page at every width.

Nothing. Your data, workflows and hosting stay in Bubble. Your code reads and writes the same live data as the rest of your app.

Yes. Every save is a version, tagged with the agent and person who made it, and you can restore any one in a click. Agents take a snapshot before each change, so experimenting is never risky.

Each project keeps a technical document of how it works: its data inputs and outputs, the APIs it calls and how data flows through it. Your agent updates it as it builds, so the next person or agent can pick up where the last one left off.

SumCode is pay as you go, never a subscription. Every new account starts with 200 free credits, and you buy credit packs when you need more. One credit is one US cent, and every account gets every feature. See the Pricing page.