Visily UI Design

io.github.visily-appPublished by GitHub account visily-appv0.1.1Updated Oct 24, 2026

UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

Visily UI Design connects an AI coding agent to Visily boards so it can find designs, generate code from screens, and pull theme tokens.

What you can do
Find workspaces, projects, boards and elements, and return links to a design by description or URL IDs. Retrieve a screen's design data, theme and screenshot metadata for code generation. Fetch screenshots for visual verification. Export a board's design system as shadcn/Tailwind tokens in JSON, CSS or Tailwind form. Read advanced metadata and raw element exports when needed.
When to use it
Useful when your UI designs live in Visily and you want an AI coding agent to rebuild them as semantic React/TypeScript/Tailwind components, locate a board from a vague description, or apply a board's theme to another app.
Requirements
Remote Streamable HTTP endpoint at app.visily.ai, connected through an MCP-capable client. OAuth sign-in to Visily on first use; no API keys. Requires a Pro or Business workspace where you are the creator or hold an editor license; free workspaces and viewer/guest roles are rejected.
Before you install
Access is enforced per request, so free or viewer accounts will fail. The agent reads design data and theme tokens from your Visily workspace; generated code should be reviewed rather than treated as final. No write, delete or payment actions are described.

Installation

In SourceWeft

  1. Open Visily UI Design in the dashboard and add it to a workspace.
  2. Connect the required credentials. They are stored privately and never shown on public pages.
  3. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.visily-app%2Fvisily/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config. The client completes OAuth sign-in on first connect.

{
  "mcpServers": {
    "visily-ui-design": {
      "type": "http",
      "url": "https://app.visily.ai/api/mcp"
    }
  }
}

README

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 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. This is enforced on every request.

What you can do

  • 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.
  • Find a board or screen and get its link. Ask for a design by description ("the board I was working on for the 4.6 release") and the agent returns a link to open it — without leaving your editor.
  • Apply a board's theme. Pull a board's design system as shadcn/Tailwind v4 tokens and apply it to another app's styling.

Install & connect

Authentication is OAuth — your client prompts you to sign in to Visily on first use. There are no API keys to manage.

The current Visily MCP server URL is:

https://app.visily.ai/api/mcp

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

Claude Code

bash
claude plugin marketplace add visily-app/mcp-pluginsclaude plugin install visily@visily

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

Cursor

Cursor 2.5+ packaged plugin — install from a local clone in the agent chat:

/add-plugin ./plugins/cursor

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

Cline

Cline can connect directly to the hosted Visily MCP server with Streamable HTTP:

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

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

Codex

bash
codex plugin marketplace add visily-app/mcp-pluginscodex plugin add visily@visily

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

ChatGPT

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

Antigravity

Copy plugins/antigravity/.agents/ into your project root and merge plugins/antigravity/mcp_config.json into your global MCP config. Details: installation-guides/antigravity.md.

Kiro

Copy plugins/kiro/ into your Kiro powers directory (it contains POWER.md, per-intent steering/ workflows, and mcp.json). Merge mcp.json into your Kiro MCP config and authorize via OAuth. The Power activates on Visily URLs and find/build/theme intents.

Replit Agent

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

Lovable

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

v0 (Vercel)

v0 supports custom MCP servers natively. Add the server URL above via Settings → MCP Connections (or Add MCP in the prompt form) and authorize via OAuth, then commit plugins/v0/AGENTS.md to your repo root. Details: plugins/v0/SETUP.md.

Other editors (Streamable HTTP)

Any client that supports Streamable-HTTP MCP can connect with this config:

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

This covers VS Code (Copilot), Windsurf, Cline, Gemini CLI, and similar tools. Check your client's docs for where MCP server config lives; OAuth runs on first use.

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

Prompting your agent

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

Examples

  • "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 my src/components/ui components."
  • "Apply my Visily board theme to this app's globals.css."

A Visily URL looks like:

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 semantically in Visily — names flow into the export and into the link-matching for "find my board."
  • Lean on Visily's theme / design system so the agent can apply real tokens instead of guessing colors and radii.
  • Ask for one screen at a time for large boards — smaller selections produce more reliable results.

Tools

ToolUse
get_design_contextPrimary. Returns designData + theme + screenshot metadata for one element.
get_screenshotFetch a screenshot for visual verification.
get_board_themeBoard design system as shadcn tokens (JSON / CSS / Tailwind).
list_workspaces, list_projects, list_boards, list_elementsDiscovery / find-a-board.
get_workspace, get_project, get_board, get_element, get_element_exportAdvanced — 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.

Custom rules (optional)

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

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

yaml
---description: Visily code-generation rulesalwaysApply: 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.

Claude Code (CLAUDE.md):

markdown
## 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`.

How this repo is built

plugins/ is generated from a single shared source (shared/) by scripts/build.mjs. To change the integration, edit shared/ and run npm run build — never edit plugins/ by hand. See CONTRIBUTING.md.

Source: README.md at commit 800a327

Tools

0
This server asks you to sign in, so SourceWeft could not read its tools without an account and has not indexed them. What a connected account sees can depend on that account and its permissions.

Version history

1
  1. v0.1.1LatestSep 16, 2026

Score

75% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

    Declare a license in the repository or the registry entry.