Visily MCP

Visily is an AI design canvas that turns text prompts, screenshots, URLs & more into UI designs that are as easy to edit as a Google Slide. The Visily MCP server brings those designs into your AI coding agent: point it at a Visily board or screen and your agent can find it, turn it into application code, or pull its theme tokens.

[!NOTE]Access requirement.The Visily MCP works only on workspaces on aPro or Businessplan where you are the workspace creator or have aneditorlicense. Free workspaces and viewer/guest roles are not supported. This is enforced on every request.

Each platform's drop-in files live underplugins/<platform>/.

claude plugin marketplace add visily-app/mcp-plugins claude plugin install visily@visily

Then reload Claude Code and run/mcp→ selectvisily→ complete the OAuth sign-in. Full walkthrough:installation-guides/claude.md.

Reload Cursor; the MCP server appears underSettings → MCP(OAuth on first use) and the Visily skill loads automatically. Details:plugins/cursor/README.md.

{ "mcpServers": { "visily": { "type": "streamableHttp", "url": "https://app.visily.ai/api/mcp" } } }

Full agent-readable install guidance:llms-install.md.

codex plugin marketplace add visily-app/mcp-plugins codex plugin add visily@visily

Authorize via OAuth on first use. Full walkthrough:installation-guides/codex.md.

ChatGPT connects to remote MCP servers viaDeveloper Modecustom connectors (Plus, Pro, Business, or Enterprise). EnableSettings → Connectors → Advanced → Developer mode, add a custom connector pointing at the server URL above, and complete OAuth. Then pasteplugins/chatgpt/AGENTS.mdinto a Project/GPT's instructions. Steps:plugins/chatgpt/SETUP.md.

Copyplugins/antigravity/.agents/into your project root and mergeplugins/antigravity/mcp_config.jsoninto your global MCP config. Details:installation-guides/antigravity.md.

Copyplugins/kiro/into your Kiro powers directory (it containsPOWER.md, per-intentsteering/workflows, andmcp.json). Mergemcp.jsoninto your Kiro MCP config and authorize via OAuth. The Power activates on Visily URLs and find/build/theme intents.

Install the hosted Visily MCP server with a one-click Replit install link:installation-guides/replit.md.

Commitplugins/lovable/AGENTS.mdto your repo root and add the Visily MCP connector in the Lovable UI. Details:plugins/lovable/SETUP.md.

v0supports custom MCP servers natively. Add the server URL above viaSettings → MCP Connections(orAdd MCPin the prompt form) and authorize via OAuth, then commitplugins/v0/AGENTS.mdto your repo root. Details:plugins/v0/SETUP.md.

{ "mcpServers": { "visily": { "url": "https://app.visily.ai/api/mcp" } } }

[!NOTE]Google AI Studiodoes not natively support MCP connectors yet (it only works through third-party browser bridges, which we don't recommend). For a Google-native option, useFirebase Studio, which supports MCP servers via.idx/mcp.json— drop the sameurlconfig there. We'll add a first-class recipe when AI Studio ships native MCP support.

Give the agent a Visily link and a clear intent. The agent extracts the IDs from the URL — it doesn't open the page.

- "Find the Visily board I was working on for the 4.6 release and give me the link."
- "Build this Visily screen as React + Tailwind:https://app.visily.ai/projects/abc/boards/456/elements/789"
- "Implement this board in Next.js, reusing mysrc/components/uicomponents."
- "Apply my Visily board theme to this app'sglobals.css."

https://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}

Structure your Visily file for better code

The more intent your design carries, the better the generated code:

- Name your screens and key groups semanticallyin Visily — names flow into the export and into the link-matching for "find my board."
- Lean on Visily's theme / design systemso the agent can apply real tokens instead of guessing colors and radii.
- Ask for one screen at a timefor large boards — smaller selections produce more reliable results.

The server also shipsprompts(e.g.find_visily_board,generate_code_from_element,apply_board_theme) andresources(visily://docs/...) that your agent reads on demand.

Set project-level guidance so output stays consistent — like onboarding notes for a new teammate.

Cursor(.cursor/rules/visily-quality.mdc):

--- description: Visily code-generation rules alwaysApply: false --- - Treat Visily designData as a reference, not final code — rebuild semantically. - Apply the Visily theme tokens; never hardcode hex, radii, or spacing. - Reuse existing components in src/components/ui instead of duplicating. - Verify against get_screenshot for 1:1 layout before finishing.

## Visily MCP rules - Treat Visily designData as a reference, not final code — rebuild semantically. - Apply the Visily theme tokens; never hardcode hex, radii, or spacing. - Reuse existing components instead of duplicating; verify with get_screenshot.

plugins/is generated from a single shared source (shared/) byscripts/build.mjs. To change the integration, editshared/and runnpm run build— never editplugins/by hand. SeeCONTRIBUTING.md.

An MCP server that allows AI assistants to interact with Adobe After Effects.