MasterGo Magic MCP

Um serviço MCP independente que conecta as ferramentas de design do MasterGo com modelos de IA, permitindo que eles recuperem dados DSL diretamente de arquivos de design.

GitHub

286

Experimente este MCPPatrocinado

Documentação

MasterGo Magic MCP

O MasterGo Magic MCP é um serviço MCP (Model Context Protocol) independente, projetado para conectar as ferramentas de design do MasterGo a modelos de IA. Ele permite que modelos de IA recuperem diretamente dados DSL de arquivos de design do MasterGo.

Principais Recursos

Recupera dados DSL de arquivos de design do MasterGo
Executa diretamente com npx
Não requer dependências externas, apenas o ambiente Node.js

Tutorial

https://mastergo.com/file/192644601973042

Exemplos de Prompts

Depois que o servidor MCP estiver conectado, você pode usar os seguintes prompts no seu chat de IA:

Extrair SVG e visualizar em HTML:

Extract SVG and preview in HTML: https://{domain}/file/{fileId}?layer_id={layerId}

Restaurar um design em código:

Restore design: https://{domain}/file/{fileId}?layer_id={layerId}

Substitua {domain}, {fileId} e {layerId} pelos seus valores reais. Você também pode usar links curtos:

Restore design: https://{domain}/goto/{shortLink}

Restaurar um design e salvar como arquivo HTML:

Restore design, save as HTML file: https://{domain}/file/{fileId}?layer_id={layerId}

Você também pode usar links curtos:

Restore design, save as HTML file: https://{domain}/goto/{shortLink}

Uso

Obtendo o MG_MCP_TOKEN

Acesse https://mastergo.com
Entre nas configurações pessoais
Clique na aba Configurações de Segurança
Encontre o token de acesso pessoal
Clique para gerar o token

Requisitos de Permissão

Importante: Se a ferramenta estiver conectada, mas retornar um erro de "sem permissão", verifique as seguintes condições:

Requisito de Versão da Conta:
- Requer uma conta MasterGo Team Edition ou superior
- A edição gratuita pessoal não suporta acesso por ferramentas MCP
Requisito de Localização do Arquivo:
- Os arquivos de design devem estar em Projetos de Equipe
- Arquivos na caixa de rascunho não podem ser acessados via ferramentas MCP

Opções de Linha de Comando

npx @mastergo/magic-mcp --token=YOUR_TOKEN [--url=API_URL] [--rule=RULE_NAME] [--proxy=PROXY_URL] [--format=FORMAT] [--header "Key: Value"] [--debug] [--no-rule] [--no-prefix]

Parâmetros:

--token=YOUR_TOKEN (obrigatório): Token da API MasterGo para autenticação
--url=API_URL (opcional): URL base da API, padrão é http://localhost:3000
--rule=RULE_NAME (opcional): Adiciona regras de design a serem aplicadas, pode ser usado várias vezes
--proxy=PROXY_URL (opcional): URL de proxy HTTP/HTTPS (ex.: http://127.0.0.1:7890), também suporta as variáveis de ambiente HTTPS_PROXY / HTTP_PROXY
--header "Key: Value" (opcional): Cabeçalho HTTP personalizado, pode ser usado várias vezes. Coloque o valor entre aspas quando ele contiver espaços. Cabeçalhos personalizados substituem os padrões — incluindo Content-Type e o token de autenticação — portanto, corresponda exatamente à chave padrão ao substituir. Também pode ser definido pela variável de ambiente MG_EXTRA_HEADERS como um objeto JSON (ex.: MG_EXTRA_HEADERS='{"X-Custom":"val"}'); cabeçalhos da CLI têm precedência sobre os da env.
--format=FORMAT (opcional): Formato de saída padrão para ferramentas de dados de design — um de json (padrão), yaml, tree. Um parâmetro de ferramenta format explícito por chamada substitui este valor. Também pode ser definido pela variável de ambiente DEFAULT_FORMAT.
--debug (opcional): Ativa o modo de depuração para informações detalhadas de erro
--no-rule (opcional): Desativa as regras padrão
--no-prefix (opcional): Registra ferramentas sem o prefixo de nome mcp__ (ex.: getDsl em vez de mcp__getDsl). Alguns clientes MCP (como Grok Build) ignoram silenciosamente ferramentas cujo nome server__tool totalmente qualificado contém mais de um separador __ — como o servidor já é prefixado, um nome de ferramenta mcp__getDsl torna-se server__mcp__getDsl e é descartado. Ative este sinalizador para esses clientes. Também pode ser definido pela variável de ambiente MG_NO_PREFIX (1/true/yes).

Você também pode usar o formato separado por espaços para os parâmetros:

npx @mastergo/magic-mcp --token YOUR_TOKEN --url API_URL --rule RULE_NAME --proxy PROXY_URL --format FORMAT --header "Key: Value" --debug

Variáveis de Ambiente

Alternativamente, você pode usar variáveis de ambiente em vez de argumentos de linha de comando:

MG_MCP_TOKEN ou MASTERGO_API_TOKEN: Token da API MasterGo
API_BASE_URL: URL base da API
RULES: Matriz JSON de regras (ex.: '["rule1", "rule2"]')
DEFAULT_FORMAT: Formato de saída padrão para ferramentas de dados de design (json | yaml | tree); o argumento --format e um parâmetro de ferramenta format explícito por chamada têm precedência.
MG_NO_PREFIX: Defina como 1/true/yes para registrar ferramentas sem o prefixo de nome mcp__ (o argumento --no-prefix tem prioridade).
HTTPS_PROXY / https_proxy / HTTP_PROXY / http_proxy: URL de proxy HTTP(S) (o argumento --proxy tem prioridade)

Formato de Saída das Ferramentas

As ferramentas de dados de design (mcp__getDesignSections, mcp__getDsl, mcp__getDesignSvgs, mcp__getDesignTexts, mcp__extractSvg, mcp__getMeta) aceitam um parâmetro opcional format que controla como o payload é serializado. O padrão é json, ou o valor definido via --format / DEFAULT_FORMAT (consulte Opções de Linha de Comando).

Valor	Descrição
`json`	Padrão. JSON compacto — útil ao canalizar a saída para ferramentas que esperam JSON. Byte idêntico ao comportamento anterior.
`yaml`	Menos tokens que JSON para designs típicos (layouts planos com valores repetidos se beneficiam mais).
`tree`	Formato compacto experimental. Chaves estruturais (`id`, `name`, `type`) são codificadas posicionalmente em cada linha de nó, e os valores de estilo permanecem deduplicados em um bloco `globalVars`. Designs com reutilização intensa de estilos obtêm a maior economia de tokens.

O formato é escolhido por chamada de ferramenta pelo modelo de IA. Para influenciá-lo, mencione o formato desejado no seu prompt, por exemplo:

Restore design, use tree format: https://{domain}/file/{fileId}?layer_id={layerId}

Observações:

tree se aplica às respostas de todas as seis ferramentas: mcp__getDesignSections (lista de seções e DSL por seção), mcp__getDsl, mcp__getDesignSvgs, mcp__getDesignTexts, mcp__extractSvg e mcp__getMeta. mcp__getMeta usa JSON como fallback em tree porque seu campo rules é markdown (o layout em árvore corromperia os cabeçalhos/blocos de código do markdown); outros payloads são renderizados como árvore. Formas verdadeiramente desconhecidas também usam JSON como fallback — nenhum dado é jamais mal formatado.
Para mcp__getDesignTexts, json é recomendado para máxima fidelidade de texto verbatim — embora todos os formatos façam round-trip sem perda de dados.
Todos os formatos fazem round-trip sem perda de dados. Um valor format inválido ou omitido usa json como fallback.

Instalação via Smithery Marketplace

Smithery é um marketplace de servidores MCP que facilita a instalação e o gerenciamento de serviços MCP.

Método 1: Instalar pelo site da Smithery

Acesse Smithery Marketplace
Clique no botão "Connect" ou "Install"
Selecione seu cliente MCP (ex.: Claude Desktop, Cursor, etc.)
Siga as instruções para concluir a instalação e a configuração

Uso no LINGMA

Procure por LINGMA no marketplace de extensões do VSCode e instale-o.

Após fazer login, clique em [Ferramentas MCP] na caixa de chat.

Clique em [Praça MCP] no topo para entrar no marketplace de MCP, encontre a ferramenta de colaboração de design do MasterGo e instale-a.

Após a instalação, volte para [Servidores MCP] e edite nosso serviço MCP para substituí-lo pelo seu próprio token do MasterGo.

Por fim, alterne o modo de chat para o modo agente na interface de chat.

Uso no cursor

Guia de uso do MCP do Cursor: https://docs.cursor.com/context/model-context-protocol#using-mcp-tools-in-agent

Você pode configurar o servidor MCP usando argumentos de linha de comando ou variáveis de ambiente:

Opção 1: Usando argumentos de linha de comando

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<YOUR_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {}
    }
  }
}

Opção 2: Usando variáveis de ambiente

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": ["-y", "@mastergo/magic-mcp"],
      "env": {
        "MG_MCP_TOKEN": "<YOUR_TOKEN>",
        "API_BASE_URL": "https://mastergo.com"
      }
    }
  }
}

Opção 3: Usando SSE (HTTP Streamable)

Nenhuma instalação local é necessária. O servidor MCP é executado remotamente e é acessado via SSE:

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "type": "http",
      "url": "https://mastergo.com/mcp/xf/sse",
      "headers": {
        "x-mg-useraccesstoken": "<YOUR_TOKEN>"
      }
    }
  }
}

Uso no cline

Opção 1: Usando argumentos de linha de comando

{
  "mcpServers": {
    "@master/mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<YOUR_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {}
    }
  }
}

Opção 2: Usando variáveis de ambiente

{
  "mcpServers": {
    "@master/mastergo-magic-mcp": {
      "command": "npx",
      "args": ["-y", "@mastergo/magic-mcp"],
      "env": {
        "MG_MCP_TOKEN": "<YOUR_TOKEN>",
        "API_BASE_URL": "https://mastergo.com"
      }
    }
  }
}

Uso no Open Code

O Open Code usa um bloco de configuração mcp com a matriz type: "local" e command:

{
  "mcp": {
    "mastergo-magic-mcp": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@mastergo/magic-mcp",
        "--token=<YOUR_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "environment": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      },
      "enabled": true
    }
  }
}

Estrutura do Projeto

Diretório src

O diretório src contém a implementação principal do serviço MasterGo Magic MCP:

index.ts: Ponto de entrada do aplicativo que inicializa o servidor MCP e registra todas as ferramentas
http-util.ts: Utilitário para lidar com requisições HTTP à API do MasterGo
types.d.ts: Definições de tipos TypeScript para o projeto

src/tools

Contém implementações das ferramentas MCP:

base-tool.ts: Classe base para todas as ferramentas MCP
get-dsl.ts: Ferramenta para recuperar dados DSL (Domain Specific Language) de arquivos de design do MasterGo
get-component-link.ts: Ferramenta para recuperar documentação de componentes a partir de links
get-meta.ts: Ferramenta para recuperar informações de metadados
get-component-workflow.ts: Ferramenta que fornece um fluxo de trabalho estruturado de desenvolvimento de componentes para componentes Vue e React, gerando arquivos de fluxo de trabalho e especificações de componentes

src/markdown

Contém arquivos markdown com documentação adicional:

meta.md: Documentação sobre a estrutura e o uso de metadados
component-workflow.md: Documentação do fluxo de trabalho de desenvolvimento de componentes, orientando o processo estruturado de desenvolvimento de componentes

Desenvolvimento Local

Execute yarn e yarn build para instalar as dependências e compilar o código
Encontre o caminho absoluto de dist/index.js
Adicione a configuração MCP local com seu token

"mastergo-mcp-local": {
  "command": "node",
  "args": [
    "absolute/path/to/dist/index.js",
    "--token=mg_xxxxxx",
    "--url=https://mastergo.com",
    "--debug"
  ],
  "env": {}
},

Reinicie seu editor para garantir que o MCP local esteja ativado

Após a execução bem-sucedida, você pode depurar com base nos resultados locais. Você pode criar seu próprio serviço MCP com base nas suas modificações.

Aceitamos contribuições de código e esperamos construir juntos o serviço MCP do MasterGo.

Licença

ISC