Nextjs AI SDK

En este tutorial aprenderas a usar el SDK de Inteligencia Artificial para Nextjs.

Hasta este momento Vercel tiene dos servicios relacionados con esto:

• Vercel AI SDK: Easily stream API responses from AI models
• Chat & Prompt Playground: Explore models from OpenAI, Hugging Face, and more

Creación del Proyecto de Vercel

Primero vamos a crear un proyecto de Nextjs con las siguientes configuraciones:

npx create-next-app nextjs-ai-tutorial

✔ Would you like to use TypeScript? / Yes
✔ Would you like to use ESLint?  Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias? No
Creating a new Next.js app in /home/fazt/Desktop/nextjs-ai-tutorial.

Ahora intalaremos el SDK de nextjs llamado AI:

npm install ai openai-edge

Luego tambien configuraremos nuestra API Key de OpenAI. Crea un archivo .env.local en la raiz de tu proyecto con tu una variable de entorno llamada:

OPENAI_API_KEY=tullave

Vercel y OpenAI API

El SDK de IA de Vercel respeta la interoperabilidad e incluye soporte de primera clase para OpenAI, LangChain y Hugging Face Inference. Esto significa que, independientemente de tu proveedor de modelos de IA preferido, puedes aprovechar el SDK de IA de Vercel para crear experiencias de interfaz de usuario en streaming de vanguardia.

En nuestro caso usaremos OpenAI como proveedor de un LLM, que seria GPT 3.5. Crea una ruta en /api/chat con el siguiente codigo:

import { OpenAIStream, StreamingTextResponse } from 'ai'
import { Configuration, OpenAIApi } from 'openai-edge'

// Create an OpenAI API client (that's edge friendly!)
const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(config)
 
// IMPORTANT! Set the runtime to edge
export const runtime = 'edge'
 
export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json()
 
  // Ask OpenAI for a streaming chat completion given the prompt
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages
  })
  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response)
  // Respond with the stream
  return new StreamingTextResponse(stream)
}

Streaming First UI Helpers

El SDK de IA de Vercel incluye hooks de React y Svelte para la obtención de datos y la representación de respuestas de texto en streaming. Estos hooks permiten una representación de datos dinámica y en tiempo real en tu aplicación, ofreciendo una experiencia inmersiva e interactiva a tus usuarios.

Construir una interfaz de chat rica o de autocompletado ahora solo requiere unas pocas líneas de código gracias a useChat y useCompletion:

actualiza el archivo page.tsx de la siguiente forma:

'use client'

import { useChat } from 'ai/react'

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

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

      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            value={input}
            onChange={handleInputChange}
          />
        </label>
      </form>
    </div>
  )
}

The Vercel AI SDK

Recursos

• [https://vercel.com/blog/introducing-the-vercel-ai-sdk](Introduccion a Vercl AI SDK)