Draftly MCP Server

Connect your AI assistant straight to Draftly.

Draftly speaks MCP (Model Context Protocol) — an open standard, not tied to any one AI. Connect Claude Code, Cursor, Windsurf, Gemini CLI, or any MCP-compatible client, and your assistant can generate immersive sites, create images and video, edit projects, and publish live to your subdomain — all from your own chat.

1Get your API key

MCP access requires a Draftly account on the Pro plan or above. Generate a key from your Settings page — it’s shown once, so copy it immediately. You can revoke a key any time from the same page.

Keys are stored as one-way hashes — Draftly never sees or stores the raw key after it’s issued. Treat it like a password: anyone with your key can act on your account (spending your credits).

2Connect your client

The Draftly MCP server is a standard remote HTTP endpoint — it works with any client that supports Streamable-HTTP MCP servers with a custom auth header. Pick yours below.

Claude Code

Generate a Draftly API key from your Settings page, then run:

claude mcp add --transport http draftly https://www.draftly.space/api/mcp --header "Authorization: Bearer dfk_YOUR_KEY_HERE"

That’s it — ask Claude Code things like "check my Draftly credits" or "generate a Draftly site for a coffee brand and publish it."

Cursor

Open Cursor Settings → MCP → Add new MCP server, and add this to your mcp.json:

{
  "mcpServers": {
    "draftly": {
      "url": "https://www.draftly.space/api/mcp",
      "headers": {
        "Authorization": "Bearer dfk_YOUR_KEY_HERE"
      }
    }
  }
}

Save, then enable the Draftly server in the MCP panel. Cursor’s agent can now call Draftly tools directly in chat.

Windsurf

Open Windsurf Settings → Cascade → MCP Servers → Add server, and use this config:

{
  "mcpServers": {
    "draftly": {
      "serverUrl": "https://www.draftly.space/api/mcp",
      "headers": {
        "Authorization": "Bearer dfk_YOUR_KEY_HERE"
      }
    }
  }
}

Refresh the MCP server list — Cascade will pick up all 10 Draftly tools automatically.

Gemini CLI

Add Draftly to your Gemini CLI settings.json under mcpServers:

{
  "mcpServers": {
    "draftly": {
      "httpUrl": "https://www.draftly.space/api/mcp",
      "headers": {
        "Authorization": "Bearer dfk_YOUR_KEY_HERE"
      }
    }
  }
}

Restart the CLI, then run /mcp to confirm Draftly is connected.

Other / Generic

Any MCP client that supports remote Streamable-HTTP servers with custom request headers will work. Point it at:

https://www.draftly.space/api/mcp

And send your key as a standard bearer header on every request:

Authorization: Bearer dfk_YOUR_KEY_HERE

3What your assistant can do

10 tools cover the full loop — from a blank brief to a live site. Generation tools show you a free credit quote first; nothing spends until you (or your assistant, on your instruction) confirms.

ToolCostWhat it does
draftly_get_creditsFreeCheck your credit balance, plan, and live-site capacity.
draftly_list_projectsFreeList your Draftly projects (id, name, published URL).
draftly_get_projectFreeLoad a project’s metadata, or page through its saved HTML.
draftly_get_html_guideFreeThe full authoring contract — motion system, background-plate rules, form/auth hooks — for hand-writing Draftly-compatible HTML.
draftly_generate_image25 creditsGenerate a cinematic reference or hero image.
draftly_generate_video34 credits / secGenerate a cinematic background video from reference images.
draftly_generate_site228 creditsGenerate a complete immersive site with Draftly’s own pipeline.
draftly_edit_site75 creditsEdit an existing project with an instruction — copy, style, layout tweaks.
draftly_host_assetsFreeHost your own images/logos and get back https URLs to use in a site.
draftly_publish_siteFreePublish a project — or your own hand-written HTML — live at yourslug.draftly.space.

Bring your own model

Prefer to have your own Claude, GPT, or Gemini write the site HTML directly, and just use Draftly for media generation and hosting? That works too — skip draftly_generate_site entirely.

  1. Call draftly_get_html_guide first — it returns the authoring contract (motion attributes, background-plate rules, form/auth hooks) your assistant needs to follow so the site renders correctly.
  2. Use draftly_generate_image / draftly_host_assets for any media.
  3. Publish the hand-written HTML with draftly_publish_site — it’s automatically validated and sanitized server-side before going live.

Ready to connect?

Generate your API key