Credentials & Security

Dragble uses three separate credentials for MCP access. Understanding which to use where is critical: get it wrong and you'll either expose secrets or hit 401 errors.

The three keys

editor_key — browser-safe SDK credential

db_pxl81cxn92wignwx
└┬┘└──────────────┘
 │   16 random alphanumeric chars
 └── "db_" prefix

• Where you configure it: Once, at editor mount.

  <DragbleEditor editorKey="db_pxl81cxn92wignwx" />

• Where to find: Dashboard → Projects → {your project} → Editor Key

• Domain enforcement: Required. Must include an Origin header matching your allowed domains list.

• Exposed in browser: Yes (this is intentional)

• What it authenticates: Editor → Dragble server traffic, including loading the editor and the editor's internal calls when you invoke sdk.joinMCP({ id }) or sdk.startMCPPairing({ id }). You only pass id — the editor sends editor_key automatically.

• Permissions: Editor flows — load editor, create MCP session from browser, generate pairing codes

mcp_key — backend server-secret credential

db_mcp_A1b2C3d4E5f6G7h8I9j0K1l2
└────┘└──────────────────────┘
  │     24 random alphanumeric chars (mixed case)
  └── "db_mcp_" prefix

• Where to use: Your backend AI orchestrator and BYOI session lifecycle calls
• Where to find: Dashboard → Projects → {your project} → MCP Key → Backend MCP Key
• Domain enforcement: None (server-to-server credential)
• Exposed in browser: NEVER
• Permissions: Backend MCP access — create/manage sessions, force-disconnect sessions, and call tools with a frontend-created sessionId. Design tools still require a live editor session.

mcp_client_key — AI-client pairing credential

db_mcp_client_A1b2C3d4E5f6G7h8I9j0K1l2
└───────────┘└──────────────────────┘
     │        24 random alphanumeric chars (mixed case)
     └── "db_mcp_client_" prefix

• Where to use: Claude Code, OpenCode, Cursor, Codex, Continue, Zed, Claude Desktop, and other third-party MCP client configs
• Where to find: Dashboard → Projects → {your project} → MCP Key → Client MCP Pairing Key
• Domain enforcement: None (MCP client credential)
• Exposed in browser: NEVER
• Permissions: Pairing-only MCP client access — list tools, call pair_with_editor with an 8-digit code, then use tools only for that paired live editor session. It cannot create, destroy, or claim raw backend sessions.

Which credential goes where

The rule is simple:

You're doing this	Use this credential
Loading the editor in your SaaS frontend	editor_key (set once at mount)
Calling sdk.joinMCP({ id }) from the frontend	Nothing new — the editor uses its mounted editor_key automatically
Configuring OpenCode, Claude Code, Codex, Cursor, etc.	mcp_client_key
Running an AI orchestrator from your backend	mcp_key

Third-party AI clients need mcp_client_key. They reject editor_key, and the backend MCP key is reserved for server-side session lifecycle. This is by design: the editor key is browser-public, and the backend key can manage raw sessions. Third-party clients only get pairing-scoped access.

Backend AI orchestration should receive the live editor's sessionId from your frontend after sdk.joinMCP({ id }). Your backend then connects to MCP with mcp_key, injects that sessionId into each tool call, and MCP routes the call to the live editor.

Generating your MCP keys

1. Open the Dragble dashboard at https://developers.dragble.com
2. Click your project, then MCP Key in the sidebar
3. Generate the key you need:
   • Backend MCP Key for your own backend orchestration (db_mcp_...)
   • Client MCP Pairing Key for Claude/OpenCode/Cursor/Codex-style clients (db_mcp_client_...)
4. Copy it immediately — the dashboard shows it once, then masks the middle (you'll see db_mcp_••••••••••••••••••••l2K1l2)
5. Store backend keys in your backend's environment variables:

# .env on your backend (NEVER in frontend)
DRAGBLE_MCP_KEY=db_mcp_A1b2C3d4E5f6G7h8I9j0K1l2

For third-party MCP clients, use the client key in local client config:

DRAGBLE_MCP_CLIENT_KEY=db_mcp_client_A1b2C3d4E5f6G7h8I9j0K1l2

What you can do after generation

Button	Effect
Rotate	Issues a new key, invalidates the old one immediately. Backends or AI clients using the old matching key receive 401 until updated.
Revoke	Removes the key entirely. MCP server access is denied until you generate a new one.

Where to NEVER put MCP keys

Both MCP keys are sensitive Dragble credentials. Treat them like:

• ❌ Browser JavaScript bundles — anyone visiting your site can extract it
• ❌ Public GitHub repos — secret scanners + crawlers will find it
• ❌ .env files committed to git — even private repos leak through team members
• ❌ URL query parameters — server logs, browser history, referrer headers
• ❌ Client-side .env (NEXT_PUBLIC_*, VITE_*) — these are inlined into the browser bundle
• ❌ Mobile app builds — easily extracted via decompilation

Safe storage

• ✅ Backend env vars loaded server-side only (e.g., Node process.env, Cloud Run secrets, Vercel env vars without NEXT_PUBLIC_ prefix)
• ✅ Secret managers: AWS Secrets Manager, GCP Secret Manager, Vault, Doppler
• ✅ CI/CD secrets for deploy-time injection
• ✅ Developer's local OpenCode/Claude Code config at ~/.config/... for mcp_client_key only (never committed)

How the keys work together

The browser never sees MCP keys. The backend MCP key stays on your server. The AI client never sees editor_key; it only receives the client pairing key. Each credential stays in its own safe context:

1. Your SaaS loads the editor with editor_key (domain-bound)
2. User clicks "Connect AI" in your UI
3. The editor creates an MCP session and shows an 8-digit pairing code
   ┌────────────────────┐
   │ AI Pairing Code:   │
   │     47289153       │
   │ stored per session │
   └────────────────────┘
4. User pastes: "Connect with Dragble MCP using pairing code 47289153"
   into their AI client (OpenCode, Claude Code, etc.)
5. AI client (configured with mcp_client_key) redeems the code → gets paired
6. Tool calls from AI stream back to the editor live on canvas

The credentials never travel through the same channel. Backend flows skip pairing codes and use mcp_key with the frontend-created sessionId; third-party client flows use mcp_client_key plus pair_with_editor.

Key rotation strategy

Scenario	Action
Suspect key compromise	Rotate immediately. Update backend env vars or MCP client configs for the affected key.
Routine rotation	Every 90 days minimum (or per your security policy)
Developer leaves team	Rotate all keys they had access to
Migrating to production	Generate fresh keys; don't reuse dev keys
First production deploy	Generate new key, store in deploy environment, never reuse the dashboard-shown copy

Audit timestamps

Every MCP key tracks when it was created and last rotated. View these in the dashboard's MCP Key page so you can confirm key freshness during security reviews.