Add Editor AI docs and images

.playwright-mcp/console-2026-06-04T19-11-21-954Z.log

@@ -0,0 +1,4 @@
+[    5171ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://127.0.0.1:8293/node_modules/.vite/deps/react-dom_client.js?v=2bce18ee:20102
+[    5524ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/favicon.ico:0
+[    5631ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/api/auth/session:0
+[    5755ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:8293/docs/api/auth/session:0

content/docs/dashboard/dashboard-creating-paywalls/meta.json

@@ -2,6 +2,8 @@
   "title": "Creating Paywalls",
   "pages": [
     "paywall-editor-overview",
+    "paywall-editor-ai-chat",
+    "paywall-editor-mcp",
     "paywall-editor-layout",
     "paywall-editor-styling-elements",
     "paywall-editor-local-resources",

content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat.mdx

@@ -0,0 +1,84 @@
+---
+title: "AI Chat Builder"
+description: "Use AI Chat in the paywall editor to build, inspect, and refine paywalls with natural language."
+---
+
+AI Chat is built into the paywall editor. Use it when you want Superwall to build a new paywall section, change copy, adjust layout, wire up products, add variables, or inspect why part of a design is not behaving the way you expect.
+
+<Frame>![AI Chat sidebar open in the paywall editor](/images/paywall-editor-ai-chat-sidebar-placeholder.jpg)</Frame>
+
+To get an idea of what AI Chat can do, build, or modify, try choosing one of the starter prompts:
+
+<Frame>![AI Chat starter prompt examples](/images/ai_chat_examples.jpg)</Frame>
+
+## Open AI Chat
+
+Open a paywall, then click **AI Chat** in the editor sidebar.
+
+AI Chat works on the paywall currently open in your browser. It can read the editor state, inspect the layout tree, look at screenshots, and make changes through the same editor tools you use manually.
+
+## Ask for a change
+
+Type what you want the assistant to do, then press **Enter** or click **Send**. Use **Shift + Enter** for a new line.
+
+Good prompts include the specific page, element, product, or behavior you want changed:
+
+```txt
+Create a three-plan product selector with annual highlighted, monthly secondary, and lifetime below it.
+```
+
+```txt
+Make this onboarding paywall feel more premium, keep the same products, and add a short trust row under the CTA.
+```
+
+```txt
+Find why the restore button looks off-center on small devices and fix it.
+```
+
+AI Chat can make multiple tool calls during one response. You can watch tool activity in the chat while the editor updates.
+
+## Give the chat context
+
+Select one or more elements on the canvas or in the **Layout** tab before sending a message. The selected elements appear above the composer and are sent as context with your prompt.
+
+<Frame>![AI Chat composer showing selected element context and an attached image](/images/paywall-editor-ai-chat-context-placeholder.jpg)</Frame>
+
+You can also attach images by clicking the image button, dragging an image into the chat, or pasting an image from your clipboard. Supported image types are JPEG, PNG, GIF, and WebP.
+
+Use image attachments when you want the assistant to match a design, compare against a reference, or critique a visual result.
+
+## Manage chats
+
+AI Chat keeps separate chat sessions for the current application and paywall.
+
+- **New Chat:** Starts a fresh conversation for the current paywall.
+- **Chat tabs:** Switch between previous conversations.
+- **Copy Session ID:** Copies a chat session ID from the tab context menu.
+- **Import Chat:** Imports a chat by session ID.
+- **Archive Chat:** Removes a chat from the current session list.
+- **Layout toggle:** Switches between the full-width chat and the two-panel view.
+
+Only one chat run can be active at a time. If a run is taking too long or moving in the wrong direction, click **Stop**.
+
+## Review and publish
+
+AI Chat changes the draft in the editor. Review the result before publishing:
+
+1. Use the canvas and device preview to check layout, copy, and interactions.
+2. Use **History** or undo if you want to roll back a change.
+3. Preview on device when purchase, navigation, permission, or callback behavior matters.
+4. Click **Publish** when the draft is ready to go live.
+
+<Warning>
+AI Chat does not publish for you. Changes are only live after you publish the paywall.
+</Warning>
+
+## What AI Chat can edit
+
+AI Chat uses the editor's live tool surface, so it can work across most of the same paywall areas you can edit manually:
+
+- **Build and refine the design:** AI Chat can edit layout, element hierarchy, names, text, styles, ordering, images, and videos. It can also inspect screenshots and computed styles when you ask it to diagnose or polish a visual result.
+- **Connect paywall data:** AI Chat can work with products and product references, theme tokens, style modes, token bindings, variables, current values, initial values, and dynamic values. Use it when a design needs to stay connected to the same data and products you would wire up manually.
+- **Configure behavior and flows:** AI Chat can update tap behaviors, purchase actions, navigation actions, haptics, animations, routes, transitions, branching, localization, and trial-started notifications. It can also use search and find/replace when a change needs to touch more than one element.
+
+AI Chat is best for iterative building and refinement. For account-level setup, such as creating applications, campaigns, products, or webhooks, use the [Superwall MCP](/dashboard/guides/superwall-mcp) or [Superwall Skill](/dashboard/guides/superwall-skill). To connect your own external agent directly to the open editor, use [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp).

content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-mcp.mdx

@@ -0,0 +1,107 @@
+---
+title: "Connect an Agent with MCP"
+sidebarTitle: "Editor MCP"
+description: "Connect Claude Code, Codex, Cursor, or another MCP-compatible agent to the paywall currently open in the Superwall editor."
+---
+
+Editor MCP lets an external AI agent control the paywall currently open in your browser. Use it when you want to keep working in Claude Code, Codex, Cursor, or another MCP-compatible agent while giving that agent live access to the editor.
+
+<Frame>![Editor MCP connection panel showing install options and a pairing code](/images/paywall-editor-agent-connect.jpg)</Frame>
+
+<Note>
+Editor MCP is different from the [Superwall MCP](/dashboard/guides/superwall-mcp). The Superwall MCP manages account resources such as projects, applications, campaigns, products, and paywalls. Editor MCP controls the one paywall editor session open in your browser.
+</Note>
+
+## Connect an agent
+
+1. Open the paywall you want the agent to edit.
+2. Open **AI Chat** in the editor sidebar.
+3. Click the agent connection pill.
+4. Choose **Skill** or **MCP**.
+5. Copy the install command shown in the editor.
+6. Paste the pairing prompt into your agent.
+
+If you choose **Skill**, the editor shows:
+
+```bash
+npx skills add superwall/skills
+```
+
+Then paste the generated prompt into your agent:
+
+```txt
+Connect to the Superwall editor using the skill with pairing code: XXXX-XXXX-XXXX
+```
+
+If you choose **MCP**, select your client first. The editor generates the right command or configuration for Claude Code, Codex, Cursor, or another MCP client. Use the command shown in the editor because it includes the correct Editor MCP URL for your environment.
+
+The MCP prompt looks like this:
+
+```txt
+Connect to the superwall-editor MCP with pairing code: XXXX-XXXX-XXXX
+```
+
+## Connected state
+
+After the agent attaches, the connection pill shows the connected client and tool activity.
+
+For example, this is what it looks like when an agent uses the pairing code to connect to the editor:
+
+<Frame>![Example agent connecting to the Superwall editor over MCP](/images/ai_mcp_claude_connecting.jpg)</Frame>
+
+After the connection completes, the editor shows the attached client and recent tool activity.
+
+<Frame>![Editor MCP connection panel showing a connected agent and tool activity](/images/paywall-editor-agent-connected.jpg)</Frame>
+
+The editor keeps the browser session open while the page is open. From the connection panel you can:
+
+- **Disconnect Agent:** Release the current agent while keeping the editor session available for another pairing.
+- **End Session:** Close the browser editor session and invalidate the pairing code.
+
+Only one external controller can be attached to an editor session at a time. Disconnect the current agent before attaching a different one.
+
+## What agents can do
+
+Attached agents receive the editor's live tool list. The exact list can change as the editor evolves, but today agents can:
+
+- **Inspect and edit the paywall:** Agents can read the current paywall, selected elements, children, navigation pages, computed styles, and screenshots. They can then update text, styles, names, node order, hierarchy, or write native paywall HTML directly into the editor.
+- **Work with content and resources:** Agents can upload image and video assets, create and edit products, manage style tokens, and update variables, variable values, and dynamic values. They can also add localization languages, run AI localization, and configure trial-started notifications.
+- **Configure behavior and advanced flows:** Agents can add or clear tap behaviors such as purchase, restore, close, open URL, set state, select product, navigate page, request permission, request callback, scroll, focus input, delay, animation, and haptics. They can also edit routes, transitions, branches, advanced native elements, and use search or find/replace to make broader changes.
+
+## Session limits
+
+Editor MCP uses pairing codes and session tokens rather than your account-level MCP OAuth flow.
+
+| Limit | Behavior |
+| --- | --- |
+| Pairing code lifetime | Pairing codes expire after 10 minutes. |
+| Editor session lifetime | Browser editor sessions expire after 24 hours. |
+| Tool timeout | Tool calls time out after 30 seconds. |
+| Browser reconnect | The browser has a short reconnect window if the page refreshes or briefly disconnects. |
+| Failed pair attempts | Too many wrong pairing codes end the session. |
+
+If a pairing code expires, open the connection panel again and use the new code.
+
+## Troubleshooting
+
+### The agent cannot attach
+
+Check that the paywall editor tab is still open, the pairing code has not expired, and the agent is using the prompt from the current connection panel.
+
+### The session says another controller is connected
+
+Only one controller can be attached. Click **Disconnect Agent**, then attach the new agent with the latest pairing code.
+
+### Tool calls fail after a browser refresh
+
+Wait a moment for the editor to reconnect. If calls still fail, end the session and create a new connection from the editor.
+
+### The agent edited the wrong thing
+
+Use the editor's undo and history tools to review or roll back changes. Select the exact element you want changed before sending the next prompt so the agent receives that selection as context.
+
+## Related
+
+- [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat): Use Superwall's built-in chat builder inside the editor.
+- [Superwall MCP](/dashboard/guides/superwall-mcp): Manage account resources from external AI tools.
+- [Superwall Skill](/dashboard/guides/superwall-skill): Give coding agents Superwall docs, API helpers, and SDK integration guidance.

content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-overview.mdx

@@ -23,6 +23,15 @@ The Paywall Editor consists of 3 sections:
 2. **[Device Preview](/dashboard/dashboard-creating-paywalls/paywall-editor-previewing) \-** An interactive preview of your paywall on a mock device.
 3. **Component Editor \-** Fully customize components, use variables and more on your paywall.
 
+### Building with AI
+
+The editor also includes two AI-assisted ways to build and refine paywalls:
+
+- **[AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat):** Use the built-in chat to ask Superwall to create sections, update layouts, wire products, inspect screenshots, or refine the current draft.
+- **[Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp):** Connect Claude Code, Codex, Cursor, or another MCP-compatible agent to the paywall currently open in your browser.
+
+Both options edit the same draft you see in the editor. Review the result and click **Publish** when you are ready to make it live.
+
 ### Starting with a Template
 
 On the Superwall dashboard under **Paywalls**, click **\+ New Paywall** and select **Use Template**:

content/docs/dashboard/guides/superwall-mcp.mdx

@@ -9,6 +9,10 @@ The Superwall MCP lets AI agents manage your Superwall account through the [Mode
 This is different from [Superwall Agents](/agents), which is the Superwall AI workspace for chats, analysis, automations, webhooks, and hosted machine work. The Superwall MCP is focused on giving external AI tools access to your Superwall account to create and manage resources. If you also want live docs and SDK integration guidance, use the [Superwall Skill](/dashboard/guides/superwall-skill).
 </Note>
 
+<Tip>
+If you want an agent to edit the paywall currently open in the visual editor, use [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp) instead. Editor MCP uses a pairing code from the open paywall editor and exposes live editor tools for that single browser session.
+</Tip>
+
 ## Installation
 
 Add the Superwall MCP to your platform of choice using the URL `https://superwall-mcp.superwall.com/mcp`. You'll be prompted to log in to your Superwall account on first use.
@@ -63,6 +67,8 @@ The Superwall MCP can manage nearly everything you'd normally do in the dashboar
 - **Campaigns** — set up simple campaigns that show a paywall to 100% of users, or create advanced campaigns with A/B testing, holdout groups, and automatic optimization.
 - **Webhooks** — create and manage webhook endpoints, inspect event deliveries, rotate secrets, and retry failed deliveries.
 
+It does not directly control the live paywall editor canvas. For live design edits, use [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat) inside the editor or connect an external agent with [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp).
+
 ## Quick setup
 
 You can use the Superwall MCP to go from zero to a fully working paywall setup without ever opening the dashboard. Just ask your AI agent to set up Superwall for your app. You can give it your app name, platform, bundle ID, and store product IDs, and it can create the project, application, products, paywall, and campaign for you.
@@ -73,4 +79,6 @@ When the agent creates an application, it returns a `public_api_key`. That's wha
 
 - [Superwall Agents](/agents): AI workspace for Superwall analysis with connected tooling, automations, webhooks, and hosted machines.
 - [Superwall Skill](/dashboard/guides/superwall-skill): Recommended if you want docs access, guided SDK integration, and account management in one tool.
+- [Editor MCP](/dashboard/dashboard-creating-paywalls/paywall-editor-mcp): Connect an external agent to the paywall currently open in the editor.
+- [AI Chat Builder](/dashboard/dashboard-creating-paywalls/paywall-editor-ai-chat): Build and refine paywalls with Superwall's built-in editor chat.
 - [Vibe Coding](/sdk/guides/vibe-coding): Overview of the AI tools available for working with Superwall.