Get started with the Visily MCP server

Get started with the Visily MCP server

The Visily MCP server brings your Visily 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 - using your Visily design system as the source of truth.

Before you start

  1. The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator or have an editor license. Free workspaces and viewer/guest roles are not supported. Upgrade your workspace to start using Visily MCP.
  2. The AI development tool must support MCP servers, and you must have permission to add or connect MCP servers in that tool.
  3. Your AI agent can access only the Visily content available to your account and permissions.

What you can do with the Visily MCP server

  1. Turn a Visily design into code. Generate production-ready code from a Visily screen or board, whether the UI was AI-generated in Visily or hand-authored. The agent rebuilds semantic, responsive components (default stack: React + TypeScript + Tailwind v4 + shadcn/ui) instead of pasting a static export.
  2. Find a board or screen and get its link. Ask for a design by description and the agent returns a link to open it, without leaving your editor.
  3. Apply a board's theme. Pull a board's design system as shadcn/Tailwind v4 tokens and apply it to another app's styling.
Available capabilities may depend on your MCP client and the tools currently supported by the Visily MCP server.
Idea
Visily MCP capabilities will continue to grow over time. If you don’t see the functionality you’d like here, send a request note to us! 

Connect the Visily MCP server

The setup process varies by AI development tool. This guide provides configuration steps for supported tools, including Claude Code, Codex, Cursor, Gemini CLI, Antigravity, Kiro, ChatGPT, and Lovable.
  1. Claude Code: Set up the Visily MCP server
  2. Codex: Set up the Visily MCP server
  3. Cursor: Set up the Visily MCP server
  4. Gemini CLI: Set up the Visily MCP server
  5. Antigravity: Set up the Visily MCP server
  6. Kiro: Set up the Visily MCP server
  7. ChatGPT: Set up the Visily MCP server
  8. Lovable: Set up the Visily MCP server

Prompting your agent

Provide the agent with a Visily link and a clear request. It reads the required IDs from the URL, and doesn't open the page.
Quote
Examples:
  1. Find the Visily board I was working on for the streaming mobile app and give me the link.
  2. Build this Visily screen as React + Tailwind: https://app.visily.ai/projects/abc/boards/456/elements/789
  3. Implement this board in Next.js, reusing my src/components/ui components.
  4. Apply my Visily board theme to this app's globals.css.
Info
A Visily URL follows this format: <https://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}>

Structure your Visily file for better code

The more clearly your design communicates its intent, the better the generated code will be.
  1. Name your screens and key groups semantically in Visily. Names flow into the export and into the link-matching for "find my board."
  2. Lean on Visily's theme / design system so the agent can apply real tokens instead of guessing colors and radii.
  3. Ask for one screen at a time for large boards. Smaller selections produce more reliable results.

Tools

Tool
Use
get_design_context
Primary. Returns designData + theme + screenshot metadata for one element.
get_screenshot
Fetch a screenshot for visual verification.
get_board_theme
Board design system as shadcn tokens (JSON / CSS / Tailwind).
list_workspaces
list_projects
list_boards
list_elements
Discovery / find-a-board.
get_workspace
get_project
get_board
get_element
get_element_export
Advanced. Metadata and raw exports rarely needed for the three use cases; prefer the tools above.

The server also ships prompts (e.g. find_visily_board, generate_code_from_element, apply_board_theme) and resources (visily://docs/...) that your agent reads on demand.

Manage the connection

You can review or disconnect the MCP integration from your Visily account settings.


Disconnecting the integration prevents the MCP client from accessing your Visily content until you authorize it again.

Note

  1. The Visily MCP server provides design context and tools to your AI agent. The quality of the final output also depends on the selected model, your prompt, and the context available in your codebase.
  2. The MCP server does not automatically grant access to private designs. Your existing Visily permissions still apply.
  3. Links to screens or elements follow the access settings of their board.
  4. Available tools, supported clients, plans, and usage limits may change as the Visily MCP server evolves.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • Kiro: Set up the Visily MCP server

      Connect Kiro directly to the Visily MCP server via its MCP config. Before you start The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator or have an editor license. Free workspaces and viewer/guest ...

    • Codex: Set up the Visily MCP server

      Connect Codex directly to the Visily MCP server (no plugin). Before you start The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator or have an editor license. Free workspaces and viewer/guest roles are ...

    • Claude Code: Set up the Visily MCP server

      Connect Claude Code directly to the Visily MCP server (no plugin). Use this if you just want the tools without the packaged skill. Before you start The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator ...

    • Gemini CLI: Set up the Visily MCP server

      Gemini CLI supports remote MCP servers over streamable HTTP. There is no packaged plugin - connect by editing your settings file. Before you start The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator ...

    • Antigravity: Set up the Visily MCP server

      Connect Google Antigravity to the Visily MCP server via its global MCP config. Before you start The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator or have an editor license. Free workspaces and ...