> ## Documentation Index
> Fetch the complete documentation index at: https://docs.testly.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Windsurf

> Integre e gerencie testes A/B sem sair do Windsurf — via prompt direto ou MCP

Há duas formas de usar o Windsurf com o Testly:

|                          | Prompt direto                                           | MCP do Testly                                         |
| ------------------------ | ------------------------------------------------------- | ----------------------------------------------------- |
| **O que faz**            | Windsurf integra um experimento existente no seu código | Windsurf cria + integra experimentos direto do editor |
| **Requer configuração?** | Não — só colar o prompt                                 | Sim — instalar o MCP uma vez                          |
| **Melhor para**          | Primeira integração, usuário novo                       | Fluxo contínuo de experimentação                      |

***

## Opção 1 — Prompt direto (sem configuração)

Crie o experimento no dashboard. Na aba **"Pedir pra IA"**, copie o prompt gerado — ele já tem sua API Key, slug e evento de conversão preenchidos — e cole no **Cascade** do Windsurf.

O Windsurf vai:

1. Instalar `@testlyjs/react` se necessário
2. Adicionar o `TestlyProvider` no arquivo raiz com sua API Key
3. Encontrar o componente certo e implementar `useExperiment` + `convert`

<Tip>
  O prompt completo com sua API Key real está na aba **"Pedir pra IA"** do dashboard após criar o experimento.
</Tip>

***

## Opção 2 — MCP do Testly (fluxo completo no editor)

O Testly MCP conecta o Windsurf diretamente à sua conta Testly. Configure uma vez e crie experimentos em linguagem natural com o Cascade AI.

```
Você → Windsurf (Cascade) → Testly MCP → Supabase
                                ↓
                    Experimento criado + código gerado
```

### Instalação

### 1. Execute o assistente de configuração

No terminal:

```bash theme={null}
npx @testlyjs/mcp setup
```

O assistente vai pedir sua chave de produção (`tk_live_...`) e, opcionalmente, sua chave de desenvolvimento (`tk_test_...`). As chaves ficam salvas em `~/.testly/config.json`.

Você encontra suas chaves em [app.testly.com.br/settings](https://app.testly.com.br/settings).

### 2. Configure o MCP no Windsurf

Edite `~/.codeium/windsurf/mcp_config.json`:

```json theme={null}
{
  "mcpServers": {
    "testly": {
      "command": "npx",
      "args": ["@testlyjs/mcp"]
    }
  }
}
```

Nenhuma chave no arquivo. O MCP lê a configuração salva em `~/.testly/config.json`.

Reinicie o Windsurf após salvar.

### 3. Verifique

Abra o Cascade e peça:

```
Liste meus experimentos do Testly
```

***

## Uso

Com o MCP configurado, use o Cascade para tudo:

<CardGroup cols={2}>
  <Card title="Criar experimento" icon="flask">
    "Crie um teste A/B para o botão do hero"
  </Card>

  <Card title="Ver resultados" icon="chart-bar">
    "Qual variante está ganhando no pricing-test?"
  </Card>

  <Card title="Listar ativos" icon="list">
    "Liste todos os meus experimentos rodando"
  </Card>

  <Card title="Controlar" icon="play">
    "Pause o experimento hero-cta-color"
  </Card>
</CardGroup>

***

## Exemplo completo

**1. Você diz ao Cascade:**

```
Crie um teste A/B chamado "Hero CTA Color" para testar se um botão verde 
converte mais que o azul. O evento de conversão é "cta_clicked".
```

**2. Cascade cria o experimento via MCP e responde:**

```
✅ Experimento criado: "Hero CTA Color"

Key: hero-cta-color
Variantes: control, variant-b
Dashboard: app.testly.com.br/experiments/hero-cta-color

── Integração ──

1. npm install @testlyjs/react

2. <TestlyProvider apiKey={process.env.TESTLY_API_KEY}>
     <App />
   </TestlyProvider>

3. const { variant, convert } = useExperiment('hero-cta-color');

   if (variant === 'variant-b') {
     // botão verde
   }

   // no clique:
   convert('cta_clicked');
```

**3. Cascade escreve o código no seu arquivo automaticamente.**

***

## Ferramentas disponíveis

| Ferramenta          | O que faz                                                |
| ------------------- | -------------------------------------------------------- |
| `create_experiment` | Cria experimento e retorna código de integração          |
| `list_experiments`  | Lista todos os experimentos com status e impressões      |
| `get_results`       | Retorna taxa de conversão, uplift e veredito estatístico |
| `start_experiment`  | Inicia um experimento pausado                            |
| `stop_experiment`   | Pausa um experimento ativo                               |

***

## Configuração por projeto (compartilhar com o time)

Após cada membro do time rodar `npx @testlyjs/mcp setup` com a própria chave, crie `.windsurf/mcp.json` na raiz do projeto sem chaves:

```json theme={null}
{
  "mcpServers": {
    "testly": {
      "command": "npx",
      "args": ["@testlyjs/mcp"]
    }
  }
}
```

Esse arquivo pode ser comitado com segurança — não contém chaves.

## Dev Mode

Para usar a chave de desenvolvimento (`tk_test_`):

```json theme={null}
{
  "mcpServers": {
    "testly": {
      "command": "npx",
      "args": ["@testlyjs/mcp"],
      "env": { "TESTLY_ENV": "development" }
    }
  }
}
```