Connect Lovision MCP

Lovision MCP lets an AI client read Lovision projects, understand the current canvas, and create, edit, check, and export native Lovision design work with your authorization.

After connecting the MCP server, the agent should initialize a Lovision session before reading or changing a project. Only grant write access in projects and chats you trust.

Early Access Status

Lovision MCP is currently in Early Access. The steps below are not a general-availability self-serve setup flow; they apply only after Lovision has enabled MCP for your account and client, and has given you the authorization method needed for the session.

Self-serve OAuth discovery is not fully available yet. If your client does not show a Lovision / OneAuth authorization flow after adding https://mcp.lovision.ai/, your account or client cannot authorize through the standard UI yet. Contact Lovision for access and the currently supported authorization method; do not continue client setup until you have those details.

Lovision Desktop Local MCP

If you use the Lovision Desktop App, you can connect an MCP client to the current Desktop session through Local MCP. This endpoint listens on loopback only. The default URL is:

http://127.0.0.1:3846/mcp

The actual port can change if the default port is already in use. In Lovision Desktop, open Settings > MCP, enable MCP, wait for the status to become Running, then use Copy Codex config, Copy Claude config, or Copy URL to copy the actual configuration shown by Desktop.

The copied Desktop config includes a local bearer secret. For example, Codex uses:

[mcp_servers.lovision-desktop]
type = "http"
url = "http://127.0.0.1:3846/mcp"

[mcp_servers.lovision-desktop.http_headers]
Authorization = "Bearer <copied-from-lovision-desktop>"

Do not hand-write a config without the Authorization header. After you click Revoke, old configs stop working and you need to copy a fresh config. Port 4101 remains the developer local server path; regular Desktop users should use the 3846 or fallback URL shown in Settings.

MCP URL

Use this URL when connecting an AI client to Lovision:

https://mcp.lovision.ai/

Lovision MCP uses Streamable HTTP. When sign-in is required, complete the Lovision / OneAuth authorization flow opened by your client. If no authorization flow appears, confirm that MCP has been enabled for your account and whether Lovision has provided an Early Access authorization method.

The default remote authorization profile is user-level project access for the projects your Lovision account can already use. It lets an agent list, open, create, rename, move, duplicate, and edit project-backed documents. It does not grant delete, export, or sharing management by default.

Codex

If Lovision has enabled OAuth authorization for your account, add the remote server with the Codex CLI:

codex mcp add lovision --url https://mcp.lovision.ai/
codex mcp login lovision
codex mcp list

Or add it to ~/.codex/config.toml:

[mcp_servers.lovision]
url = "https://mcp.lovision.ai/"

After editing the config manually, run codex mcp login lovision to authorize the connection.

If Lovision gives you a bearer token for Early Access, do not write the token into a config file. Store it in a local environment variable and let Codex read it from there:

export LOVISION_MCP_BEARER_TOKEN="<token-from-lovision>"
codex mcp add lovision --url https://mcp.lovision.ai/ --bearer-token-env-var LOVISION_MCP_BEARER_TOKEN

Claude Code

From the project where you want to use Lovision MCP, run:

claude mcp add --transport http lovision https://mcp.lovision.ai/

Then open Claude Code and run:

/mcp

Select lovision and complete the browser authorization flow. If no authorization flow appears, confirm that Lovision has enabled MCP for your account and client first. To make the server available across projects, add it with the user-level scope supported by your Claude Code version.

Claude Web Or Desktop

1. Open Settings.
2. Go to Connectors.
3. Choose Add custom connector.
4. Name it Lovision.
5. Set the MCP Server URL to:

https://mcp.lovision.ai/

6. Save, connect, and complete the Lovision / OneAuth authorization flow.

If you use an organization account and do not see custom connectors, an admin may need to enable Connectors first.

Cursor

Cursor can use a config like this:

{
  "mcpServers": {
    "lovision": {
      "url": "https://mcp.lovision.ai/"
    }
  }
}

VS Code Copilot

Add this to .vscode/mcp.json in your project:

{
  "servers": {
    "lovision": {
      "type": "http",
      "url": "https://mcp.lovision.ai/"
    }
  }
}

After saving the file, start the Lovision MCP server from VS Code and complete the authorization flow. If no authorization flow appears, confirm that Lovision has enabled MCP for your account and client first.

Other MCP Clients

Other clients that support remote Streamable HTTP MCP usually need the same URL:

https://mcp.lovision.ai/

If your client uses a config file, follow that client's MCP configuration schema.

First Test

Before testing, have a projectId ready if you already know which project you want. If you do not provide one, ask the agent to list accessible projects after initialization and open the project you choose. Opening a project selects that project as the active MCP design target; it is not a second approval step. After connecting, send a small read-only request:

Use the Lovision MCP server. Initialize a Lovision session with runtime "remote-web". If projectId "<projectId>" is available, open that project first; otherwise list accessible projects and ask me which one to open. Then list the available capabilities and summarize the project or page context. Do not modify the design yet.

To verify write access after confirming the target project:

Use Lovision MCP with projectId "<projectId>" to create a small frame named "MCP smoke test" on the current page, run a quality check, capture a preview, and summarize what changed.

The agent should call lovision.session.init first, then use lovision.capabilities.list, lovision.document.getContext, or the relevant design tools.

Troubleshooting

Safety Tips

• Authorize Lovision MCP only in agent sessions you trust.
• Before changing a design, ask the agent to read context and summarize the target.
• Confirm write, export, sharing, or delete actions before allowing them.

Related

• Lovision MCP Tools