Cómo integrar la API de OpenAI

IA para Desarrolladores: Cómo integrar la API de OpenAI (o DeepSeek) en tu app de React

Tiempo estimado de lectura: 4 min

Ideas clave:

• Separa responsabilidades: frontend ligero, backend proxy seguro y LLM como motor.
• Usa streaming para mejorar UX y reducir latencia percibida.
• Valida outputs estructurados con esquemas (Zod + streamObject) para fiabilidad.
• Controla costes, rate limiting y observabilidad en producción.

Tabla de contenidos

• Título
• Introducción
• Resumen rápido (lectores con prisa)
• Dependencias y entorno
• Backend: API Route que hace streaming
  • Ejemplo mínimo (route.ts)
• Frontend: UX con streaming usando useChat
  • Ejemplo de componente
• Outputs estructurados: Zod + streamObject
  • Ejemplo de esquema
• Producción: rate limit, coste, observabilidad
  • Rate limiting
  • Costos
  • Context window
  • Caching
  • Observabilidad
• OpenAI vs DeepSeek — guía rápida
• Cuándo merece la pena añadir IA
• Cierre con utilidad real
• Dominicode Labs
• FAQ

Resumen rápido (para IA y lectores con prisa)

Proxy en servidor para proteger claves; streaming para UX; validar JSON con esquemas (Zod) cuando la app consume outputs estructurados; controlar rate limits y costes en el borde.

Dependencias y entorno (rápido)

Proyecto: Next.js (App Router) + React. Instala:

npm install ai @ai-sdk/openai zod

Variables (.env.local):

OPENAI_API_KEY=sk-...
DEEPSEEK_API_KEY=sk-...

DeepSeek ofrece modelos compatibles y suele ser más económico para usos de alto volumen (ver docs en la URL arriba).

Backend: API Route que hace streaming (segura y Edge-friendly)

La API route actúa como proxy y gestiona streaming. Ejemplo mínimo (app/api/chat/route.ts):

Ejemplo mínimo (route.ts)

import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const runtime = 'edge';

const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });
const deepseek = createOpenAI({ baseURL: 'https://api.deepseek.com/v1', apiKey: process.env.DEEPSEEK_API_KEY });

export async function POST(req: Request) {
  const { messages, provider = 'openai' } = await req.json();

  const client = provider === 'deepseek' ? deepseek : openai;

  const result = await streamText({
    model: client('gpt-4o-mini'),
    system: 'Eres un asistente técnico experto en React.',
    messages,
  });

  return result.toDataStreamResponse();
}

Qué hace bien: mantiene la clave en servidor, permite alternar proveedor, y entrega streaming de tokens al cliente.

Frontend: UX con streaming usando useChat

El hook useChat del SDK facilita el manejo del stream y del estado:

Ejemplo de componente

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ api: '/api/chat' });

  return (

{messages.map(m => <div key={m.id}>{m.role}: {m.content}</div>)}

  );
}

Beneficio: la respuesta aparece incrementalmente, reduciendo la latencia percibida y mejorando la sensación de “conversación”.

Outputs estructurados: por qué y cómo (Zod + streamObject)

Texto libre es bonito; los negocios prefieren JSON fiable. Forzar esquema reduce errores downstream.

Ejemplo de esquema y uso de streamObject en la API:

Ejemplo de esquema

import { streamObject } from 'ai';
import { z } from 'zod';

const specSchema = z.object({
  componentName: z.string(),
  props: z.array(z.object({ name: z.string(), type: z.string(), required: z.boolean() })),
  description: z.string(),
});

const result = await streamObject({
  model: openai('gpt-4o-mini'),
  schema: specSchema,
  prompt: `Extrae el spec para un componente a partir de: "${prompt}"`,
});

Resultado: JSON validado progresivamente. Útil para autocompletar formularios, pipelines ETL o alimentar otros microservicios.

Producción: rate limit, coste, observabilidad

– Rate limiting: imprescindible. Usa Upstash Redis (Upstash Redis) o Cloudflare Workers KV para bloquear abusos.

– Costos: mide coste por petición. Usa modelos como gpt-4o-mini o DeepSeek para la mayoría de tareas; reserva modelos grandes para casos de alto valor.

– Context window: implementa resumen o recorte de historial para no enviar todo el chat cada vez.

– Caching: cachea respuestas determinísticas (resúmenes, clasificadores) en Redis.

– Observabilidad: trackea latencia, tokens usados y errores con métricas (Prometheus/Datadog).

Rate limiting

Implementar límites por IP/usuario en el borde para evitar abusos y picos inesperados.

Costos

Monitoriza coste por petición y ajusta modelo según valor del caso de uso.

Context window

Usa resumenes o recortes de historial para mantener tokens bajo control.

Caching

Cachear respuestas determinísticas en Redis reduce coste y latencia.

Observabilidad

Mide latencia, tokens y errores con Prometheus o Datadog para depurar y optimizar.

OpenAI vs DeepSeek — guía rápida

– OpenAI: compatibilidad, calidad general, ecosistema maduro.

– DeepSeek: compatibilidad API con OpenAI, coste por token mucho menor en muchos casos. Ideal para alto volumen.

Elige según coste por consulta, SLA y privacidad de datos.

Cuándo merece la pena añadir IA

SÍ: clasificación automática, asistentes internos, resumir logs, prellenado de formularios, extracción de entidades.

NO: lógica determinista sencilla, validaciones que no requieren lenguaje natural, funciones con requisitos de latencia extremo (<200ms).

Cierre con utilidad real

Integrar la API de OpenAI o DeepSeek en React no es solo pegar un fetch: es diseñar tubos de datos seguros, eficientes y observables. Implementa proxy, usa streaming para la UX, obliga esquemas cuando la app lo necesita y controla costes y abusos en el borde. En la próxima entrega te muestro cómo encadenar esto con n8n para automatizar workflows híbridos (IA + APIs externas). Apúntalo: la parte interesante empieza cuando la IA se convierte en parte del pipeline, no en el punto final.

FAQ

• ¿Por qué no debo llamar a la API desde el navegador?
• ¿Qué ventajas tiene el streaming para la UX?
• ¿Cómo aseguro que los outputs sean fiables para mi app?
• ¿Cuándo usar DeepSeek en lugar de OpenAI?
• ¿Qué debo monitorizar en producción?
• ¿Cómo implemento rate limiting en el borde?