Tuli Builder

Servidor MCP do WordPress integrado ao Tuli Builder: agentes de IA criam páginas, templates, query loops e tipos de post personalizados.

Ver em tulibuilder.com

Documentação

1. Requisitos

  • WordPress 6.0 ou mais recente
  • PHP 7.4 ou mais recente
  • Uma licença ativa do Tuli Builder (compra única, veja preços)
  • Opcional: uma chave de API do OpenRouter para o assistente de IA integrado
  • Opcional: um agente de IA compatível com MCP (Claude Code, Codex CLI, Gemini CLI, Cursor, Windsurf, VS Code, OpenCode, Antigravity, Claude Desktop)

Cópias locais e de staging de um site não contam para o limite de sites da sua licença.

2. Instalar e ativar o Tuli Builder

  1. Compre uma licença na página de preços. Você recebe sua chave de licença por e-mail e no Customer Portal.
  2. No Customer Portal, abra Download e baixe o arquivo zip do tema Tuli.
  3. No WordPress, vá em Aparência → Temas → Adicionar novo → Enviar tema, escolha o zip, clique em Instalar agora e depois em Ativar.
  4. Vá em Tuli → Licença, cole sua chave de licença e ative-a.

O Tuli é um tema e um construtor de páginas em um só, então você não precisa de um plugin de construtor separado.

3. Crie sua primeira página

  1. Crie uma página em Páginas → Adicionar nova, ou abra uma existente.
  2. Clique em Editar com Tuli. Ele aparece na tela de edição, nas ações da linha da lista de páginas e na barra de administração.
  3. Arraste elementos da biblioteca de elementos (mais de 60 elementos, incluindo seções, contêineres, títulos, botões, imagens, sliders, abas, acordeões, formulários e menus), ou peça ao assistente de IA para construir a página.
  4. Selecione qualquer elemento para editá-lo no painel de estilos, ou escreva CSS diretamente. O painel e o CSS permanecem sincronizados nos dois sentidos.
  5. Use os alternadores de dispositivo para definir estilos de tablet e celular. Eles são escritos como consultas de mídia CSS reais.
  6. Clique em Salvar.

Por padrão, o construtor está habilitado para Páginas e Modelos. Você pode ativá-lo para outros tipos de post em Tuli → Configurações → Geral.

4. Converter HTML em WordPress

Cole HTML, CSS e JavaScript no construtor, e o Tuli mapeia cada tag no painel Estrutura como um elemento editável. Isso funciona para páginas codificadas manualmente, modelos que você comprou e sites gerados com ChatGPT, Claude, Lovable ou outras ferramentas de IA. Seletores, abreviações, comentários e consultas de mídia são mantidos como estão. Regras de classe vão para o CSS global, para que você possa reutilizá-las em outras páginas.

Guia passo a passo: Como converter HTML em WordPress e Do ChatGPT ao WordPress.

5. Configurar o assistente de IA

  1. Crie uma chave de API em openrouter.ai. Uma chave dá acesso a modelos da Anthropic (Claude), OpenAI (GPT), Google (Gemini), xAI, DeepSeek, Qwen e outros. O OpenRouter cobra por modelo.
  2. No WordPress, vá em Tuli → Configurações → OpenRouter, cole a chave e escolha um modelo padrão.
  3. Abra qualquer página com Editar com Tuli e descreva o que você quer no painel do Assistente de IA. Por exemplo: "Crie um site de portfólio para um fotógrafo." Digite @ para anexar uma página ou modelo como contexto.
  4. O assistente escreve HTML, CSS e JavaScript ao vivo no canvas. Revise a pré-visualização e clique em Salvar para manter as alterações.

Sua chave de API é armazenada no seu servidor e nunca é enviada ao navegador.

6. Conectar um agente de IA com o servidor MCP

O Tuli Builder inclui um servidor MCP do WordPress (Model Context Protocol, Streamable HTTP). Uma vez conectado um agente de IA, ele pode gerenciar o site para você: páginas, posts, layouts Tuli, modelos, loops de consulta, tipos de post personalizados, taxonomias, mídia, plugins e CSS/JS global.

Ativar

  1. Vá em Tuli → Configurações → Servidor MCP e marque Habilitar o servidor MCP para este site. Salve.
  2. Em Senhas de aplicativo, crie uma senha. Dê um nome, escolha qual usuário ela representa, marque as ações que ela pode executar (ou escolha acesso total) e adicione instruções opcionais para o agente.
  3. Copie os detalhes de conexão imediatamente, porque a senha é exibida apenas uma vez. O Tuli fornece um prompt pronto para o agente, além de trechos de configuração para cada cliente.

Você pode revogar qualquer senha de aplicativo a qualquer momento. Os agentes nunca podem alterar ou trocar seu tema. O servidor MCP exige uma licença ativa.

Detalhes da conexão

  • Endpoint: https://your-site.com/wp-json/tuli/v1/mcp
  • Transporte: HTTP (Streamable HTTP)
  • Cabeçalho: Authorization: Bearer YOUR_APPLICATION_PASSWORD

Claude Code

claude mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

OpenAI Codex CLI

codex mcp add my-site -- npx -y mcp-remote https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Gemini CLI

gemini mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Cursor, Windsurf, VS Code e outros clientes configurados por JSON

{
  "mcpServers": {
    "my-site": {
      "type": "http",
      "url": "https://your-site.com/wp-json/tuli/v1/mcp",
      "headers": { "Authorization": "Bearer YOUR_APPLICATION_PASSWORD" }
    }
  }
}

Onde o arquivo vai: o Cursor usa ~/.cursor/mcp.json ou .cursor/mcp.json. O Windsurf usa ~/.codeium/windsurf/mcp_config.json (com serverUrl em vez de url). O VS Code usa .vscode/mcp.json. O OpenCode usa opencode.json. A tela de configurações do Tuli mostra o trecho exato para cada cliente.

Claude Desktop e outros clientes somente stdio

{
  "mcpServers": {
    "my-site": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-site.com/wp-json/tuli/v1/mcp", "--header", "Authorization: Bearer YOUR_APPLICATION_PASSWORD"]
    }
  }
}

Isso usa a ponte mcp-remote, que requer Node.js. Reinicie o cliente após salvar.

O que pedir ao agente

  • "Crie uma landing page para nossa promoção de primavera com um herói, três cards de recursos e um CTA de inscrição."
  • "Adicione um tipo de post personalizado Imóvel com campos de preço, quartos, banheiros e cidade, seis listagens de exemplo e uma página de listagens filtrável."
  • "Escreva e publique um post de blog sobre nossos novos preços, com uma imagem em destaque."
  • "Crie um modelo de cabeçalho e rodapé e mostre-os em todas as páginas."

Vídeo explicativo: Crie um site WordPress usando Claude Code através do servidor MCP.

7. Modelos: cabeçalho, rodapé, post único, arquivo

Em Tuli → Modelos, você pode criar cabeçalhos, rodapés, layouts de post único, arquivos, páginas 404 e de busca, além de seções reutilizáveis. Cada modelo tem condições de exibição: regras de inclusão e exclusão com prioridade, para que você controle exatamente onde ele aparece. Crie uma seção uma vez e reutilize-a em qualquer página com o elemento Modelo.

8. Loops de consulta e dados dinâmicos

Ative um loop de consulta para qualquer elemento e ele se repete uma vez por resultado. As fontes incluem WP_Query (tipo de post, quantidade, ordem, filtros de taxonomia e meta), a consulta principal, PHP bruto, um repeater do ACF ou relações do WooCommerce. Adicione o elemento Filtro para filtragem AJAX e o elemento Paginação para paginação.

Para imprimir valores ao vivo em qualquer texto ou atributo, use tokens de dados dinâmicos entre chaves:

  • {get_the_title}: título do post
  • {get_permalink}: URL do post
  • {get_the_excerpt}: resumo
  • {get_the_post_thumbnail_url}: URL da imagem em destaque
  • {acf:field_name}: qualquer valor do Advanced Custom Fields

Você pode chamar qualquer função PHP do WordPress ou personalizada da mesma forma, e dentro de um loop cada token é resolvido para o item atual.

9. WooCommerce, ACF e WP Grid Builder

  • WooCommerce: mais de 30 elementos nativos, incluindo título do produto, preço, adicionar ao carrinho, galeria, abas, produtos relacionados, carrinho, checkout, minha conta e mini carrinho. Guia: Crie uma loja WooCommerce com IA.
  • ACF: os nomes dos campos aparecem automaticamente no seletor de dados dinâmicos, e os repeaters do ACF podem alimentar loops de consulta.
  • WP Grid Builder: os elementos Facet, Grid e View More são suportados.
  • Todo o resto: blocos Gutenberg, qualquer shortcode, PHP bruto (pode ser desativado) e Google Fonts.

10. Suporte

As licenças incluem atualizações vitalícias e suporte. Assista aos tutoriais em vídeo, consulte as perguntas frequentes ou entre em contato conosco. Gerencie suas licenças, sites e downloads no Customer Portal.