dragble-vue-editor 1.0.7 → 1.0.9

package/README.md

@@ -218,21 +218,20 @@ const handleError = (error: Error) => {
 
 ## MCP — AI Integration
 
-Connect AI agents (Claude Code, OpenCode, Codex, Cursor, or your own AI backend) to the editor through the [Model Context Protocol](https://modelcontextprotocol.io). The AI calls structured tools — `add_row`, `add_heading`, `update_button`, `export_html` — that mutate design state live on the canvas. No prompt engineering, no JSON hallucination, no broken output.
+Connect AI agents (Claude Code, OpenCode, Codex, Cursor, or your own AI backend) to the editor through the [Model Context Protocol](https://modelcontextprotocol.io). Your backend uses `mcp_key`; third-party AI clients use `mcp_client_key` plus a pairing code. Tool calls mutate design state live on the canvas. No prompt engineering, no JSON hallucination, no broken output.
 
 ### Enabling MCP
 
-MCP is off by default. Set `features: { mcp: true }` to opt in:
+MCP is on by default when your plan includes it. You can still set `features: { mcp: true }` explicitly, or set `features: { mcp: false }` to turn it off for an embed:
 
 ```vue
 <DragbleEditor
   ref="editorRef"
   editor-key="db_pxl81cxn92wignwx"
-  :options="{ features: { mcp: true } }"
 />
 ```
 
-MCP also requires a **Starter plan or higher**. Both conditions must be true — plan allows it AND SDK enables it.
+MCP also requires a **Starter plan or higher**. Both conditions must be true — plan allows it AND SDK has not opted out.
 
 ### Quick example — your backend controls the AI
 
@@ -242,7 +241,6 @@ MCP also requires a **Starter plan or higher**. Both conditions must be true —
   <DragbleEditor
     ref="editorRef"
     editor-key="db_pxl81cxn92wignwx"
-    :options="{ features: { mcp: true } }"
   />
 </template>
 
@@ -264,8 +262,8 @@ const handleConnectAI = async () => {
   const userIdFromAuth = "alice123"; // from your auth/session
   const docIdFromRoute = "campaign-summer"; // from your URL or DB row
   const id = `${userIdFromAuth}-${docIdFromRoute}`;
-  const { sessionId } = await editorRef.value!.editor!.connectMCP({ id });
-  // Pass sessionId to your backend — it calls MCP tools with your mcp_key
+  const { sessionId } = await editorRef.value!.editor!.joinMCP({ id });
+  // Pass sessionId to your backend — it calls MCP tools with your backend mcp_key
 };
 </script>
 ```
@@ -278,10 +276,7 @@ const handleLetUserPair = async () => {
   // Same id you'd use anywhere else for this user+document combination.
   // 8-128 chars, only letters/digits/hyphens/underscores.
   const id = "alice123-campaign-summer-2026";
-  await editor.connectMCP({ id });
-
-  // Explicitly generate a pairing code (not auto-generated)
-  const { code, expiresAt } = await editor.getPairingCode();
+  const { code, expiresAt } = await editor.startMCPPairing({ id });
   alert(`Paste this into Claude Code: ${code}`);
 };
 ```
@@ -297,15 +292,15 @@ This prevents two AI controllers from conflicting on the same design.
 
 ### How it works
 
-1. **Enable MCP** in the SDK config: `features: { mcp: true }`.
-2. **Generate an MCP key** in the Dragble dashboard: Project → MCP Key → Generate. Store it in your backend env vars — never in browser code.
-3. **Call `editor.connectMCP({ id })`** where `id` is a stable identifier you control (see below).
-4. **Choose your AI path**: either your backend calls MCP tools directly (using the mcp_key), or you generate a pairing code for the end-user to connect their own AI client.
+1. **Confirm MCP is enabled**: it is on by default; set `features: { mcp: false }` only when you want to opt out.
+2. **Generate MCP keys** in the Dragble dashboard: use backend `mcp_key` for your server, and `mcp_client_key` for Claude/OpenCode/Cursor/Codex-style clients.
+3. **Call `editor.joinMCP({ id })`** where `id` is a stable identifier you control (see below).
+4. **Choose your AI path**: either your backend calls MCP tools directly (using `mcp_key`), or you generate a pairing code for the end-user to connect their own AI client (using `mcp_client_key`).
 5. **Mutations stream live** onto the editor canvas as the AI works.
 
 ### The `id` parameter — why it matters
 
-The `id` you pass to `connectMCP()` is a **Bring Your Own ID (BYOI)** that maps to your domain entities. It is NOT a random token — it is how Dragble identifies the session across browser refreshes, server restarts, and device switches.
+The `id` you pass to `joinMCP()` is a **Bring Your Own ID (BYOI)** that maps to your domain entities. It is NOT a random token — it is how Dragble identifies the session across browser refreshes, server restarts, and device switches.
 
 **Rules:**
 
@@ -321,14 +316,14 @@ The `id` you pass to `connectMCP()` is a **Bring Your Own ID (BYOI)** that maps
 
 ```ts
 // Recommended: derive from your domain — concrete examples
-editor.connectMCP({ id: "alice123-campaign-summer-2026" }); // user + doc
-editor.connectMCP({ id: "workspace_acme_template_welcome" }); // workspace + template
-editor.connectMCP({ id: "org-uber-eats-promo-q4-2026" }); // org + campaign
-editor.connectMCP({ id: "tenant_42_invoice_template_v3" }); // tenant + entity
+editor.joinMCP({ id: "alice123-campaign-summer-2026" }); // user + doc
+editor.joinMCP({ id: "workspace_acme_template_welcome" }); // workspace + template
+editor.joinMCP({ id: "org-uber-eats-promo-q4-2026" }); // org + campaign
+editor.joinMCP({ id: "tenant_42_invoice_template_v3" }); // tenant + entity
 
 // Valid but NOT recommended — random IDs break session continuity
 // (every page refresh creates a brand new session, AI loses context)
-editor.connectMCP({ id: crypto.randomUUID() });
+editor.joinMCP({ id: crypto.randomUUID() });
 ```
 
 ### Disconnecting
@@ -352,7 +347,8 @@ Idle sessions are reaped after 2 hours of inactivity. Active sessions never expi
 
 | Method                                             | Returns                                                                 |
 | -------------------------------------------------- | ----------------------------------------------------------------------- |
-| `editor.connectMCP({ id, editorMode? })`           | `{ sessionId, resumed? }`                                               |
+| `editor.joinMCP({ id, editorMode? })`              | `{ sessionId, resumed? }` for backend-managed flows                     |
+| `editor.startMCPPairing({ id, editorMode? })`      | `{ sessionId, resumed?, code, expiresAt }` for client pairing           |
 | `editor.disconnectMCP()`                           | `{ destroyed }` — permanently deletes session                           |
 | `editor.getPairingCode()`                          | `{ code, expiresAt }` — generate a pairing code for end-user AI clients |
 | `editor.endPairing()`                              | `{ revoked }` — invalidate the active pairing code                      |

package/dist/index.d.ts

@@ -655,7 +655,8 @@ declare function useDragbleEditor(config: Omit<DragbleConfig, "containerId">, sd
         getStorageInfo: () => Promise<Record<string, unknown>>;
         addEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => () => void;
         removeEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => void;
-        connectMCP: (opts: dragble_types.ConnectMCPOptions) => Promise<dragble_types.ConnectMCPResult>;
+        joinMCP: (opts: dragble_types.JoinMCPOptions) => Promise<dragble_types.JoinMCPResult>;
+        startMCPPairing: (opts: dragble_types.StartMCPPairingOptions) => Promise<dragble_types.StartMCPPairingResult>;
         disconnectMCP: () => Promise<dragble_types.DisconnectMCPResult>;
         getPairingCode: () => Promise<dragble_types.GetPairingCodeResult>;
         endPairing: () => Promise<dragble_types.EndPairingResult>;
@@ -773,7 +774,8 @@ declare function useDragbleEditor(config: Omit<DragbleConfig, "containerId">, sd
         getStorageInfo: () => Promise<Record<string, unknown>>;
         addEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => () => void;
         removeEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => void;
-        connectMCP: (opts: dragble_types.ConnectMCPOptions) => Promise<dragble_types.ConnectMCPResult>;
+        joinMCP: (opts: dragble_types.JoinMCPOptions) => Promise<dragble_types.JoinMCPResult>;
+        startMCPPairing: (opts: dragble_types.StartMCPPairingOptions) => Promise<dragble_types.StartMCPPairingResult>;
         disconnectMCP: () => Promise<dragble_types.DisconnectMCPResult>;
         getPairingCode: () => Promise<dragble_types.GetPairingCodeResult>;
         endPairing: () => Promise<dragble_types.EndPairingResult>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragble-vue-editor",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "AI-powered Vue 3 email editor component. Drag-and-drop email builder for creating responsive email templates and newsletters. Build HTML emails visually with Dragble.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -96,7 +96,7 @@
   },
   "homepage": "https://docs.dragble.com",
   "dependencies": {
-    "dragble-types": "^1.0.7"
+    "dragble-types": "^1.0.10"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"