Swebsy MCP

Crie e edite sites reais no Swebsy Studio a partir do seu agente de codificação (Claude Code, Codex, Cursor, Windsurf) — sem taxas de IA por token. Funciona por meio de uma ponte local 127.0.0.1 e precisa de uma aba aberta do Swebsy Studio. Instalação: npx -y @swebsy/mcp setup

GitHubExperimente este MCPPatrocinado

Documentação

@swebsy/mcp — conecte seu agente de codificação ao Swebsy

Crie e edite sites reais com o agente de codificação que você já paga — sem taxas de IA por token.

npm CI License: MIT

An agent creating a site, rewriting the hero, adding a section and exporting it, while Swebsy Studio updates live

@swebsy/mcp é um servidor MCP que permite que Claude Code, Codex, Cursor, Windsurf, Cline, GitHub Copilot — ou qualquer agente que fale o Model Context Protocol — controle uma aba aberta do Swebsy Studio. Seu agente descobre templates, cria e abre sites, renomeia projetos, adiciona seções, edita conteúdo, alterna páginas, define todas as configurações do site (SEO, favicon, fontes, analytics, robots.txt, destino de publicação), captura screenshots e exporta o site finalizado, tudo por meio de um relay WebSocket 127.0.0.1 local. Nada é proxiado pelos nossos servidores, e o Studio redige segredos (chaves de API, tokens de deploy, histórico de chat) antes que qualquer coisa cruze a ponte. A política de serviço e privacidade do seu próprio agente de codificação ainda se aplica ao conteúdo não confidencial que ele recebe.

O que é o Swebsy?

O Swebsy é um construtor de sites visual com um modelo de propriedade real: você cria visualmente, exporta arquivos reais (HTML/CSS/JS) e publica onde quiser — sem lock-in, sem exigência de hospedagem proprietária. O plano gratuito roda totalmente local; nenhuma conta é necessária.

Por que usar um MCP em vez de um painel de IA integrado?

A maioria dos "construtores de sites com IA" adiciona um painel de chat e cobra por token além do modelo ao qual você já está assinado. O Swebsy adota a abordagem oposta — ele expõe o editor como uma ferramenta que o seu próprio agente pode controlar:

  • Sem cobrança de API por token. O Swebsy não está no meio dos custos do modelo. Você usa o plano Claude, Cursor, Codex ou Copilot que já paga.
  • Roda na sua máquina. O agente conversa com sua aba aberta do Studio por uma ponte 127.0.0.1 local — prompts e conteúdo não são enviados para serem medidos.
  • Traga seu próprio agente. Seu modelo, suas instruções personalizadas, seu fluxo de trabalho — não um wrapper fechado. Qualquer agente compatível com MCP funciona.
  • Você é dono do resultado. Tudo o que o agente cria é exportado como arquivos reais e portáteis que você pode hospedar em qualquer lugar.

Configuração

Um comando registra o Swebsy com cada agente compatível que encontrar (Claude Code, Codex, Cursor, Windsurf, VS Code, Cline):

npx -y @swebsy/mcp setup

Ele nunca altera uma entrada swebsy existente e nunca reescreve um arquivo de configuração que não consegue analisar; ele reporta o resultado de cada agente. Ou registre manualmente:

Claude Code

claude mcp add swebsy -- npx -y @swebsy/mcp

Codex

codex mcp add swebsy -- npx -y @swebsy/mcp

Cursor — adicione ao ~/.cursor/mcp.json (ou ao .cursor/mcp.json de um projeto):

{
  "mcpServers": {
    "swebsy": { "command": "npx", "args": ["-y", "@swebsy/mcp"] }
  }
}

GitHub Copilot (VS Code)

code --add-mcp '{"name":"swebsy","command":"npx","args":["-y","@swebsy/mcp"]}'

Windsurf — adicione o mesmo bloco JSON ao ~/.codeium/windsurf/mcp_config.json.

Cline — adicione o mesmo bloco JSON ao cline_mcp_settings.json, ou use o botão MCP Servers → Configure da extensão, que o abre:

  • macOS ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
  • Linux ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
  • Windows %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

Cline CLI (npm i -g cline) é uma instalação separada da extensão, com sua própria configuração em ~/.cline/data/settings/cline_mcp_settings.json e um bloco transport aninhado:

{
  "mcpServers": {
    "swebsy": {
      "transport": { "type": "stdio", "command": "npx", "args": ["-y", "@swebsy/mcp"] }
    }
  }
}

Ou deixe o próprio CLI escrevê-lo: cline mcp add swebsy --yes -- npx -y @swebsy/mcp.

Emparelhamento

  1. Execute npx -y @swebsy/mcp setup
  2. Reinicie seu agente.
  3. Peça a ele: "Crie uma landing page com o Swebsy." A primeira solicitação abre o Studio e o conecta.

Você conecta uma vez por navegador. Sempre que nenhuma aba do Studio estiver conectada, a próxima chamada de ferramenta abre o Studio e o reconecta automaticamente (aguarda até 20 segundos). A sessão é salva em ~/.swebsy/agent-<port>.session, então ela sobrevive ao reinício da ponte.

O Claude Code também lista um prompt /swebsy:swebsy (MCP) que orienta o agente pelo processo de conexão e abertura de um site. Outros agentes mostram prompts MCP à sua própria maneira, se mostrarem.

Para emparelhar manualmente (o navegador não abriu, o Swebsy roda em um navegador diferente, ou SWEBSY_NO_OPEN=1 está definido):

  1. Peça ao seu agente para executar a ferramenta swebsy_start_pairing. Ela abre o link de emparelhamento no seu navegador padrão automaticamente e também retorna o link, o código bruto e a porta do relay.
  2. O Swebsy conecta automaticamente e remove o código da barra de endereço depois que ele é usado. (Defina SWEBSY_NO_OPEN=1 para pular a abertura automática e apenas obter o link de volta.)
  3. Se o navegador não abriu — ou o Swebsy está rodando em um navegador diferente — abra o link retornado lá você mesmo, ou use os campos de fallback em Configurações globais → Agentes de codificação → Não conectou? Emparelhe manualmente: cole o código bruto, deixe a porta em 37373 a menos que você tenha alterado SWEBSY_AGENT_PORT, e clique em Conectar.
  4. Dê o prompt ao seu agente como de costume — ele controla a aba pelas ferramentas swebsy_*.

Mantenha a aba do Studio aberta. Se o navegador a colocar em suspensão, as ferramentas retornam tab_unresponsive até você clicar na aba. Fixá-la pode ajudar, ou adicione o Studio em Configurações do Chrome → Desempenho → "Manter sempre estes sites ativos".

Guia completo: https://docs.swebsy.com/settings/ai-coding-agent/

Vários agentes

Vários agentes de codificação podem compartilhar uma aba do Studio emparelhada. Registre @swebsy/mcp em cada agente e use o mesmo SWEBSY_AGENT_PORT (padrão 37373) para cada servidor. O primeiro processo MCP inicia o broker local; os processos posteriores se juntam a ele automaticamente, então o Studio só precisa ser emparelhado uma vez.

O Studio mostra a lista de agentes conectados e a atividade. O broker serializa comandos entre agentes para que o editor processe um comando por vez, e roteia cada resultado, screenshot e exportação de volta ao agente que o solicitou. Uma aba do Studio pode ser emparelhada a um broker por vez; emparelhar outra aba revoga a aba anterior.

O que seu agente pode fazer

Uma vez emparelhado, seu agente pode trabalhar a partir da Home ou do Studio. Ele pode atualizar e listar templates instalados, criar o site em branco padrão ou importar um template sem alterações, listar metadados de sites salvos, abrir sites por ID e renomear seus nomes internos do Swebsy. Nomes duplicados são permitidos; IDs são autoritativos.

Após swebsy_create_site ou swebsy_open_site, faça polling de swebsy_status até o siteId esperado aparecer e editorReady ser true. O agente pode então ler a árvore de páginas, adicionar e editar seções, criar e vincular páginas, inserir blocos, gerenciar símbolos reutilizáveis — incluindo repetir um com conteúdo diferente por instância enquanto o estilo permanece sincronizado — capturar screenshots em qualquer viewport, e exportar o projeto.

swebsy_list_sites retorna apenas metadados — nunca conteúdo de página, miniaturas, assets, revisões ou configurações. Análises de criação/renomeação orientadas por agente contêm apenas IDs de origem/template/site, nunca nomes internos ou conteúdo do site.

Configuração

Variável de ambientePadrãoFinalidade
SWEBSY_AGENT_PORT37373Porta em que o relay local escuta
SWEBSY_AGENT_DIRworkspace .swebsy-agentOnde screenshots/exportações são salvos
SWEBSY_APP_URLhttps://studio.swebsy.comOrigem do Studio para o link swebsy_start_pairing (defina para local/self-host)
SWEBSY_NO_OPEN(não definido)Defina para pular a abertura automática do link de emparelhamento no navegador

Compilar a partir do código-fonte

O pacote publicado é tudo o que você precisa para usar isso; o código-fonte está aqui para ler, auditar ou modificar.

git clone https://github.com/swebsy/MCP.git
cd MCP
npm install
npm test
npm run build      # -> dist/server.js

Aponte um agente para sua compilação local em vez do npm:

claude mcp add swebsy -- node /absolute/path/to/MCP/dist/server.js

Este repositório é um espelho gerado, capturado do diretório mcp/ do repositório principal do Swebsy a cada release. Cada arquivo aqui é sobrescrito na próxima sincronização, então um pull request contra ele seria apagado em vez de mesclado — abra uma issue e aplicaremos a alteração upstream.

Links

Licença

MIT