Vercel AI SDK: creación de aplicaciones basadas en IA con los marcos de trabajo frontales más conocidos

Introducción general

El SDK de IA de Vercel es una herramienta de código abierto desarrollada por el equipo de Vercel para ayudar a los desarrolladores a crear aplicaciones de IA utilizando marcos como React, Svelte, Vue y Solid. Es compatible con múltiples proveedores de modelos de lenguaje, incluyendo OpenAI, Anthropic, Google Géminis El SDK ofrece una interfaz API unificada que permite a los desarrolladores integrar rápidamente las funciones de IA en sus proyectos. El SDK también ofrece capacidades de generación de interfaces de usuario y respuesta de streaming en tiempo real, lo que simplifica enormemente el proceso de desarrollo de aplicaciones de IA.

Lista de funciones

• Interfaz API unificada: admite múltiples proveedores de modelos de IA, como OpenAI, Anthropic, Google, etc.
• Respuesta en tiempo real: permite generar y mostrar respuestas de texto en tiempo real, lo que mejora la experiencia del usuario.
• Generación de la interfaz de usuario: uso de la Reaccione Server Components genera una interfaz de usuario dinámica.
• Compatibilidad con múltiples marcos: compatible con React, Svelte, Vue y Solid, lo que proporciona una amplia aplicabilidad.
• Apoyo a la comunidad: Ofrece una comunidad de debates en GitHub donde los usuarios pueden hacer preguntas y compartir proyectos.

Utilizar la ayuda

montaje

Para empezar a utilizar el SDK de IA de Vercel, necesitará:

1. Preparación medioambiental:
   • Asegúrate de tener instalado Node.js 18+ y pnpm.
   • Cree un nuevo proyecto o añada este SDK a un proyecto existente.
2. Instale el SDK:
   • Abra su terminal y navegue hasta el directorio de su proyecto.
   • Ejecute el comando pnpm add ai para instalar el SDK.
3. Configurar variables de entorno:
   • Dependiendo del proveedor de modelos de IA que esté utilizando (por ejemplo, OpenAI), establezca la clave de API adecuada. Normalmente, tendrás que añadir OPENAI_API_KEY u otras variables de entorno relevantes al archivo .env.

Pasos de uso

Generación de texto básico

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'),
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
console.log(text);
}
main();
import { generateText } from 'ai';
导入{OpenAi } '@ai-sdk/openai' ;
异步 功能 主要的（ ） {
const {text} =等待generateText（{
模型：OpenAi（ 'GPT-4-Turbo' ），
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
控制台.log（text）;
}
主要的（）;

• Descripción: Este código muestra cómo generar texto utilizando los modelos de OpenAI. generateText es una de las principales funciones que ofrece el SDK de IA de Vercel, que permite generar rápidamente respuestas de texto basadas en IA.

Creación de la interfaz de chatSi quieres construir una interfaz de chat, puedes utilizar los hooks useChat o useCompletion:

import { useChat } from 'ai/react';
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
<ul>
{messages.map((m, index) => (
<li key={index}>{m.role}: {m.content}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input 
value={input} 
onChange={handleInputChange} 
placeholder="Say something..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}
import { useChat } from 'ai/react';
功能 聊天（ ） {
const {消息，输入，handleinputChange，handlesubmit} = usechat（）;
返回（
％3CDIV％3E
3cul％3E
{messages.map（（m，index）=％3E（
％3cli键= {index}％3E {m.role}：{m.content}％3C/li％3E
))}
％3C/ul％3E
％3cform onsubmit = {handlesubmit}％3E
％3点
价值

• Descripción: Este ejemplo demuestra el uso de ganchos useChat para construir rápidamente una interfaz de chat que soporte respuestas en tiempo real. Cada vez que el usuario envíe un mensaje, la IA generará y mostrará una respuesta en tiempo real.

Generar IUPara generar interfaces de usuario, el SDK Vercel AI admite el uso de componentes de servidor React (RSC):

import { streamUI } from 'ai/rsc';
async function submitMessage() {
'use server';
const stream = await streamUI({
// ... 这里填写你的配置
});
return { ui: stream.value };
}
import { streamUI } from 'ai/rsc';
异步 功能 subtmessage （ ） {
“使用服务器” ；
const stream =等待流ui（{
// ... 这里填写你的配置
});
返回{ ui ：stream.value};
}

• Descripción: Este es un ejemplo simple que muestra cómo generar elementos dinámicos de interfaz de usuario utilizando la función streamUI. Con RSC, el servidor puede generar y gestionar directamente el estado de la interfaz de usuario, proporcionando una experiencia de usuario más fluida.

Uso avanzado

• Compatibilidad con varios modelos: cambie fácilmente entre distintos proveedores de modelos de IA cambiando los parámetros del modelo.
• Gestión de errores y depuración: utilice los mecanismos de gestión de errores y las herramientas de depuración del SDK para garantizar que sus aplicaciones de IA se ejecutan de forma estable.

Con estos pasos y ejemplos, puedes empezar a crear aplicaciones basadas en IA que aprovechen la potencia proporcionada por el SDK de IA de Vercel para aumentar tu productividad de desarrollo. Si tienes problemas al utilizarlo, te recomendamos que visites las discusiones de GitHub de Vercel para obtener ayuda de la comunidad.