Vercel AI SDK: создание приложений на основе искусственного интеллекта с помощью популярных фронтенд-фреймворков

Общее введение

Vercel AI SDK - это инструмент с открытым исходным кодом, разработанный командой Vercel для помощи разработчикам в создании приложений искусственного интеллекта с использованием таких фреймворков, как React, Svelte, Vue и Solid. Он поддерживает множество поставщиков языковых моделей, включая OpenAI, Anthropic, Google Близнецы SDK предоставляет унифицированный интерфейс API, позволяющий разработчикам быстро интегрировать функции искусственного интеллекта в свои проекты. SDK также предоставляет возможности потокового ответа в реальном времени и генерации пользовательского интерфейса, что значительно упрощает процесс разработки приложений для ИИ.

Список функций

• Унифицированный интерфейс API: поддерживает множество поставщиков моделей ИИ, таких как OpenAI, Anthropic, Google и др.
• Потоковая передача ответов в режиме реального времени: позволяет генерировать и отображать текстовые ответы в режиме реального времени, что повышает удобство работы с пользователем.
• Создайте пользовательский интерфейс: используйте React Компоненты сервера генерируют динамический пользовательский интерфейс.
• Поддержка нескольких фреймворков: совместим с React, Svelte, Vue и Solid, что обеспечивает широкую применимость.
• Поддержка сообщества: предоставляет сообщество GitHub Discussions, где пользователи могут задавать вопросы и делиться проектами.

Использование помощи

монтаж

Чтобы начать работу с Vercel AI SDK, вам понадобятся:

1. Подготовка к охране окружающей среды:
   • Убедитесь, что у вас установлен Node.js 18+ и pnpm.
   • Создайте новый проект или добавьте этот SDK в существующий проект.
2. Установите SDK:
   • Откройте терминал и перейдите в каталог проекта.
   • Выполните команду pnpm add ai, чтобы установить SDK.
3. Настройте переменные окружения:
   • В зависимости от используемого поставщика моделей ИИ (например, OpenAI), задайте соответствующий ключ API. Как правило, вам нужно добавить OPENAI_API_KEY или другие соответствующие переменные окружения в файл .env.

Этапы использования

Генерация основного текста

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）;
}
主要的（）;

• Описание: Этот код показывает, как генерировать текст с помощью моделей OpenAI. generateText - это одна из основных функций, предоставляемых Vercel AI SDK, позволяющая быстро генерировать управляемые ИИ текстовые ответы.

Создание интерфейса чатаЕсли вы хотите создать интерфейс чата, вы можете использовать хуки useChat или 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点
价值

• Описание: Этот пример демонстрирует использование хуков useChat для быстрого создания интерфейса чата, поддерживающего ответы в реальном времени. Каждый раз, когда пользователь отправляет сообщение, ИИ генерирует и отображает ответ в режиме реального времени.

Создайте пользовательский интерфейсДля создания пользовательских интерфейсов Vercel AI SDK поддерживает использование компонентов React Server Components (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};
}

• Описание: Это простой пример, показывающий, как генерировать динамические элементы пользовательского интерфейса с помощью функции streamUI. С помощью RSC сервер может напрямую генерировать и управлять состоянием пользовательского интерфейса, обеспечивая более плавный пользовательский опыт.

Расширенное использование

• Поддержка нескольких моделей: легко переключайтесь между различными поставщиками моделей искусственного интеллекта, изменяя параметры модели.
• Обработка ошибок и отладка: используйте механизмы обработки ошибок SDK и инструменты отладки, чтобы обеспечить стабильную работу приложений ИИ.

С помощью этих шагов и примеров вы сможете начать создавать приложения на основе ИИ, которые используют возможности Vercel AI SDK для повышения производительности разработки. Если в процессе использования у вас возникнут проблемы, мы рекомендуем посетить обсуждения Vercel на GitHub для получения поддержки сообщества.