Visily MCP

Transforme designs de UI em aplicações responsivas com o Visily

Documentação

Visily MCP

O Visily é um canvas de design com IA que transforma prompts de texto, capturas de tela, URLs e mais em designs de UI tão fáceis de editar quanto um Google Slide. O servidor Visily MCP traz esses designs para o seu agente de codificação com IA: aponte-o para um board ou tela do Visily e seu agente pode encontrá-lo, transformá-lo em código de aplicação ou extrair seus tokens de tema.

[!NOTE] Requisito de acesso. O Visily MCP funciona apenas em workspaces nos planos Pro ou Business onde você é o criador do workspace ou possui licença de editor. Workspaces gratuitos e funções de visualizador/convidado não são suportados. Isso é aplicado em todas as solicitações.

O que você pode fazer

Transformar um design do Visily em código. Gere código pronto para produção a partir de uma tela ou board do Visily — seja a UI gerada por IA no Visily ou criada manualmente. O agente reconstrói componentes semânticos e responsivos (stack padrão: React + TypeScript + Tailwind v4 + shadcn/ui) em vez de colar uma exportação estática.
Encontrar um board ou tela e obter seu link. Peça um design por descrição ("o board em que eu estava trabalhando para o release 4.6") e o agente retorna um link para abri-lo — sem sair do seu editor.
Aplicar o tema de um board. Extraia o design system de um board como tokens shadcn/Tailwind v4 e aplique-o à estilização de outro aplicativo.

Instalação e conexão

A autenticação é OAuth — seu cliente solicita que você faça login no Visily no primeiro uso. Não há chaves de API para gerenciar.

A URL atual do servidor Visily MCP é:

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

Os arquivos prontos para uso de cada plataforma estão em plugins/<platform>/.

Claude Code

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

Em seguida, recarregue o Claude Code e execute /mcp → selecione visily → conclua o login OAuth. Tutorial completo: installation-guides/claude.md.

Cursor

Plugin empacotado do Cursor 2.5+ — instale a partir de um clone local no chat do agente:

/add-plugin ./plugins/cursor

Recarregue o Cursor; o servidor MCP aparece em Settings → MCP (OAuth no primeiro uso) e a skill do Visily carrega automaticamente. Detalhes: plugins/cursor/README.md.

Cline

O Cline pode se conectar diretamente ao servidor Visily MCP hospedado com Streamable HTTP:

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

Guia de instalação completo legível por agentes: llms-install.md.

Codex

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

Autorize via OAuth no primeiro uso. Tutorial completo: installation-guides/codex.md.

ChatGPT

O ChatGPT se conecta a servidores MCP remotos via conectores personalizados do Developer Mode (Plus, Pro, Business ou Enterprise). Ative Settings → Connectors → Advanced → Developer mode, adicione um conector personalizado apontando para a URL do servidor acima e conclua o OAuth. Em seguida, cole plugins/chatgpt/AGENTS.md nas instruções de um Project/GPT. Passos: plugins/chatgpt/SETUP.md.

Antigravity

Copie plugins/antigravity/.agents/ para a raiz do seu projeto e mescle plugins/antigravity/mcp_config.json na sua configuração MCP global. Detalhes: installation-guides/antigravity.md.

Kiro

Copie plugins/kiro/ para o diretório de powers do seu Kiro (ele contém POWER.md, workflows steering/ por intenção e mcp.json). Mescle mcp.json na sua configuração MCP do Kiro e autorize via OAuth. O Power ativa em URLs do Visily e intenções de find/build/theme.

Replit Agent

Instale o servidor Visily MCP hospedado com um link de instalação do Replit em um clique: installation-guides/replit.md.

Lovable

Faça commit de plugins/lovable/AGENTS.md na raiz do seu repositório e adicione o conector Visily MCP na interface do Lovable. Detalhes: plugins/lovable/SETUP.md.

v0 (Vercel)

O v0 suporta servidores MCP personalizados nativamente. Adicione a URL do servidor acima via Settings → MCP Connections (ou Add MCP no formulário de prompt) e autorize via OAuth, depois faça commit de plugins/v0/AGENTS.md na raiz do seu repositório. Detalhes: plugins/v0/SETUP.md.

Outros editores (Streamable HTTP)

Qualquer cliente que suporte MCP via Streamable-HTTP pode se conectar com esta configuração:

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

Isso cobre VS Code (Copilot), Windsurf, Cline, Gemini CLI e ferramentas similares. Consulte a documentação do seu cliente para saber onde fica a configuração do servidor MCP; o OAuth é executado no primeiro uso.

[!NOTE] Google AI Studio ainda não suporta conectores MCP nativamente (funciona apenas por meio de bridges de navegador de terceiros, o que não recomendamos). Para uma opção nativa do Google, use Firebase Studio, que suporta servidores MCP via .idx/mcp.json — coloque a mesma configuração url lá. Adicionaremos uma receita de primeira classe quando o AI Studio lançar suporte MCP nativo.

Como dar instruções ao seu agente

Dê ao agente um link do Visily e uma intenção clara. O agente extrai os IDs da URL — ele não abre a página.

Exemplos

"Encontre o board do Visily em que eu estava trabalhando para o release 4.6 e me dê o link."
"Construa esta tela do Visily como React + Tailwind: https://app.visily.ai/projects/abc/boards/456/elements/789"
"Implemente este board em Next.js, reutilizando meus componentes src/components/ui."
"Aplique o tema do meu board do Visily ao globals.css deste aplicativo."

Uma URL do Visily tem esta aparência:

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

Estruture seu arquivo do Visily para obter melhor código

Quanto mais intenção seu design carregar, melhor será o código gerado:

Dê nomes semânticos às suas telas e grupos-chave no Visily — os nomes fluem para a exportação e para a correspondência de links em "encontre meu board."
Apoie-se no tema / design system do Visily para que o agente possa aplicar tokens reais em vez de adivinhar cores e raios.
Peça uma tela por vez para boards grandes — seleções menores produzem resultados mais confiáveis.

Ferramentas

Ferramenta	Uso
`get_design_context`	Principal. Retorna `designData` + tema + metadados de captura de tela para um elemento.
`get_screenshot`	Busca uma captura de tela para verificação visual.
`get_board_theme`	Design system do board como tokens shadcn (`JSON` / `CSS` / `Tailwind`).
`list_workspaces`, `list_projects`, `list_boards`, `list_elements`	Descoberta / encontrar um board.
`get_workspace`, `get_project`, `get_board`, `get_element`, `get_element_export`	Avançado — metadados e exportações brutas raramente são necessários para os três casos de uso; prefira as ferramentas acima.

O servidor também inclui prompts (ex.: find_visily_board, generate_code_from_element, apply_board_theme) e recursos (visily://docs/...) que seu agente lê sob demanda.

Regras personalizadas (opcional)

Defina orientações no nível do projeto para manter a saída consistente — como notas de integração para um novo colega de equipe.

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.

Claude Code (CLAUDE.md):

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

Como este repositório é construído

plugins/ é gerado a partir de uma única fonte compartilhada (shared/) por scripts/build.mjs. Para alterar a integração, edite shared/ e execute npm run build — nunca edite plugins/ manualmente. Consulte CONTRIBUTING.md.