🪄 Widget JavaScript

A forma mais simples de adicionar IA ao seu site. Cole o snippet antes do </body> e o widget aparece automaticamente.

Instalação

Cole as linhas abaixo antes do fechamento </body> no seu HTML:

copiar<!-- AInama Widget -->
<script>
  window.AInama = {
    apiKey: 'SUA_API_KEY',
    org: 'seu-slug',
    position: 'bottom-right',
    primaryColor: '#00d4a8',
    welcomeMessage: 'Olá! Como posso ajudar?',
  };
</script>
<script src="https://mcp.ainama.com.br/widget.js" async></script>

Parâmetros

Personalização avançada

copiarwindow.AInama = {
  apiKey: 'SUA_API_KEY',
  org: 'seu-slug',
  position: 'bottom-right',
  primaryColor: '#6366f1',
  theme: 'light',
  welcomeMessage: 'Olá! Sou a assistente virtual da sua empresa.',
  placeholder: 'Como posso te ajudar hoje?',
  agentId: 42,
  language: 'pt-BR',
  hideOnMobile: false,
  onOpen:    () => console.log('Widget aberto'),
  onClose:   () => console.log('Widget fechado'),
  onMessage: (msg) => console.log('Mensagem:', msg),
};

Controle por JavaScript

copiar// Abrir / fechar / toggle
window.AInama.open();
window.AInama.close();
window.AInama.toggle();

// Enviar mensagem programaticamente
window.AInama.sendMessage('Quero saber sobre preços');

// Escutar eventos
window.addEventListener('ainama:message', (e) => {
  console.log('Nova mensagem:', e.detail);
});

🔗 API REST

Integração direta com qualquer linguagem. Compatível com o padrão OpenAI para fácil migração.

POST /v1/chat

Endpoint principal para conversação com agents.

copiarcurl -X POST https://mcp.ainama.com.br/v1/chat \
  -H "Authorization: Bearer SUA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "org": "seu-slug",
    "messages": [
      { "role": "user", "content": "Olá, como funciona o produto?" }
    ],
    "agent_id": 1,
    "stream": false
  }'

Parâmetros do body

Response

copiar{
  "ok": true,
  "choices": [{
    "message": {
      "role": "assistant",
      "content": "Olá! O AInama é uma plataforma de IA corporativa..."
    }
  }],
  "usage": {
    "prompt_tokens": 120,
    "completion_tokens": 85,
    "total_tokens": 205
  },
  "model": "llama-3.3-70b-versatile",
  "agent_id": 1
}

GET /v1/agents

Lista os agents disponíveis na organização.

copiarcurl https://mcp.ainama.com.br/v1/agents?org=seu-slug \
  -H "Authorization: Bearer SUA_API_KEY"

Streaming SSE

copiarconst response = await fetch('https://mcp.ainama.com.br/v1/chat', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer SUA_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    org: 'seu-slug',
    messages: [{ role: 'user', content: 'Olá!' }],
    stream: true
  })
});

const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  process(decoder.decode(value));
}

⚛️ React SDK

Componente React pronto para produção com suporte a TypeScript, temas e personalização completa.

Instalação

copiarnpm install @ainama/react-widget
# ou
yarn add @ainama/react-widget

Uso básico

copiarimport AInama from '@ainama/react-widget';

export default function App() {
  return (
    <>
      <AInama
        apiKey="SUA_API_KEY"
        org="seu-slug"
        position="bottom-right"
        primaryColor="#00d4a8"
        welcomeMessage="Olá! Como posso ajudar?"
      />
    </>
  );
}

Com TypeScript

copiarimport AInama, { AInamaConfig } from '@ainama/react-widget';

const config: AInamaConfig = {
  apiKey: process.env.NEXT_PUBLIC_AINAMA_KEY!,
  org: 'seu-slug',
  theme: 'dark',
  onMessage: (msg) => console.log(msg),
};

export default function Layout({ children }) {
  return (
    <html><body>
      {children}
      <AInama {...config} />
    </body></html>
  );
}

Hook useAInama

copiarimport { useAInama } from '@ainama/react-widget';

function ChatButton() {
  const { open, close, isOpen, sendMessage } = useAInama();
  return (
    <button onClick={open}>
      {isOpen ? 'Fechar chat' : 'Abrir chat'}
    </button>
  );
}

⚡ n8n & Zapier

Conecte o AInama a centenas de ferramentas sem escrever código. Use em workflows de atendimento, qualificação de leads e automações.

n8n — HTTP Request Node

No n8n, use o node HTTP Request para chamar a API:

copiarMethod: POST
URL: https://mcp.ainama.com.br/v1/chat
Authentication: Header Auth
  Header Name:  Authorization
  Header Value: Bearer SUA_API_KEY

Body (JSON):
{
  "org": "seu-slug",
  "messages": [
    { "role": "user", "content": "{{ $json.message }}" }
  ]
}

n8n — Workflow WhatsApp completo

copiar1. Webhook  →  recebe mensagem via Evolution API
   ↓
2. HTTP Request  →  POST /v1/chat
   {
     "org": "seu-slug",
     "messages": [{ "role": "user", "content": "{{ $json.body.message }}" }],
     "session_id": "{{ $json.body.from }}"
   }
   ↓
3. HTTP Request  →  Evolution API (envia resposta)
   {
     "number": "{{ $json.body.from }}",
     "text":   "{{ $json.choices[0].message.content }}"
   }

Zapier

copiarTrigger: Webhooks by Zapier
  ↓
Action: Webhooks by Zapier (POST)
  URL:          https://mcp.ainama.com.br/v1/chat
  Payload Type: JSON
  Data:
    org:                    seu-slug
    messages[0][role]:      user
    messages[0][content]:   (mensagem do trigger)
  Headers:
    Authorization: Bearer SUA_API_KEY

Make (Integromat)

copiarMódulo: HTTP → Make a request
URL:    https://mcp.ainama.com.br/v1/chat
Method: POST
Headers:
  Authorization: Bearer SUA_API_KEY
  Content-Type:  application/json
Body:
{
  "org": "seu-slug",
  "messages": [{ "role": "user", "content": "{{message}}" }]
}