divmagic-mcp 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DivMagic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# 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>
+```
+
+## Get a key
+
+1. Sign in at [divmagic.com/dashboard](https://divmagic.com/dashboard)
+2. Open **MCP** and choose **Create key**
+3. Copy it straight away
+
+Keys look like `dvmcp_…`, and are shown once. Losing a key means issuing a new one, which immediately revokes the old.
+
+## Install
+
+```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. Run `npx divmagic-mcp --help` for the list.
+
+```bash
+npx divmagic-mcp --key dvmcp_YOUR_KEY -a cursor -a claude-code -y
+```
+
+Restart any agent it changed.
+
+<details>
+<summary>Or configure it by hand</summary>
+
+**Claude Code**
+
+```bash
+claude mcp add --transport http divmagic https://api.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.divmagic.com/v1/mcp",
+      "headers": { "Authorization": "Bearer dvmcp_YOUR_KEY" }
+    }
+  }
+}
+```
+
+**Claude Desktop**
+
+```json
+{
+  "mcpServers": {
+    "divmagic": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://api.divmagic.com/v1/mcp",
+        "--header", "Authorization: Bearer dvmcp_YOUR_KEY"
+      ]
+    }
+  }
+}
+```
+
+</details>
+
+## Tools
+
+### `copy_component_from_url`
+
+| 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 — `get_component_result` collects it.
+
+### `get_component_result`
+
+| Parameter | Type | |
+|---|---|---|
+| `jobId` | string | The id `copy_component_from_url` gave you. |
+| `offset` | integer | Byte offset. Omit for the whole result. |
+| `maxBytes` | integer | Bytes per piece, up to 256 KB. |
+
+Polling costs nothing.
+
+## How it behaves
+
+**Large results.** Over 256 KB is not returned inline. You get the size, a download link valid for an hour, and the option to read by `offset`.
+
+**Caching.** A rendered copy is reused for 24 hours. Pass `refresh: true` when a page has changed.
+
+**Credits.** One credit per copy you receive. A failed copy costs nothing. Polling costs nothing.
+
+**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.
+
+**`401` "This MCP key is not valid"** — the key was revoked. Create another in the dashboard.
+
+**"Your MCP quota is exhausted"** — top up in the dashboard.
+
+**"The attempt on this job stopped without finishing"** — call `copy_component_from_url` again with the same arguments.
+
+## Support
+
+A page that copied badly: [open an issue](https://github.com/DivMagicCom/mcp/issues).
+
+Account, billing and key questions: [divmagic.com](https://divmagic.com).
+
+## License
+
+MIT — see [LICENSE](LICENSE). The DivMagic service is governed by its [terms](https://divmagic.com/terms).

package/bin/divmagic-mcp.js

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+import { agents, detectGlobalAgents, getAgentTypes, upsertServer } from 'add-mcp';
+
+import { verifyKey } from '../src/verify.js';
+import { ask, askSecret, choose, close, bold, dim, green, red, yellow } from '../src/prompt.js';
+
+const DEFAULT_ENDPOINT = 'https://api.divmagic.com/v1/mcp';
+const DASHBOARD = 'https://divmagic.com/dashboard';
+const SERVER_NAME = 'divmagic';
+
+function parseArgs(argv) {
+    const args = { agents: null };
+    for (let i = 0; i < argv.length; i++) {
+        const [flag, inline] = argv[i].split('=');
+        const value = () => inline ?? argv[++i];
+        if (flag === '--key') args.key = value();
+        else if (flag === '--endpoint') args.endpoint = value();
+        else if (flag === '--agent' || flag === '-a') (args.agents ||= []).push(value());
+        else if (flag === '--all') args.all = true;
+        else if (flag === '--yes' || flag === '-y') args.yes = true;
+        else if (flag === '--help' || flag === '-h') args.help = true;
+    }
+    return args;
+}
+
+function usage() {
+    console.log(`
+${bold('divmagic-mcp')} — install DivMagic into your coding agents
+
+  ${dim('$')} npx divmagic-mcp
+
+Options
+  --key <key>        Your DivMagic MCP key. Asked for if not given.
+  -a, --agent <id>   Install only to this agent. Repeatable.
+  --all              Install to every supported agent, not only those found.
+  -y, --yes          Take the detected agents without asking.
+  --endpoint <url>   Override the server address.
+  -h, --help         This.
+
+Supported agents (${getAgentTypes().length}):
+  ${getAgentTypes().join(', ')}
+
+Your key comes from ${DASHBOARD}
+`);
+}
+
+function label(agentType) {
+    return agents[agentType]?.displayName || agentType;
+}
+
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    if (args.help) return usage();
+
+    const endpoint = args.endpoint || DEFAULT_ENDPOINT;
+
+    console.log(`\n${bold('DivMagic')} — copy any component from a live web page, from inside your agent.\n`);
+
+    let key = args.key;
+    if (!key) {
+        console.log(`Create a key at ${bold(DASHBOARD)} — it is shown once, so copy it before leaving the page.\n`);
+        key = await askSecret('Paste your key: ');
+    }
+    if (!key) {
+        console.log(red('\nNo key given. Nothing was changed.'));
+        process.exitCode = 1;
+        return;
+    }
+
+    process.stdout.write('\nChecking the key… ');
+    const check = await verifyKey(endpoint, key);
+    if (!check.ok) {
+        console.log(red('no.'));
+        console.log(`\n${check.reason}`);
+        console.log(dim('Nothing was changed.'));
+        process.exitCode = 1;
+        return;
+    }
+    console.log(green('works.') + dim(`  (${check.tools.join(', ')})`));
+
+    const detected = await detectGlobalAgents();
+    let chosen;
+
+    if (args.agents) {
+        const known = getAgentTypes();
+        const unknown = args.agents.filter((a) => !known.includes(a));
+        if (unknown.length > 0) {
+            console.log(red(`\nNot an agent this knows about: ${unknown.join(', ')}`));
+            console.log(dim(`Try one of: ${known.join(', ')}`));
+            process.exitCode = 1;
+            return;
+        }
+        chosen = args.agents;
+    } else if (args.all) {
+        chosen = getAgentTypes();
+    } else if (detected.length === 0) {
+        console.log(yellow('\nNo supported agent found on this machine.'));
+        console.log(dim('Install one, or name it directly with --agent. See --help for the list.'));
+        process.exitCode = 1;
+        return;
+    } else if (args.yes) {
+        chosen = detected;
+    } else {
+        const picked = await choose(
+            `Found ${detected.length} on this machine. Which should get DivMagic?`,
+            detected.map((type) => ({ id: type, label: label(type) })),
+        );
+        if (picked.length === 0) {
+            console.log(dim('\nNothing chosen. Nothing was changed.'));
+            return;
+        }
+        chosen = picked.map((p) => p.id);
+    }
+
+    console.log('');
+    const serverConfig = { type: 'http', url: endpoint, headers: { Authorization: `Bearer ${key}` } };
+    let failures = 0;
+
+    for (const agentType of chosen) {
+        const result = upsertServer(agentType, SERVER_NAME, serverConfig, { local: false });
+        if (result.success) {
+            console.log(`  ${green('✓')} ${label(agentType)} ${dim(result.path)}`);
+            if (result.droppedFields?.length) {
+                console.log(`    ${yellow('!')} ${dim(`this agent ignores: ${result.droppedFields.join(', ')}`)}`);
+            }
+        } else {
+            failures++;
+            console.log(`  ${red('✗')} ${label(agentType)} — ${result.error || 'could not write its config'}`);
+        }
+    }
+
+    console.log(`\n${bold('Restart the agents you just changed')} — none of them reread their config while running.`);
+    console.log(`Then ask one to ${dim('"copy the pricing table from stripe.com/pricing as JSX"')}.\n`);
+    console.log(dim(`Server name: ${SERVER_NAME}    Endpoint: ${endpoint}`));
+
+    if (failures > 0) process.exitCode = 1;
+}
+
+main()
+    .catch((error) => {
+        console.error(red(`\n${error.message}`));
+        process.exitCode = 1;
+    })
+    .finally(close);

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "divmagic-mcp",
+  "version": "1.0.0",
+  "description": "Install the DivMagic MCP server into the agents you already use",
+  "bin": {
+    "divmagic-mcp": "bin/divmagic-mcp.js"
+  },
+  "type": "module",
+  "files": [
+    "bin",
+    "src",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "mcp",
+    "modelcontextprotocol",
+    "divmagic"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DivMagicCom/mcp.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DivMagicCom/mcp/issues"
+  },
+  "homepage": "https://divmagic.com",
+  "dependencies": {
+    "add-mcp": "^2.4.0"
+  }
+}

package/src/prompt.js

@@ -0,0 +1,57 @@
+import { createInterface } from 'node:readline/promises';
+import { stdin, stdout } from 'node:process';
+
+const ESC = '\u001b[';
+const wrap = (code, s) => `${ESC}${code}m${s}${ESC}0m`;
+
+export const bold = (s) => wrap(1, s);
+export const dim = (s) => wrap(2, s);
+export const green = (s) => wrap(32, s);
+export const red = (s) => wrap(31, s);
+export const yellow = (s) => wrap(33, s);
+
+let rl;
+function io() {
+    if (!rl) rl = createInterface({ input: stdin, output: stdout });
+    return rl;
+}
+
+export function close() {
+    if (rl) rl.close();
+    rl = undefined;
+}
+
+export async function ask(question) {
+    const answer = await io().question(question);
+    return answer.trim();
+}
+
+export async function askSecret(question) {
+    const answer = await io().question(question);
+    stdout.write(`${ESC}1A${ESC}2K${question}${dim('(hidden)')}\n`);
+    return answer.trim();
+}
+
+export async function choose(question, options) {
+    console.log('\n' + question);
+    options.forEach((option, i) => {
+        const note = option.note ? '  ' + dim(option.note) : '';
+        console.log(`  ${bold(String(i + 1))}. ${option.label}${note}`);
+    });
+
+    const raw = await ask(`\nWhich? ${dim('(numbers separated by commas, or "all")')} `);
+    if (!raw || raw.toLowerCase() === 'all') return options;
+
+    const picked = raw
+        .split(',')
+        .map((part) => parseInt(part.trim(), 10))
+        .filter((n) => n >= 1 && n <= options.length)
+        .map((n) => options[n - 1]);
+
+    return [...new Set(picked)];
+}
+
+export async function confirm(question) {
+    const answer = await ask(`${question} ${dim('(y/n)')} `);
+    return /^y(es)?$/i.test(answer);
+}

package/src/verify.js

@@ -0,0 +1,57 @@
+const LIST_TOOLS = {
+    jsonrpc: '2.0',
+    id: 1,
+    method: 'tools/list',
+    params: {},
+};
+
+function parseReply(body) {
+    const text = body.trim();
+    const payload = text.startsWith('event:') || text.startsWith('data:')
+        ? text
+              .split('\n')
+              .filter((line) => line.startsWith('data:'))
+              .map((line) => line.slice(5).trim())
+              .join('')
+        : text;
+    return JSON.parse(payload);
+}
+
+export async function verifyKey(endpoint, key) {
+    let response;
+    try {
+        response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json, text/event-stream',
+                Authorization: `Bearer ${key}`,
+            },
+            body: JSON.stringify(LIST_TOOLS),
+            signal: AbortSignal.timeout(20000),
+        });
+    } catch (error) {
+        return {
+            ok: false,
+            reason:
+                error.name === 'TimeoutError'
+                    ? 'The server did not answer in time. Check your connection and try again.'
+                    : `Could not reach ${endpoint}.`,
+        };
+    }
+
+    if (response.status === 401) {
+        return { ok: false, reason: 'That key was not accepted. Check it, or create a new one in the dashboard.' };
+    }
+    if (!response.ok) {
+        return { ok: false, reason: `The server answered ${response.status}.` };
+    }
+
+    try {
+        const message = parseReply(await response.text());
+        if (message.error) return { ok: false, reason: message.error.message || 'The server returned an error.' };
+        return { ok: true, tools: (message.result?.tools || []).map((tool) => tool.name) };
+    } catch {
+        return { ok: false, reason: 'The server’s reply could not be read.' };
+    }
+}