DivMagic MCP
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@DivMagic MCPcopy the pricing table from stripe.com/pricing as JSX with tailwind"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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
Sign in at dev.divmagic.com/dashboard
Open MCP and choose Create key
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-mcpIt 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") allTwenty-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 -yRestart 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 | |
| string | — | The page to copy. A bare host works: |
|
|
| Output language. |
|
|
| How styling is emitted. |
| boolean |
| 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 | |
| string | The id |
| integer | Byte offset to read from. Omit for the whole result. |
| 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.
This server cannot be deployed
Maintenance
Related MCP Connectors
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Headless browser primitives for AI agents when sites need real JS rendering.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides AI agents with deep visibility into a running web page's UI by capturing DOM, styles, and screenshots through a lightweight bookmarklet. It facilitates design-to-code comparisons, accessibility audits, and automated CSS debugging directly within an IDE.34 npm3MIT
- FlicenseAqualityDmaintenanceCaptures webpage styles and HTML, converts CSS to Tailwind, and applies extracted designs to frontend frameworks like React.34-
- AlicenseNot gradedqualityDmaintenanceEnables pixel-perfect website cloning from within the IDE by extracting real source code, styles, and assets, and assembling them into a React project with live preview.5MIT
- AlicenseAqualityAmaintenanceEnables AI agents to render and screenshot isolated UI components instantly across multiple browsers without a dev server or Storybook.22660 npm1MIT