Cómo Integrar IA (ChatGPT/Claude) en tu Aplicación Web: Guía Práctica 2026

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│                 │     │                 │     │                 │
│    Frontend     │────▶│    Backend      │────▶│   OpenAI API    │
│   (React/Vue)   │     │  (Node/Python)  │     │   Claude API    │
│                 │◀────│                 │◀────│                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘
                              │
                              ▼
                        ┌───────────┐
                        │           │
                        │  Base de  │
                        │   Datos   │
                        │           │
                        └───────────┘
                        (historial, cache,
                         rate limiting)

npm install openai

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function chat(messages: Array<{role: string, content: string}>) {
  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini', // o 'gpt-4o' para tareas más complejas
    messages: messages,
    temperature: 0.7,
    max_tokens: 1000,
  });

  return response.choices[0].message.content;
}

import { NextRequest, NextResponse } from 'next/server';
import OpenAI from 'openai';

const openai = new OpenAI();

export async function POST(req: NextRequest) {
  try {
    const { messages, userId } = await req.json();

    // Validación básica
    if (!messages || !Array.isArray(messages)) {
      return NextResponse.json(
        { error: 'Messages required' },
        { status: 400 }
      );
    }

    // System prompt personalizado para tu app
    const systemPrompt = {
      role: 'system',
      content: `Eres un asistente de [Tu Empresa].
        Ayudas a los usuarios con [tu caso de uso].
        Responde siempre en español de forma clara y concisa.`
    };

    const response = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [systemPrompt, ...messages],
      temperature: 0.7,
      max_tokens: 1000,
    });

    return NextResponse.json({
      message: response.choices[0].message.content,
      usage: response.usage
    });

  } catch (error) {
    console.error('OpenAI Error:', error);
    return NextResponse.json(
      { error: 'Error procesando solicitud' },
      { status: 500 }
    );
  }
}

npm install @anthropic-ai/sdk

import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

export async function chatWithClaude(
  messages: Array<{role: 'user' | 'assistant', content: string}>,
  systemPrompt?: string
) {
  const response = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022', // o 'claude-3-5-haiku-20241022'
    max_tokens: 1024,
    system: systemPrompt || 'Eres un asistente útil.',
    messages: messages,
  });

  // Claude devuelve contenido en array de bloques
  const textBlock = response.content.find(block => block.type === 'text');
  return textBlock?.text || '';
}

npm install ai @ai-sdk/openai @ai-sdk/anthropic

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

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    system: 'Eres un asistente útil de [Tu Empresa].',
    messages,
  });

  return result.toDataStreamResponse();
}

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

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((m) => (
          <div key={m.id} className={`p-4 rounded-lg ${
            m.role === 'user' ? 'bg-blue-100 ml-auto' : 'bg-gray-100'
          }`}>
            {m.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="p-4 border-t">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Escribe tu mensaje..."
          className="w-full p-2 border rounded"
          disabled={isLoading}
        />
      </form>
    </div>
  );
}