{
  "markdown": "# Visily MCP\n\nVisily is an AI design canvas that turns text prompts, screenshots, URLs & more into UI\ndesigns that are as easy to edit as a Google Slide. The Visily MCP server brings those\ndesigns into your AI coding agent: point it at a Visily board or screen and your agent can\nfind it, turn it into application code, or pull its theme tokens.\n\n> [!NOTE]\n> **Access requirement.** The Visily MCP works only on workspaces on a **Pro or Business**\n> plan where you are the workspace creator or have an **editor** license. Free workspaces and\n> viewer/guest roles are not supported. This is enforced on every request.\n\n## What you can do\n\n- **Turn a Visily design into code.** Generate production-ready code from a Visily screen or\n  board — whether the UI was AI-generated in Visily or hand-authored. The agent rebuilds\n  semantic, responsive components (default stack: React + TypeScript + Tailwind v4 +\n  shadcn/ui) instead of pasting a static export.\n- **Find a board or screen and get its link.** Ask for a design by description\n  (*\"the board I was working on for the 4.6 release\"*) and the agent returns a link to open\n  it — without leaving your editor.\n- **Apply a board's theme.** Pull a board's design system as shadcn/Tailwind v4 tokens and\n  apply it to another app's styling.\n\n## Install & connect\n\nAuthentication is **OAuth** — your client prompts you to sign in to Visily on first use.\nThere are no API keys to manage.\n\nThe current Visily MCP server URL is:\n\n```\nhttps://app.visily.ai/api/mcp\n```\n\nEach platform's drop-in files live under [`plugins/<platform>/`](plugins/).\n\n### Claude Code\n\n```bash\nclaude plugin marketplace add visily-app/mcp-plugins\nclaude plugin install visily@visily\n```\n\nThen reload Claude Code and run `/mcp` → select `visily` → complete the OAuth sign-in. Full\nwalkthrough: [`installation-guides/claude.md`](installation-guides/claude.md).\n\n### Cursor\n\nCursor 2.5+ packaged plugin — install from a local clone in the agent chat:\n\n```\n/add-plugin ./plugins/cursor\n```\n\nReload Cursor; the MCP server appears under **Settings → MCP** (OAuth on first use) and the\nVisily skill loads automatically. Details: [`plugins/cursor/README.md`](plugins/cursor/README.md).\n\n### Cline\n\nCline can connect directly to the hosted Visily MCP server with Streamable HTTP:\n\n```json\n{\n  \"mcpServers\": {\n    \"visily\": {\n      \"type\": \"streamableHttp\",\n      \"url\": \"https://app.visily.ai/api/mcp\"\n    }\n  }\n}\n```\n\nFull agent-readable install guidance: [`llms-install.md`](llms-install.md).\n\n### Codex\n\n```bash\ncodex plugin marketplace add visily-app/mcp-plugins\ncodex plugin add visily@visily\n```\n\nAuthorize via OAuth on first use. Full walkthrough:\n[`installation-guides/codex.md`](installation-guides/codex.md).\n\n### ChatGPT\n\nChatGPT connects to remote MCP servers via **Developer Mode** custom connectors (Plus, Pro,\nBusiness, or Enterprise). Enable **Settings → Connectors → Advanced → Developer mode**, add a\ncustom connector pointing at the server URL above, and complete OAuth. Then paste\n[`plugins/chatgpt/AGENTS.md`](plugins/chatgpt/AGENTS.md) into a Project/GPT's instructions.\nSteps: [`plugins/chatgpt/SETUP.md`](plugins/chatgpt/SETUP.md).\n\n### Antigravity\n\nCopy [`plugins/antigravity/.agents/`](plugins/antigravity) into your project root and merge\n[`plugins/antigravity/mcp_config.json`](plugins/antigravity/mcp_config.json) into your global\nMCP config. Details: [`installation-guides/antigravity.md`](installation-guides/antigravity.md).\n\n### Kiro\n\nCopy [`plugins/kiro/`](plugins/kiro) into your Kiro powers directory (it contains `POWER.md`,\nper-intent `steering/` workflows, and `mcp.json`). Merge `mcp.json` into your Kiro MCP config\nand authorize via OAuth. The Power activates on Visily URLs and find/build/theme intents.\n\n### Replit Agent\n\nInstall the hosted Visily MCP server with a one-click Replit install link:\n[`installation-guides/replit.md`](installation-guides/replit.md).\n\n### Lovable\n\nCommit [`plugins/lovable/AGENTS.md`](plugins/lovable/AGENTS.md) to your repo root and add the\nVisily MCP connector in the Lovable UI. Details:\n[`plugins/lovable/SETUP.md`](plugins/lovable/SETUP.md).\n\n### v0 (Vercel)\n\n[v0](https://v0.app) supports custom MCP servers natively. Add the server URL above via\n**Settings → MCP Connections** (or **Add MCP** in the prompt form) and authorize via OAuth,\nthen commit [`plugins/v0/AGENTS.md`](plugins/v0/AGENTS.md) to your repo root. Details:\n[`plugins/v0/SETUP.md`](plugins/v0/SETUP.md).\n\n### Other editors (Streamable HTTP)\n\nAny client that supports Streamable-HTTP MCP can connect with this config:\n\n```json\n{\n  \"mcpServers\": {\n    \"visily\": {\n      \"url\": \"https://app.visily.ai/api/mcp\"\n    }\n  }\n}\n```\n\nThis covers VS Code (Copilot), Windsurf, Cline, Gemini CLI, and similar tools. Check your\nclient's docs for where MCP server config lives; OAuth runs on first use.\n\n> [!NOTE]\n> **Google AI Studio** does not natively support MCP connectors yet (it only works through\n> third-party browser bridges, which we don't recommend). For a Google-native option, use\n> **Firebase Studio**, which supports MCP servers via `.idx/mcp.json` — drop the same `url`\n> config there. We'll add a first-class recipe when AI Studio ships native MCP support.\n\n## Prompting your agent\n\nGive the agent a Visily link and a clear intent. The agent extracts the IDs from the URL —\nit doesn't open the page.\n\n**Examples**\n\n- \"Find the Visily board I was working on for the 4.6 release and give me the link.\"\n- \"Build this Visily screen as React + Tailwind: `https://app.visily.ai/projects/abc/boards/456/elements/789`\"\n- \"Implement this board in Next.js, reusing my `src/components/ui` components.\"\n- \"Apply my Visily board theme to this app's `globals.css`.\"\n\nA Visily URL looks like:\n\n```\nhttps://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}\n```\n\n## Structure your Visily file for better code\n\nThe more intent your design carries, the better the generated code:\n\n- **Name your screens and key groups semantically** in Visily — names flow into the export\n  and into the link-matching for \"find my board.\"\n- **Lean on Visily's theme / design system** so the agent can apply real tokens instead of\n  guessing colors and radii.\n- **Ask for one screen at a time** for large boards — smaller selections produce more\n  reliable results.\n\n## Tools\n\n| Tool | Use |\n|---|---|\n| `get_design_context` | **Primary.** Returns `designData` + theme + screenshot metadata for one element. |\n| `get_screenshot` | Fetch a screenshot for visual verification. |\n| `get_board_theme` | Board design system as shadcn tokens (`JSON` / `CSS` / `Tailwind`). |\n| `list_workspaces`, `list_projects`, `list_boards`, `list_elements` | Discovery / find-a-board. |\n| `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. |\n\nThe server also ships **prompts** (e.g. `find_visily_board`, `generate_code_from_element`,\n`apply_board_theme`) and **resources** (`visily://docs/...`) that your agent reads on demand.\n\n## Custom rules (optional)\n\nSet project-level guidance so output stays consistent — like onboarding notes for a new\nteammate.\n\n**Cursor** (`.cursor/rules/visily-quality.mdc`):\n\n```yaml\n---\ndescription: Visily code-generation rules\nalwaysApply: false\n---\n- Treat Visily `designData` as a reference, not final code — rebuild semantically.\n- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.\n- Reuse existing components in `src/components/ui` instead of duplicating.\n- Verify against `get_screenshot` for 1:1 layout before finishing.\n```\n\n**Claude Code** (`CLAUDE.md`):\n\n```markdown\n## Visily MCP rules\n- Treat Visily `designData` as a reference, not final code — rebuild semantically.\n- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.\n- Reuse existing components instead of duplicating; verify with `get_screenshot`.\n```\n\n## How this repo is built\n\n`plugins/` is generated from a single shared source (`shared/`) by `scripts/build.mjs`. To\nchange the integration, edit `shared/` and run `npm run build` — never edit `plugins/` by\nhand. See [`CONTRIBUTING.md`](CONTRIBUTING.md).\n",
  "bytes": 8210,
  "sha": "8ee44f971a62ecf642f2becdd852604790a0873ac4730966f0beed99e5c1ee48",
  "repo_slug": "visily-app/mcp-plugins",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_visily_app_visily_153a3325/readme"
}