Saltar al contenido principal
Tecnología#IA#AI#machine learning#chatbots#desarrollo

Inteligencia Artificial en el Desarrollo Web: Guía Práctica 2025

SD
Por Samuel Diaz
12 de diciembre de 202412 min de lectura
X (Twitter)
LinkedIn
Telegram
WhatsApp
Email
Copiar enlace
142 vistas

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}

))}

value={input}

onChange={handleInputChange}

placeholder="Escribe tu mensaje..."

/>

);

}

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.

Newsletter Técnico

Recibe los últimos artículos sobre desarrollo web, ciberseguridad y tecnología directamente en tu inbox.

Sin spam. Cancela tu suscripción en cualquier momento.

Comentarios (3)

MG

María González

14 de diciembre de 2024

Excelente artículo! Me ha ayudado mucho a entender estos conceptos. ¿Podrías hacer un seguimiento sobre implementación práctica?

SD
Samuel Diaz
14 dic

¡Gracias María! Definitivamente haré un artículo de seguimiento con ejemplos prácticos. ¡Excelente sugerencia!

CR

Carlos Ruiz

13 de diciembre de 2024

Los ejemplos de código están muy claros. He implementado algunas de estas técnicas en mi proyecto y funcionan perfectamente.

Artículos Relacionados