> For the complete documentation index, see [llms.txt](https://docs.divmagic.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.divmagic.com/mcp/introduction.md).

# Introduction

Copy any component from a live web page as clean HTML or JSX — from inside your AI agent.

DivMagic MCP is a remote [Model Context Protocol](https://modelcontextprotocol.io) server. Once it is connected, your agent can copy designs from real web pages and read and write your DivMagic library, without you leaving the editor.

It works the same way the DivMagic extension does: the page is opened in a real browser and what it **renders** is converted. That is the difference from fetching HTML — the output carries the computed styles 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 …">…</section>
```

### What you can do

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Copy a page</strong></td><td>Render any public URL and get back HTML or JSX, styled with Tailwind classes, inline styles, or a stylesheet.</td><td></td></tr><tr><td><strong>Read your library</strong></td><td>List and read the designs already saved from the extension, Studio, or the dashboard.</td><td></td></tr><tr><td><strong>Save to your library</strong></td><td>File a copy — or markup the agent wrote — into the same library everything else lives in.</td><td></td></tr></tbody></table>

### Endpoint

| Setting        | Value                                  |
| -------------- | -------------------------------------- |
| URL            | `https://api.divmagic.com/v1/mcp`      |
| Transport      | Streamable HTTP                        |
| Authentication | `Authorization: Bearer <your MCP key>` |

### Is this the same as the API?

No. They are separate products with separate keys and separate credits.

|                | REST API      | MCP                 |
| -------------- | ------------- | ------------------- |
| Called by      | Your own code | Your AI agent       |
| Key            | API key       | MCP key (`dvmcp_…`) |
| Credits        | API credits   | MCP credits         |
| Library access | No            | Yes                 |

An API key will not authenticate against the MCP endpoint, and API credits are not spent by MCP calls.

### Next

{% content-ref url="/pages/o22qsnCAyvuLkSHYp6MJ" %}
[Getting started](/mcp/getting-started.md)
{% endcontent-ref %}

{% content-ref url="/pages/pSgQSIbyjrriCKphsmLs" %}
[Tools](/mcp/tools.md)
{% endcontent-ref %}