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:
- 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.
- Instale o SDK:
- Abra o terminal e navegue até o diretório do projeto.
- Execute o comando pnpm add ai para instalar o SDK.
- 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
importar { generateText } de 'ai'; import { openai } de '@ai-sdk/openai'; função assíncrona main() { const { text } = await generateText({ model: openai('gpt-4-turbo'), system: 'You are a friendly user. system: 'You're a friendly helper!' , prompt: 'Por que o céu é azul? , }); console.log(text); } main();
importar { generateText } de 'ai' ; import { OpenAi } '@ai-sdk/openai' ; Funções assíncronas Main () { const {text} = wait for generateText ({ model: OpenAi( 'GPT-4-Turbo' ). system: 'You're a friendly assistant!' , prompt: 'Why is the sky blue? , }); console.log(text); ; } main();
- 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:
importar { useChat } de 'ai/react' ; função 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="Diga alguma coisa..." /> <button type="submit">Enviar</button> <input type="hidden" name="trp-form-language" value="pt"/></form> </div> ); }
importar { useChat } de 'ai/react'; function chat() { const {message, input, handleinputChange, handlesubmit} = usechat(); Retorna ( DIV 3cul { messages.map((m, index) = ( li key = {index} {m.role}: {m.content}/li ))} /ul form onsubmit = {handlesubmit} %3pontos Valor
- 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):
importar { streamUI } de 'ai/rsc' ; função assíncrona submitMessage() { 'use server'; função assíncrona submitMessage() const stream = await streamUI({ // ... Preencha sua configuração aqui }); return { ui: stream.value }; const stream = await streamUI({ // ... return { ui: stream.value }; } }
importar { streamUI } de 'ai/rsc' ; função assíncrona subtmessage ( ) { "Usando o servidor"; const stream = wait for streamUI ( { // ... Preencha sua configuração aqui }); Retorna { 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.