Conectores
Um conector vincula um serviço que você já usa, como Stripe, Supabase ou GitHub, ao WebTwizz. Você conecta uma conta uma vez, e ela fica salva nos seus conectores. A partir daí, qualquer projeto seu pode usá-la, e cada projeto só recebe os conectores que você escolher para ele.
Quando um projeto usa um conector:
- As chaves do serviço são salvas como segredos do projeto, para que o código do seu site possa usá-las.
- Tudo que seu site precisa carregar para esse serviço, como uma tag de análise ou uma janela de chat, é adicionado ao código do projeto para você. Veja Código no seu projeto.
- O editor mostra os dados do próprio serviço para esse projeto: receita, erros, visitantes, commits.
- A IA pode consultar o serviço enquanto trabalha e configurá-lo para você.
Alguns conectores não adicionam nada ao seu site. Eles permitem que a IA trabalhe em outro app enquanto cria o site, como ler uma página do Notion ou uma tarefa do Linear. Veja Apps que a IA pode usar.
Onde ficam os conectores
Seus conectores, no painel
Clique em Conectores na barra lateral do painel, em Biblioteca. Essa página reúne todas as contas que você conectou, em todos os seus projetos.
- Conectado lista os serviços em que você tem uma conta conectada e os projetos que usam cada um. Clique em um para abri-lo.
- Adicionar um conector lista os demais serviços. Clique em um serviço para conectá-lo.
- Pesquise ou filtre a lista com Conectado, Tudo ou uma categoria à esquerda.
- Precisa de um serviço que não está aqui? Clique em Pedir um conector.
Você também pode encontrar um conector pelo nome em Pesquisar (⌘K / Ctrl+K) no painel.
A página de um conector lista suas Contas nele e os Projetos que usam cada uma, com as configurações de cada projeto. Abrir leva ao projeto, e Remover retira o conector desse projeto.
O que um projeto usa, em Configurações
No editor, abra Configurações e escolha Conectores.
- Neste projeto lista o que o projeto usa. Clique em um conector para abri-lo.
- Adicionar a este projeto lista os demais serviços. Clique em um serviço para adicioná-lo. Se você já conectou uma conta nele, o serviço mostra Usa sua e o nome da conta. Um clique o adiciona com essa conta.
- Todos os seus conectores abre a página no painel.
Conectar um serviço
Alguns serviços se conectam quando você faz login. Outros usam uma chave que você cola.
| Como | Conectores |
|---|---|
| Fazer login | Stripe, GitHub, Sentry, PostHog, Google Analytics, Google Sheets, Google Calendar, Google Search Console, Supabase, Resend, OpenRouter e os apps que a IA pode usar |
| Colar uma chave | OpenAI, Anthropic, Gemini, Groq, Loops, Intercom (um App ID), Cal.com, ElevenLabs, HubSpot, Twilio, WhatsApp, Razorpay, Paystack, PayPal, servidor MCP |
Alguns oferecem as duas opções: Colar chaves para Stripe, Cole um ID de medição para Google Analytics e Cole uma chave para Resend e OpenRouter.
Em um projeto:
- Abra Configurações > Conectores e clique no serviço.
- Clique em Conectar.
- Serviços com login abrem o serviço em uma nova janela. Autorize o acesso lá e você volta ao conector.
- Serviços com chave abrem a página onde você cria a chave, em uma janela separada. Copie a chave lá e volte: o WebTwizz a obtém da área de transferência, verifica e conecta. Seu navegador pode pedir permissão para colar uma vez. Você também pode clicar em Colar ou colar a chave no campo por conta própria. Um serviço que precisa de dois valores, como um ID e um segredo, pede o próximo depois do primeiro. Se o serviço recusar uma chave, você verá Essa chave não foi aceita.
- Se houver algo para escolher, como um repositório do GitHub ou um projeto do Sentry, o conector abre em Concluir conexão com o seletor. Escolha uma opção e pronto.
No painel, clique em um serviço em Adicionar um conector ou abra a página dele e clique em Conectar. A conta é salva sem ser adicionada a nenhum projeto. Adicione-a a um projeto depois em Configurações > Conectores desse projeto.
Ainda não tem uma chave de IA? Os formulários de OpenAI, Anthropic, Gemini e Groq têm a opção Entrar com OpenRouter, que dá acesso a todos os modelos em uma etapa. Veja OpenRouter.
Supabase e Google Sheets são fontes de dados, então a opção Conectar abre o painel Dados. Um projeto tem uma fonte de dados por vez. Veja Dados e CMS.
Restringir uma conta a um projeto
Só este projeto conecta uma conta que apenas este projeto pode usar. Seus outros projetos não vão oferecê-la. Ela fica marcada como Só este projeto no projeto e Apenas um projeto no painel. É útil para a conta Stripe de um cliente ou uma chave que você não quer reutilizar.
Dentro de um conector
Clique em um conector em Neste projeto. Ao lado do nome dele há links que abrem o que este projeto usa no serviço, como Abrir Stripe ou Abrir Sentry. Abaixo, de cima para baixo:
- Visão geral: os dados do serviço para este projeto, como pagamentos no Stripe, erros no Sentry ou pull requests no GitHub. Clique em uma linha para ver os detalhes ali mesmo. Muitas linhas têm botões para tarefas do dia a dia, como Reembolsar um pagamento, Resolver um erro ou Mesclar um pull request, então você raramente precisa acessar o site do serviço. Qualquer ação que não possa ser desfeita pede confirmação antes. Mostrar mais carrega a próxima parte de uma lista, e tabelas e abas abrem no painel Dados.
- Conta: a conta que este projeto usa e Também usado em com os outros projetos que a usam. Gerenciar abre a conta nos conectores do painel. A maioria das contas que usam chave também tem Substituir chave.
- Configurações: o que este projeto escolhe, como o repositório, o projeto do Sentry ou o modelo de IA. As alterações são salvas conforme você as faz.
- Site no ar: para conectores que adicionam algo ao site publicado, mostra se está Executando, se aguarda você Publique para atualizar ou se começa Depois que você publicar.
- Remover deste projeto: clique em Remover e depois em Remover do projeto? para confirmar. As chaves são retiradas deste projeto. Os outros projetos continuam com a conta.
A página de cada conector nesta documentação mostra sua visão geral e suas configurações.
Trocar ou remover uma conta
- Trocar contas em um projeto: quando você tem mais de uma conta em um serviço, a linha Conta tem a opção Trocar conta. O menu lista suas outras contas e Conectar outra conta. O projeto passa a usar a nova conta, e as chaves são substituídas.
- Renomear uma conta: na página do conector no painel, clique no nome da conta, digite e pressione
Enter. - Substituir uma chave: clique em Substituir chave na conta e cole a nova chave. Todos os projetos que usam essa chave passam a usar a nova. Razorpay, PayPal e Intercom não têm essa opção, pois seus valores mudam juntos: conecte os novos valores como outra conta e depois troque.
- Remover uma conta de todos os projetos: na página do conector no painel, clique em Remover na conta e depois em Remover seguido do nome dela. Ela é desconectada de todos os projetos que a usam, e tudo que esses sites fazem com ela para até você conectar uma conta novamente.
Remover nunca exclui nada no serviço. Seus clientes no Stripe, repositório no GitHub e eventos no Sentry continuam onde estão.
Se um serviço deixar de aceitar o login salvo, a conta mostra Precisa reconectar com o botão Reconectar. Se ele precisar de uma permissão que a conta não concedeu, a visão geral diz que o serviço precisa de mais uma permissão, com a opção Conectar de novo.
Onde ficam as chaves
Os conectores que seu site usa adicionam suas chaves como segredos em Configurações > Segredos e as mantêm atualizadas. Elas ficam listadas em Dos serviços conectados. Sua pré-visualização já pode usá-las na hora. Publique novamente para que seu site no ar também as receba. Veja Segredos.
A página de cada conector lista os segredos que ele adiciona. Chaves de que apenas o WebTwizz precisa, como uma chave de serviço do HubSpot ou um Auth Token do Twilio, nunca vão para o seu site.
Código no seu projeto
Alguns conectores precisam de código em todas as páginas: Google Analytics e PostHog contam visitas, Sentry captura erros, HubSpot adiciona seu rastreamento, Intercom mostra seu Messenger e Google Search Console adiciona a tag que comprova que o site é seu. O WebTwizz mantém tudo em um arquivo no seu projeto, webtwizz-connectors.tsx, e o adiciona ao layout raiz do site. As análises do próprio site, em Configurações > Análises, também entram quando o site é publicado. Você não precisa mexer em nada.
- Ele é atualizado quando você adiciona, altera ou remove um desses conectores e sempre que publica. Um projeto que ainda não tem esse arquivo o recebe na próxima publicação.
- Tudo, exceto o Messenger do Intercom, só funciona no site publicado, então suas próprias visitas e erros na pré-visualização não contam. O Messenger também aparece na pré-visualização para você testar.
- Ele faz parte do seu código, então vai para o GitHub e é incluído nos downloads como qualquer outro arquivo. O WebTwizz o gerencia, então alterações feitas à mão são substituídas. Altere as configurações do conector em vez disso.
- Se o código do seu site já carrega um desses serviços por conta própria, o WebTwizz não o inclui no arquivo, para que ele nunca seja carregado duas vezes.
Conectores no chat
A IA sabe quais conectores o projeto usa e trabalha com eles para você.
Cartões de conexão
Quando você pede algo que precisa de um serviço, como um formulário de contato que envia e-mails para você, a IA adiciona um cartão de conexão, como Conectar Resend. Clique nele para conectar sem sair do chat. Se você já tem uma conta nesse serviço, o cartão a oferece pelo nome, junto com Conectar outra conta Resend.
Para um serviço que não tem conector, a IA adiciona os segredos necessários em Configurações > Segredos sem valores, para você colá-los em Precisa de um valor.
Cartões com dados ao vivo
Pergunte como algo está indo, e a IA pode responder com um cartão de dados ao vivo do serviço: uma linha por serviço com o número principal, Configurações e Abrir, além de detalhes que podem ser expandidos. Os números vêm direto do serviço, então a IA nunca os redigita nem tenta adivinhá-los.
A IA consultando um serviço
A IA consulta seus serviços conectados quando isso ajuda: os erros no Sentry antes de corrigir um deles, os visitantes do mês passado no Google Analytics, se seu domínio no Resend está verificado. Cada consulta aparece como uma linha no chat com o logo do serviço, como Usando Linear. Enquanto ela trabalha, o logo pulsa.
Quando termina, a linha diz o que encontrou. Clique nela para ver os detalhes.
Para indicar um serviço à IA, digite @ na caixa do chat e escolha-o em Conectores. Digite / e abra um dos apps que a IA pode usar em MCP para escolher uma das ferramentas dele.
Ela pergunta antes de alterar algo
As consultas acontecem automaticamente. Uma alteração na sua conta no serviço pede confirmação antes, com Aceitar e Recusar: marcar um erro do Sentry como resolvido, reembolsar um pagamento ou alterar configurações de login do Supabase. E-mails de teste do Resend e do Loops só vão para sua própria caixa de entrada, então não pedem confirmação.
No modo Chat, a IA pode consultar conectores, mas não pode alterar nada por meio deles. A única exceção são os apps que a IA pode usar e os servidores MCP: uma ferramenta que possa alterar algo pede sua confirmação antes e só é executada se você aceitar.
GitHub e Stripe têm ferramentas próprias: a IA trabalha com seu repositório por meio do git e com sua conta Stripe por meio da ferramenta Stripe. Os dados do seu site passam pelas ferramentas do painel Dados. A página de cada conector diz o que a IA pode fazer com ele.
Todos os conectores
Dados
| Conector | Para que serve | Como conectar |
|---|---|---|
| WebTwizz Cloud | Banco de dados, login, armazenamento de arquivos, tarefas e logs | Incluído. A IA o adiciona, ou você pode adicioná-lo pelo painel Dados |
| Supabase | Banco de dados e login na sua própria conta Supabase | Faça login pelo painel Dados |
| Google Sheets | Uma planilha como fonte de dados do seu site | Entre com Google pelo painel Dados |
Pagamentos
| Conector | Para que serve | Como conectar |
|---|---|---|
| Stripe | Pagamentos e assinaturas | Faça login ou cole as chaves |
| Razorpay | Pagamentos na Índia: UPI, cartões e netbanking | Cole um Key ID e um Key Secret |
| Paystack | Pagamentos na Nigéria, em Gana, no Quênia e em outros países | Cole uma chave secreta e uma chave pública |
| PayPal | Pagamentos com PayPal e cartão no mundo todo | Cole um ID de cliente e um segredo |
Análises
| Conector | Para que serve | Como conectar |
|---|---|---|
| Google Analytics | Quem visita seu site | Entre com Google ou cole um ID de medição |
| Google Search Console | O desempenho do seu site na busca do Google | Entre com Google |
| PostHog | O que os visitantes fazem, com replays e feature flags | Faça login |
| Sentry | Capturar e corrigir erros | Faça login |
E-mail
| Conector | Para que serve | Como conectar |
|---|---|---|
| Resend | E-mails enviados do seu próprio domínio | Faça login ou cole uma chave de API |
| Loops | Listas de e-mail e e-mails para seus usuários | Cole uma chave de API |
| Klaviyo | Permite que a IA veja seus resultados de e-mail marketing | Faça login |
Suporte, CRM e mensagens
| Conector | Para que serve | Como conectar |
|---|---|---|
| Intercom | Chat ao vivo em todas as páginas | Cole um App ID |
| HubSpot | Os leads do seu site no HubSpot | Cole uma chave de serviço |
| Twilio | Mensagens de texto e códigos de login por telefone | Cole seu Account SID e Auth Token |
| Mensagens do WhatsApp pelo número da sua empresa | Cole um token e os IDs |
Agendamento e voz
| Conector | Para que serve | Como conectar |
|---|---|---|
| Cal.com | Permitir que visitantes agendem um horário com você | Cole uma chave de API |
| Google Calendar | Agendamentos direto na sua agenda | Entre com Google |
| Calendly | Permite que a IA encontre seus links de agendamento | Faça login |
| ElevenLabs | Um agente de voz com quem os visitantes podem conversar | Cole uma chave de API |
IA
| Conector | Para que serve | Como conectar |
|---|---|---|
| OpenAI | Modelos GPT no seu site | Cole uma chave de API |
| Anthropic | Claude no seu site | Cole uma chave de API |
| Gemini | Modelos Gemini no seu site | Cole uma chave de API |
| OpenRouter | Centenas de modelos com uma conta | Faça login ou cole uma chave de API |
| Groq | Modelos abertos muito rápidos | Cole uma chave de API |
Código
| Conector | Para que serve | Como conectar |
|---|---|---|
| GitHub | Seu código no seu próprio repositório | Faça login |
Apps que a IA pode usar
Eles permitem que a IA trabalhe em outro app enquanto cria o site. Nada é adicionado ao seu site, e eles são gratuitos em todos os planos. Veja Apps que a IA pode usar para saber mais sobre cada um.
Notion, Linear, Cloudflare, Zapier, Make, monday.com, ClickUp, Miro, Webflow, Wix, Klaviyo, Calendly, Todoist, Context7, Exa, Firecrawl, Hugging Face, Microsoft Learn e qualquer outro serviço por meio de um servidor MCP.