Vercel AI SDK: criação de aplicativos com tecnologia de IA com estruturas de front-end populares

Introdução geral

O Vercel AI SDK é uma ferramenta de código aberto desenvolvida pela equipe da Vercel para ajudar os desenvolvedores a criar aplicativos de IA usando estruturas como React, Svelte, Vue e Solid. Ele oferece suporte a vários provedores de modelos de linguagem, incluindo OpenAI, Anthropic, Google Gêmeos O SDK oferece uma interface API unificada que permite aos desenvolvedores integrar rapidamente a funcionalidade de IA em seus projetos. O SDK também oferece resposta de streaming em tempo real e recursos de geração de interface de usuário, simplificando muito o processo de desenvolvimento de aplicativos de IA.

Lista de funções

• Interface API unificada: suporta vários provedores de modelos de IA, como OpenAI, Anthropic, Google, etc.
• Real-time Streaming Response: permite que as respostas de texto sejam geradas e exibidas em tempo real, aprimorando a experiência do usuário.
• Geração da interface do usuário: usando o Reagir Os componentes do servidor geram uma interface de usuário dinâmica.
• Suporte a várias estruturas: compatível com React, Svelte, Vue e Solid, proporcionando ampla aplicabilidade.
• Suporte à comunidade: fornece uma comunidade de discussões no GitHub onde os usuários podem fazer perguntas e compartilhar projetos.

Usando a Ajuda

montagem

Para começar a usar o Vercel AI SDK, você precisará de:

1. Preparação ambiental:
   • Certifique-se de que você tenha o Node.js 18+ e o pnpm instalados.
   • Crie um novo projeto ou adicione esse SDK a um projeto existente.
2. Instale o SDK:
   • Abra o terminal e navegue até o diretório do projeto.
   • Execute o comando pnpm add ai para instalar o SDK.
3. Configurar variáveis de ambiente:
   • Dependendo do provedor de modelo de IA que estiver usando (por exemplo, OpenAI), defina a chave de API apropriada. Normalmente, você precisará adicionar OPENAI_API_KEY ou outras variáveis de ambiente relevantes ao arquivo .env.

Etapas de uso

Geração 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）;
}
主要的（）;

• Descrição: este código mostra como gerar texto usando os modelos do OpenAI. generateText é um dos principais recursos fornecidos pelo Vercel AI SDK, permitindo que você gere rapidamente respostas de texto orientadas por IA.

Criação da interface de bate-papoSe você quiser criar uma interface de bate-papo, poderá usar os ganchos useChat ou 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点
价值

• Descrição: este exemplo demonstra o uso de hooks useChat para criar rapidamente uma interface de bate-papo que ofereça suporte a respostas em tempo real. Sempre que o usuário enviar uma mensagem, a IA gerará e exibirá uma resposta em tempo real.

Gerar interface do usuárioPara gerar interfaces de usuário, o Vercel AI SDK suporta o 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};
}

• Descrição: este é um exemplo simples que mostra como gerar elementos dinâmicos de UI usando a função streamUI. Com o RSC, o servidor pode gerar e gerenciar diretamente o estado da interface do usuário, proporcionando uma experiência de usuário mais tranquila.

Uso avançado

• Suporte a vários modelos: alterne facilmente entre diferentes provedores de modelos de IA alterando os parâmetros do modelo.
• Tratamento de erros e depuração: use os mecanismos de tratamento de erros e as ferramentas de depuração do SDK para garantir que seus aplicativos de IA sejam executados de forma estável.

Com essas etapas e exemplos, você pode começar a criar aplicativos baseados em IA que aproveitam o poder fornecido pelo Vercel AI SDK para aumentar sua produtividade de desenvolvimento. Se você encontrar problemas ao usá-lo, recomendamos visitar as discussões do GitHub da Vercel para obter suporte da comunidade.