Skip to main content
Glama

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

  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.

Related MCP server: design-copier

Install

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

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, which keeps up with where each agent stores its servers and in which format.

Non-interactive, for a scripted setup:

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.

Claude Code

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)

{
  "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:

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

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.

License

MIT — see LICENSE. That covers this documentation. The DivMagic service itself is governed by its terms.

Related MCP Connectors

Related MCP Servers