Conectar uma ferramenta de IA

Conectar uma ferramenta de IA

Quando o MCP está ativado nesta implantação do AppScreenshots, conecte uma ferramenta compatível a:

https://appscreenshots.net/api/mcp

Escolha HTTP/Streamable HTTP e OAuth. Entre com sua conta do AppScreenshots no navegador, selecione os projetos e recursos que a ferramenta pode usar e decida se ela pode criar projetos. Não é necessário acesso ao banco de dados nem chave de API.

Conecte seu cliente

Os comandos abaixo registram o endpoint em cada cliente. Depois de conectar, conclua o login no navegador quando o cliente apresentá-lo.

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

Kit de conexão

O repositório público appscreenshots-mcp traz arquivos de configuração prontos para todos os clientes acima, um Skill de agente opcional que ensina o fluxo de screenshots e um comando doctor que verifica o servidor pelo seu terminal:

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # imprime um trecho de configuração
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

O auxiliar apenas imprime configuração e instala o Skill. Ele não é um servidor stdio local — use a conexão remota nativa do seu cliente.

Ferramentas

As nove ferramentas abaixo são expostas via Streamable HTTP. Os clientes podem prefixar os nomes. O servidor hospedado é a fonte da verdade para os esquemas de entrada e as permissões da conta.

Operações de edição

O update_project aceita uma lista discriminada de operações:

• set_name — renomeia o projeto
• add_frame / remove_frame / reorder_frames — gerencia quadros
• upsert_element — insere ou substitui um elemento; exige geometria completa e preserva campos omitidos do mesmo tipo
• patch_element — edição parcial por id do elemento; não é permitido mudar o tipo
• remove_element — remove um elemento
• set_background — define o fundo de um quadro; fundos compartilhados são materializados por quadro
• set_locales — define 1–20 idiomas e o idioma padrão
• set_canvas — tamanho da tela (100–5000) e modo (separate ou continuous)

Os elementos carregam tipografia, campos de mockup de dispositivo, referências assetId de imagem, formas, ícones, rotation e stackOrder. Imagens são referenciadas por assetId autorizado — nunca por URL ou caminho local, e as referências existentes ficam no servidor, então não as reenvie.

Cada escrita lógica deve usar uma chave de idempotência nova; reutilize-a apenas em uma repetição idêntica. Após um conflito de revisão, leia a versão mais recente e reconcilie. Nunca use SQL, HTML ou scripts como instruções de edição.

Erros

Os erros retornam um corpo JSON {code, message} com isError: true:

Autorização e limites

O servidor usa OAuth 2.1 com PKCE e login no navegador:

• Escopos: projects:read, projects:write (somente se você permitir criar ou editar), assets:read e offline_access.
• Tokens de acesso duram uma hora; tokens de refresh duram 30 dias.
• Tokens de acesso exigem uma concessão ativa: se você revogar a conexão, os tokens existentes param de funcionar imediatamente.
• Limites de uso: 60 chamadas MCP por minuto no plano gratuito e 120 por minuto nos pagos. Exceder retorna HTTP 429 com Retry-After: 60.
• Corpos de requisição têm limite de 2 MB; projetos têm limite de 20 quadros e 100 elementos por quadro.

Os direitos do plano seguem valendo: as restrições de projetos, templates pagos, fontes personalizadas e exportação em lote não mudam, e não há cobranças de IA hospedada — o design e os textos vêm da IA conectada.

Comece com seus screenshots

Envie os screenshots originais no editor do site. Autorize esse projeto ou selecione recursos individuais na página de consentimento. O MCP não expõe ferramentas de upload binário; um arquivo anexado num chat não fica automaticamente acessível a este serviço.

Experimente este prompt:

A IA conectada fornece o design e os textos; o MCP salva projetos editáveis. O get_project_preview retorna o link do editor e instruções de revisão, não bytes de imagem. Um agente com ferramentas de navegador pode abrir o editor, inspecionar os screenshots, corrigir o design via MCP e recarregar com segurança para revisar a versão mais recente. O login do navegador é separado do OAuth do MCP, e alterações não salvas devem ser preservadas antes de recarregar. A pré-visualização e a exportação ficam com você, no editor do site.

Gerenciar o acesso

Abra Settings → Connected AI tools para alterar os projetos/recursos selecionados ou revogar uma conexão. A ferramenta não pode acessar projetos não selecionados. Se o site e uma ferramenta de IA editarem o mesmo projeto ao mesmo tempo, recarregue a versão mais recente antes de salvar alterações conflitantes.

A revisão no navegador não exige Browserless nem uma fila de renderização em segundo plano. Este MCP expõe ferramentas de projeto e orientação de revisão no navegador, não renderização na nuvem. Sem ferramentas de navegador/imagem, o agente deve devolver o link do editor e informar que a revisão visual está pendente, em vez de afirmar que verificou.

Solução de problemas

Para notas específicas por cliente e a matriz de verificação atual, consulte o guia de solução de problemas do kit de conexão.