Introducciรณn:
Descubre cรณmo construir una aplicaciรณn de inteligencia artificial con Next.js y OpenAI en un abrir y cerrar de ojos. En este artรญculo, te proporciono un adelanto de la creaciรณn de esta app, pero para capturar la magia del desarrollo en tiempo real, te invito a ver el vรญdeo completo que te guiarรก a travรฉs de cada paso con precisiรณn.
Resumen del Proceso:
Comienza con una cuenta en OpenAI y obtรฉn tus claves API. Configura tu proyecto Next.js y prepรกrate para instalar las dependencias cruciales: ai y openai. Integra el chat en tu aplicaciรณn utilizando el hook useChat, y crea una ruta API que manejarรก las peticiones POST para interactuar con OpenAI.
Cรณdigo Clave: Desvelando la Magia del Desarrollo:
Para la API, tu archivo app/api/chat/route-.ts se verรก asรญ:
import { OpenAIStream, StreamingTextResponse } from "ai";
import OpenAI from "openai";
export const runtime = "edge";
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! });
export async function POST(req: Request) {
const { messages } = await req.json();
const res = await openai.chat.completions.create({
model: "gpt-4-turbo-preview",
stream: true,
messages,
});
const stream = OpenAIStream(res);
return new StreamingTextResponse(stream);
}
Y tu componente principal en app/page.tsx incorporarรก el chat de esta manera:
"use client";
import { useChat } from "ai/react";
export default function Home() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 className="text-3xl">Fast AI app</h1>
<form onSubmit={handleSubmit} className="flex flex-col gap-2">
<label className="flex flex-col gap-2">
<input
placeholder="What are your thoughts?"
value={input}
onChange={handleInputChange}
className="bg-black outline text-white p-2 rounded-sm"
/>
</label>
<button type="submit" className="bg-white text-black rounded-xl">
**Ask AI**
</button>
</form>
<ul>
{messages.map((m, index) => (
<li key={index} className="p-2 bg-white/05 rounded-xl">
{m.role === "user" ? "**User:** " : "**AI:** "}
{m.content}
</li>
))}
</ul>
</main>
);
}
Conclusiรณn
Con estos fragmentos de cรณdigo, estรกs a un paso de dar vida a tu aplicaciรณn con IA. Pero para entender cada detalle, desde los estilos hasta la gestiรณn de respuestas, el vรญdeo tutorial es tu recurso definitivo. Sumรฉrgete en el cรณdigo y la configuraciรณn junto a nosotros y lleva tus habilidades de desarrollo al siguiente nivel. ยกNo esperes mรกs y dale play al vรญdeo ahora!
[fluentform id="8"]
Subscribe To Our Newsletter
Enter your email address to subscribe
