# DivMagic MCP

Copy any component from a live web page as clean, self-contained HTML or JSX — from inside your agent.

DivMagic opens the page in a real browser and converts what it *renders*. That is the difference from fetching HTML: the output carries the computed styles, the resolved layout, and the markup the page actually produced, not the template it shipped.

```
You:   copy the pricing table from stripe.com/pricing as JSX with tailwind
Agent: → copy_component_from_url
       ← <section className="flex flex-col gap-8 …">…</section>
```

> **Public beta.** The endpoint below is the beta service. Expect the address to change when this leaves beta.

## Get a key

1. Sign in at [dev.divmagic.com/dashboard](https://dev.divmagic.com/dashboard)
2. Open **MCP** and choose **Create key**
3. Copy it straight away

Keys look like `dvmcp_…`, and are shown once. Nothing stored on our side can reproduce one — losing a key means issuing a new one, which immediately revokes the old.

## Install

One command, and it sets up the coding agents on your machine:

```bash
npx divmagic-mcp
```

It asks for your key, checks it against the server before touching anything, shows which agents it found, and writes only the ones you pick.

```
Checking the key… works.  (copy_component_from_url, get_component_result)

Found 3 on this machine. Which should get DivMagic?
  1. Claude Code
  2. Cursor
  3. VS Code

Which? (numbers separated by commas, or "all") all
```

Twenty-two agents are supported — Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Codex, Zed, Goose, Gemini CLI, Cline, OpenCode, Kiro, Grok Build and more. Run `npx divmagic-mcp --help` for the full list. The config writing is handled by [add-mcp](https://github.com/neon-solutions/add-mcp), which keeps up with where each agent stores its servers and in which format.

Non-interactive, for a scripted setup:

```bash
npx divmagic-mcp --key dvmcp_YOUR_KEY -a cursor -a claude-code -y
```

Restart any agent it changed — none of them reread their config while running.

<details>
<summary>Or configure it by hand</summary>

**Claude Code**

```bash
claude mcp add --transport http divmagic https://api.dev.divmagic.com/v1/mcp \
  --header "Authorization: Bearer dvmcp_YOUR_KEY"
```

**Cursor** (`~/.cursor/mcp.json`), **VS Code** (`.vscode/mcp.json`), **Windsurf** (`~/.codeium/windsurf/mcp_config.json`)

```json
{
  "mcpServers": {
    "divmagic": {
      "url": "https://api.dev.divmagic.com/v1/mcp",
      "headers": { "Authorization": "Bearer dvmcp_YOUR_KEY" }
    }
  }
}
```

**Claude Desktop** — its connector screen expects OAuth and has nowhere to put a key, so bridge it through stdio:

```json
{
  "mcpServers": {
    "divmagic": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://api.dev.divmagic.com/v1/mcp",
        "--header", "Authorization: Bearer dvmcp_YOUR_KEY"
      ]
    }
  }
}
```

</details>

The installer only edits config files — there is no DivMagic software running on your machine. The server runs on our side; your agent talks to it over HTTPS.

## Tools

### `copy_component_from_url`

Renders a page and returns its markup.

| Parameter | Type | Default | |
|---|---|---|---|
| `url` | string | — | The page to copy. A bare host works: `stripe.com/pricing`. |
| `componentFormat` | `html` \| `jsx` | `html` | Output language. |
| `styleFormat` | `inline` \| `tailwind` \| `local` \| `external` | `tailwind` | How styling is emitted. |
| `refresh` | boolean | `false` | Render the page again instead of reusing a recent copy. Costs a credit. |

A copy usually takes 10–30 seconds. If it has not finished in about twenty, you get a job id rather than markup — the work carries on, and `get_component_result` collects it.

### `get_component_result`

Collects a copy that was still running, and reads a large one in pieces.

| Parameter | Type | |
|---|---|---|
| `jobId` | string | The id `copy_component_from_url` gave you. |
| `offset` | integer | Byte offset to read from. Omit for the whole result. |
| `maxBytes` | integer | Bytes per piece, up to 256 KB. |

Polling costs nothing.

## How it behaves

**Large results.** Anything over 256 KB is not returned inline — a reply that size costs an agent more context than the answer is worth. Instead you get the exact size, a download link good for an hour, and the option to read the markup in pieces by `offset`. Truncated markup is never returned silently: half a document reads as a whole one, and gets pasted as one.

**Caching.** A rendered copy is reused for 24 hours, including when someone else asked for that page first. These are renders of public pages — the same URL rendered the same way produces the same markup whoever requests it, so rendering it twice would only be slower. Pass `refresh: true` when a page has changed.

**Credits.** One credit per copy you receive, whether it was rendered for you or served from a recent render. A copy that fails costs nothing. Polling costs nothing. Asking again for a page you already copied, without `refresh`, still costs a credit — you are paying for the markup, not for the browser time.

**Limits.** A page gets 60 seconds to render. Pages behind a login, or that block automated browsers, will not copy.

## Troubleshooting

**`401` "Send your DivMagic MCP key"** — the `Authorization` header is not reaching us. In most clients this means the header block sits in the wrong place in the config file.

**`401` "This MCP key is not valid"** — the key was revoked, most often by issuing a new one. Create another in the dashboard.

**"Your MCP quota is exhausted"** — top up in the dashboard.

**"The attempt on this job stopped without finishing"** — a render died partway. Call `copy_component_from_url` again with the same arguments; it starts a fresh attempt.

## Support

A page that copied badly: open an issue with the URL and the options you asked for.

Account, billing and key questions: [divmagic.com](https://divmagic.com).

## License

MIT — see [LICENSE](LICENSE). That covers this documentation. The DivMagic service itself is governed by its [terms](https://divmagic.com/terms).