Inteligencia Artificial en el Desarrollo Web: Guía Práctica 2025
La IA está transformando el desarrollo web. Desde chatbots hasta recomendaciones personalizadas, aprende a integrar IA en tus proyectos.
Frameworks y Herramientas Principales
1. Vercel AI SDK
import { openai } from '@ai-sdk/openai';
import { generateText, streamText } from 'ai';
// Generación de texto simple
async function generateContent(prompt: string) {
const { text } = await generateText({
model: openai('gpt-4'),
prompt: prompt,
maxTokens: 500,
});
return text;
}
// Streaming para respuestas en tiempo real
async function streamResponse(prompt: string) {
const result = await streamText({
model: openai('gpt-4'),
prompt: prompt,
});
return result.toAIStream();
}
2. LangChain.js
import { ChatOpenAI } from "langchain/chat_models/openai";
import { HumanMessage, SystemMessage } from "langchain/schema";
const chat = new ChatOpenAI({
temperature: 0.7,
modelName: "gpt-4",
});
async function chatWithAI(userMessage) {
const response = await chat.call([
new SystemMessage("Eres un asistente experto en desarrollo web."),
new HumanMessage(userMessage),
]);
return response.content;
}
Casos de Uso Prácticos
Chatbot Inteligente
'use client';import { useState } from 'react';
import { useChat } from 'ai/react';
export default function ChatBot() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: '/api/chat',
});
return (
{messages.map((message) => (
{message.content}
))}
);
}
Sistema de Recomendaciones
// API Route para recomendaciones
import { NextRequest, NextResponse } from 'next/server';
import { openai } from '@ai-sdk/openai';
import { generateObject } from 'ai';
import { z } from 'zod';
const RecommendationSchema = z.object({
recommendations: z.array(z.object({
title: z.string(),
description: z.string(),
score: z.number(),
category: z.string(),
})),
});
export async function POST(req: NextRequest) {
const { userPreferences, history } = await req.json();
const { object } = await generateObject({
model: openai('gpt-4'),
schema: RecommendationSchema,
prompt: `Basándote en las preferencias del usuario: ${userPreferences}
y su historial: ${history},
genera 5 recomendaciones personalizadas.`,
});
return NextResponse.json(object);
}
Optimización y Rendimiento
Caching Inteligente
import { Redis } from '@upstash/redis';const redis = new Redis({
url: process.env.UPSTASH_REDIS_REST_URL!,
token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});
async function getCachedResponse(prompt: string) {
const cacheKey = `ai-response:${Buffer.from(prompt).toString('base64')}`;
// Intentar obtener de cache
const cached = await redis.get(cacheKey);
if (cached) return cached;
// Generar nueva respuesta
const response = await generateText({
model: openai('gpt-4'),
prompt: prompt,
});
// Guardar en cache por 1 hora
await redis.setex(cacheKey, 3600, response.text);
return response.text;
}
Rate Limiting
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
const ratelimit = new Ratelimit({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(10, "1 m"), // 10 requests per minute
});
export async function POST(req: NextRequest) {
const ip = req.ip ?? '127.0.0.1';
const { success } = await ratelimit.limit(ip);
if (!success) {
return new Response('Rate limit exceeded', { status: 429 });
}
// Procesar request...
}
Consideraciones de Seguridad
Validación de Entrada
import { z } from 'zod';const PromptSchema = z.object({
message: z.string().min(1).max(1000),
context: z.string().optional(),
temperature: z.number().min(0).max(2).optional(),
});
function validatePrompt(data: unknown) {
try {
return PromptSchema.parse(data);
} catch (error) {
throw new Error('Invalid prompt data');
}
}
Filtrado de Contenido
async function moderateContent(text: string) {
const moderation = await openai.moderations.create({
input: text,
});
const flagged = moderation.results[0].flagged;
if (flagged) {
throw new Error('Content violates usage policies');
}
return text;
}
Mejores Prácticas
1. **Manejo de Errores Robusto**
2. **Monitoring y Logging**
3. **Costos y Límites**
4. **Experiencia de Usuario**
5. **Privacidad de Datos**
Conclusión
La integración de IA en aplicaciones web abre infinitas posibilidades. Con las herramientas adecuadas y buenas prácticas, puedes crear experiencias verdaderamente inteligentes.