betterimage

Servidor MCP para cards sociais: uma imagem OG de qualquer URL de página, mais de 100 designs, verificação de pré-visualização de links para X, Slack e Discord, meta tags. Sem necessidade de chave de API.

Ver em betterimage.ioExperimente este MCPPatrocinado

Servidor MCP hospedado

npx add-mcp 'https://betterimage.io/mcp'

Instala no Claude Code, Codex, Cursor e outros

Documentação

Adicione a URL do servidor

Uma linha nas configurações de MCP do seu cliente: https://betterimage.io/mcp. Nada para instalar, nada para executar.

Pergunte em palavras simples

"Crie um card de lançamento para nossa nova página de preços", "por que este link parece quebrado no LinkedIn", "dê a cada post do blog uma og:image". O assistente escolhe a ferramenta.

Veja o card no chat

As pré-visualizações voltam como imagens na conversa. URLs assinadas e meta tags voltam como texto pronto para colar no seu código.

Adicione ao seu cliente

O servidor fala MCP via HTTP em https://betterimage.io/mcp. Adicione sem chave para usar as ferramentas gratuitas. Para seus próprios modelos, há duas portas: https://betterimage.io/mcp/account, que pede para você entrar no betterimage.io no navegador uma vez (Claude.ai, Claude Desktop, Claude Code, Cursor, VS Code e Windsurf suportam), ou uma chave de API de Configurações da conta > API enviada como cabeçalho Authorization: Bearer, para scripts e CI. Cada cliente abaixo mostra ambas.

Claude Code

# free tools, no account:
claude mcp add --transport http betterimage https://betterimage.io/mcp

# your own templates: sign in once (run /mcp in a session, pick betterimage, Authenticate)
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp/account

# or, for scripts and CI, an API key instead of signing in:
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp \
  --header "Authorization: Bearer bi_a1b2c3d4e5_XxYyZz..."

Cursor

Instalar no Cursor com um clique para as ferramentas gratuitas. Para seus próprios modelos, use a URL /mcp/account e entre quando o Cursor pedir, ou adicione isto a ~/.cursor/mcp.json com uma chave (o arquivo global; um .cursor/mcp.json em nível de projeto acaba no repositório junto com a chave):

{
  "mcpServers": {
    "betterimage": {
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

VS Code (GitHub Copilot)

Instalar no VS Code com um clique para as ferramentas gratuitas. Para seus próprios modelos, use a URL /mcp/account e entre quando o VS Code pedir, ou adicione isto a .vscode/mcp.json com uma chave. O VS Code pede a chave uma vez e a mantém no armazenamento secreto, então o arquivo em si não contém segredo:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "betterimage-key",
      "description": "betterimage.io API key (leave empty for the free tools)",
      "password": true
    }
  ],
  "servers": {
    "betterimage": {
      "type": "http",
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer ${input:betterimage-key}" }
    }
  }
}

Claude.ai e Claude Desktop

Em um plano pago do Claude, abra Configurações > Conectores, escolha "Adicionar conector personalizado" e cole a URL da conta. O Claude abre um login do betterimage.io, você clica em Permitir, e seus modelos salvos, renderizações limpas e URLs assinadas de og:image ficam disponíveis no chat. Sem chave para copiar em lugar nenhum.

Settings > Connectors > Add custom connector
Name: betterimage
URL:  https://betterimage.io/mcp/account

Prefere nenhuma conta? Adicione https://betterimage.io/mcp: o navegador de designs, pré-visualizações, o verificador de links e o gerador de meta tags funcionam sem entrar. A URL da conta também funciona no Claude Code, Cursor e VS Code, que executam o mesmo login no seu navegador. Você pode desconectar um aplicativo a qualquer momento em Configurações da conta > API.

Windsurf e outros clientes

Qualquer cliente que suporte servidores MCP remotos via Streamable HTTP funciona. O mcp_config.json do Windsurf aceita o servidor como serverUrl:

{
  "mcpServers": {
    "betterimage": {
      "serverUrl": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

Se você usar uma chave, ela fica no arquivo de configuração do cliente. Trate esse arquivo como qualquer outro segredo: mantenha-o fora de repositórios compartilhados e revogue a chave em Configurações da conta > API se ela vazar. Entrar em vez disso não armazena segredo na sua máquina além do token do próprio cliente, e a conexão aparece em Aplicativos conectados, onde um clique desconecta. De qualquer forma, o acesso pode renderizar seus modelos contra sua cota e salvar novos a partir de predefinições; não pode editar ou excluir modelos, tocar em cobrança ou alterar qualquer outra coisa na conta.

As ferramentas

10 ferramentas, listadas aqui direto do servidor. 5 funcionam sem chave; as demais precisam de uma. Seu assistente lê as mesmas descrições e decide quando chamar o quê, então você raramente nomeia uma ferramenta.

Ferramenta	O que faz	Precisa de chave
`card_from_url`	Card a partir de uma URL de página. Crie um card social para uma página que já existe, em uma chamada: busca a página como um rastreador, pega título, descrição, autor, domínio e ícone do site, escolhe o design inicial que se encaixa na página (uma decisão Jev sobre cada predefinição, cerca de 100 ms) e retorna a imagem (exibida inline, com marca d'água, gratuita). Use primeiro quando o usuário der uma URL: "crie uma imagem OG para meu post mais recente". Qualquer campo que você passar substitui o que a página diz. Passe preset (veja list_presets) para escolher o design você mesmo, ou um tamanho. Sem chave de API necessária; uma busca de página mais uma renderização por chamada.	Não
`list_presets`	Listar designs iniciais. Navegue pelos designs prontos (predefinições) dos quais um card pode começar: chave, nome, tipo de modelo, tamanho nativo, categorias de caso de uso, uma descrição visual de uma linha e uma URL de imagem de pré-visualização. Comece aqui quando o usuário quiser um card social e não tiver modelo salvo. Depois chame preview_card com a chave escolhida. Sem chave de API necessária.	Não
`preview_card`	Pré-visualizar um card a partir de uma predefinição. Renderize uma predefinição com o texto do usuário e retorne a imagem (exibida inline). Gratuito, sem chave de API; a pré-visualização carrega uma pequena marca d'água do betterimage.io e não toca em nenhuma cota. Use para mostrar ao usuário como o card ficará antes de ele se comprometer. Para uma imagem limpa: save_template + render_card em um plano pago da API, ou o download limpo único no editor.	Não
`check_link_preview`	Verificar como um link é pré-visualizado. Busque uma página pública como os rastreadores de X, Facebook, LinkedIn, Slack e Discord fazem e relate o que eles mostrarão: o título efetivo, descrição e imagem por plataforma, o formato real da og:image, dimensões e peso, e uma lista de problemas concretos com correções. Use quando um usuário perguntar por que o link parece errado ao ser compartilhado, ou antes de publicar. Apenas URLs http(s) na internet pública; uma busca de página mais até duas buscas de imagem por chamada. Sem chave de API necessária.	Não
`generate_meta_tags`	Gerar meta tags. Construa o bloco <head> completo para uma página: <title>, meta descrição, canônica, tags Open Graph e Twitter card, com largura/altura da og:image. Retorna HTML para colar mais notas sobre o que vale corrigir (título longo demais, imagem via http). Use depois de check_link_preview, ou sempre que o usuário precisar das tags para uma nova página. Sem chave de API necessária; nada é buscado.	Não
`list_templates`	Listar modelos salvos. Os modelos salvos do usuário (designs próprios, feitos no editor ou com save_template): slug, nome, tipo, os campos que render_card e og_image_url podem substituir, e quando foi editado pela última vez. Precisa de chave de API. Chame antes de render_card ou og_image_url quando você não souber o slug.	Sim
`save_template`	Salvar uma predefinição como modelo. Copie uma predefinição (opcionalmente com o texto do usuário como novos padrões) para a conta do usuário como modelo salvo, para que render_card e og_image_url possam usá-la. Precisa de chave de API. Faça isso uma vez por design, não por imagem: depois, cada renderização só passa o texto que muda. Retorna o slug para usar em seguida e um link para ajustar o design no editor.	Sim
`render_card`	Renderizar um modelo salvo. Renderize um dos modelos salvos do usuário com o texto fornecido e retorne o PNG (exibido inline, em 1x). Precisa de chave de API. Em um plano pago, a imagem é limpa (sem marca d'água); no nível gratuito, tem marca d'água. Cada chamada gasta uma imagem da cota mensal. Use quando o usuário quiser o arquivo real, por exemplo, para hospedar ele mesmo. Para uma tag og:image que não precisa de hospedagem, ou para um arquivo retina 2x, prefira og_image_url.	Sim
`og_image_url`	URL assinada de og:image. Construa uma URL de imagem assinada para um modelo salvo com o texto fornecido, pronta para colocar na tag <meta property="og:image"> de uma página. Nada é renderizado agora: a imagem é gerada quando um rastreador busca a URL, armazenada em cache na borda por um dia, e cada busca sem cache gasta uma imagem da cota mensal. Precisa de chave de API. Esta é a forma de infraestrutura zero para dar a cada página seu próprio card; use em modelos de página, hooks de CMS e geradores de site estático. Retorna a URL e a meta tag pronta.	Sim
`get_usage`	Cota e plano. O plano da chave de API, se as renderizações têm marca d'água, e a cota de imagens deste mês: usada, restante e data de redefinição. Precisa de chave de API. Verifique antes de renderizações em lote, ou quando uma renderização voltar com marca d'água inesperadamente.	Sim

Automatizando og:images com um agente

As ferramentas são feitas para encadear, então um agente pode levar um site de "sem imagens de pré-visualização" a "um card de marca por página" em uma única tarefa. Esta é a sequência que ele seguirá; cada passo é uma chamada de ferramenta, e tudo funciona no Claude Code, Cursor ou um agente de codificação rodando em CI.

Escolha um design uma vez. list_presets com uma categoria como blog-post, depois preview_card com um título real do site para você aprovar o visual. Diga "mais escuro", "o serifado", "com nosso domínio no canto" e ele renderiza de novo.
Salve como seu modelo. save_template copia a predefinição para sua conta com seu texto como padrões e retorna um slug. Daqui em diante, o design está travado; o texto e as imagens mudam.
Dê a cada página sua URL. Para cada página, o agente chama og_image_url com o título da página e coloca o resultado no head, ou em generateMetadata, um partial do Hugo, um hook de CMS. Sem arquivos, sem armazenamento, nada para executar: a imagem renderiza no primeiro rastreamento e é armazenada em cache na borda por um dia.
Ou hospede os arquivos você mesmo. render_card retorna o PNG; o agente o escreve ao lado da página e aponta og:image para sua própria URL. Cota previsível (uma renderização por página, sempre) e o mesmo design.
Coloque uma imagem diferente em cada card. Cada ferramenta de renderização aceita image_url em seus campos: uma URL https absoluta que é buscada no servidor e desenhada no espaço que o design já define. É isso que transforma um modelo salvo em um catálogo inteiro de loja, um card por produto, com o enquadramento, moldura e cores idênticos em todos. logo_url e background_url funcionam da mesma forma.
Verifique a página ao vivo. check_link_preview em uma URL publicada confirma o que X, LinkedIn, Slack e Discord realmente mostrarão, e get_usage mantém o lote dentro da cota mensal.

As URLs assinadas são as mesmas documentadas na API REST, então o que o agente conecta hoje continua funcionando sem cliente MCP no loop amanhã. Código de assinatura pronto para Node, Python, Ruby, Go e PHP está nessa página.

Coisas para perguntar

"Crie um card social para um post chamado Dez lições da nossa migração." O assistente navega pelos designs, escolhe um e mostra uma pré-visualização com seu título. Peça "algo mais escuro" ou "o serifado" e ele renderiza de novo.
"Por que meu link fica ruim no LinkedIn?" Ele busca a página como os rastreadores fazem, lista o que está faltando ou errado, depois escreve as meta tags corrigidas e um card para acompanhar. As mesmas verificações do verificador de pré-visualização de links e do gerador de meta tags, sem sair do chat.
"Adicione uma og:image a cada post do meu blog Next.js." Com uma chave de API: ele salva um design como seu modelo, depois constrói uma URL de imagem assinada por página e a conecta em generateMetadata. Sem arquivos de imagem para hospedar.
"Renderize nosso card de lançamento para v2.4 nos tamanhos YouTube e quadrado." Duas renderizações de um modelo, retornadas como imagens que você pode salvar.

Gratuito, ou com chave

Sem chave: navegue pelos designs, pré-visualize qualquer um com seu texto, verifique pré-visualizações de links e gere meta tags. As pré-visualizações carregam a pequena marca "Made with betterimage.io", igual ao editor gratuito. Um download limpo único de qualquer pré-visualização custa $4.99 no editor.
Conectado, ou com chave gratuita: seus modelos salvos, URLs assinadas e uso, com a mesma marca d'água e 25 imagens por mês para construir. Entrar (pela URL da conta) cria uma chave nomeada após o aplicativo na sua conta, então ambas as rotas compartilham uma única cota.
Plano pago (a partir de $9/mês): imagens limpas dos seus modelos, 500 por mês, compartilhadas com a API REST e downloads limpos no editor. Cada renderização e cada busca sem cache de uma URL assinada conta como uma. Planos e limites estão na página da API.

Perguntas

O que é um servidor MCP?

O Model Context Protocol é um padrão aberto que permite que assistentes de IA chamem ferramentas externas. Um servidor MCP descreve suas ferramentas uma vez; o assistente lê essas descrições e chama uma ferramenta quando uma conversa precisa dela. Este servidor expõe a renderização de cards, o verificador de links e o gerador de meta tags do betterimage.io dessa forma.

Preciso de uma conta?

Não. Navegar por designs, prévias, o verificador de links e o gerador de meta tags funciona apenas com a URL. Seus próprios templates salvos precisam de uma conta: entre pela URL da conta (Claude.ai, Claude Desktop e qualquer cliente que suporte OAuth) ou use uma chave de API como cabeçalho. Um plano pago remove a marca d'água.

É o mesmo que a API?

Mesmo renderizador, mesmos templates, mesma cota. A API REST é para o seu código; o servidor MCP é para o seu assistente. Uma chave funciona em ambos, e renderizações de qualquer um contam contra a mesma cota mensal.

O assistente pode alterar meus templates ou minha conta?

Ele pode criar um novo template a partir de um preset (é isso que save_template faz) e renderizar ou assinar URLs para os existentes. Ele não pode editar, excluir ou compartilhar templates, alterar cobranças ou tocar em qualquer outra coisa na conta. Mudanças de design acontecem no editor, e um aplicativo com o qual você entrou pode ser desconectado nas configurações da conta.

Por que uma prévia voltou com marca d'água?

Prévias de presets sempre a carregam, com ou sem chave; elas são gratuitas e não usam cota. Imagens limpas vêm de render_card em um plano pago, ou do download limpo único no editor.

Quais clientes são suportados?

Qualquer cliente MCP que se conecte a servidores remotos via Streamable HTTP: Claude Code, Claude.ai e Claude Desktop, Cursor, VS Code com GitHub Copilot, Windsurf e outros. O servidor fala a revisão atual do protocolo (2026-07-28, metadados sem estado por requisição e server/discover) e as revisões anteriores baseadas em initialize até 2024-11-05 na mesma URL, então clientes antigos e novos funcionam. Não há pacote local para instalar. Entre com sua conta betterimage (OAuth) na URL da conta, ou envie uma chave de API como cabeçalho; a URL simples não precisa de nenhum dos dois.

Dê um designer ao seu assistente

Adicione a URL uma vez. Cada card, prévia e meta tag depois disso está a uma frase de distância.