Integrar APIs de IA (OpenAI, Claude) en tu web: guía práctica

❌ Client-Side (NUNCA hagas esto)

Llamar directamente desde el navegador a OpenAI/Anthropic:

{/* INSEGURO: tu API key queda en el HTML */}
const response = await fetch('https://api.openai.com/v1/chat/completions', {
  headers: {
    'Authorization': 'Bearer sk-...' // ¡EXPUESTA!
  }
});

⚠️ Riesgo: Cualquiera lee el source code y obtiene tu API key. Costes desbocados si alguien la roba.

✅ Server-Side (RECOMENDADO)

El navegador envía datos a tu servidor. Tu servidor llama a la API de IA con la clave segura.

// Cliente (navegador): sin API key
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ message: 'Hola' })
});

// Servidor (Node.js): con API key segura en .env
import { Anthropic } from '@anthropic-ai/sdk';
const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
});
const message = await client.messages.create({
  model: 'claude-3-5-haiku-20241022',
  max_tokens: 1024,
  messages: [{ role: 'user', content: userInput }]
});

✓ API key protegida en servidor. Control de rate limiting y costes.

1. Deploy Worker en Cloudflare

// wrangler.toml
name = "ia-chat-api"
type = "javascript"
account_id = "tu-account-id"
workers_dev = true

[env.production]
route = "api.example.com/*"

[[env.production.vars]]
ANTHROPIC_API_KEY = "sk-..."

2. Código del Worker (src/index.js)

export default {
  async fetch(request, env, ctx) {
    // CORS
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST',
        },
      });
    }

    const { message } = await request.json();

    // Rate limiting: max 10 requests/min por IP
    const ip = request.headers.get('cf-connecting-ip');
    const key = `rate:${ip}`;
    const count = await env.KV.get(key) || 0;
    if (count > 10) {
      return new Response('Rate limit exceeded', { status: 429 });
    }
    await env.KV.put(key, count + 1, { expirationTtl: 60 });

    // Llamada a Claude
    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'x-api-key': env.ANTHROPIC_API_KEY,
        'anthropic-version': '2023-06-01',
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        model: 'claude-3-5-haiku-20241022',
        max_tokens: 1024,
        messages: [{ role: 'user', content: message }],
      }),
    });

    const data = await response.json();
    const reply = data.content[0].text;

    return new Response(JSON.stringify({ reply }), {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
    });
  },
};

¿Qué es SSE (Server-Sent Events)?

El servidor envía fragmentos de respuesta a medida que están listos. El navegador los muestra incrementalmente, sin esperar la respuesta completa.

Ejemplo con Streaming

// Servidor (Node.js con Express)
app.post('/chat-stream', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  const stream = await client.messages.stream({
    model: 'claude-3-5-haiku-20241022',
    max_tokens: 1024,
    messages: [{ role: 'user', content: req.body.message }],
  });

  for await (const event of stream) {
    if (event.type === 'content_block_delta') {
      const text = event.delta.text || '';
      res.write(`data: ${JSON.stringify({ text })}\n\n`);
    }
  }
  res.end();
});

// Cliente (navegador)
const sse = new EventSource('/chat-stream');
sse.onmessage = (event) => {
  const { text } = JSON.parse(event.data);
  document.getElementById('output').textContent += text;
};