Aprendizagem pessoal com IA
e orientação prática

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

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) =&gt; (
<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.


Não pode ser reproduzido sem permissão:Chefe do Círculo de Compartilhamento de IA " Vercel AI SDK: criação de aplicativos com tecnologia de IA com estruturas de front-end populares

Chefe do Círculo de Compartilhamento de IA

O Chief AI Sharing Circle se concentra no aprendizado de IA, fornecendo conteúdo abrangente de aprendizado de IA, ferramentas de IA e orientação prática. Nosso objetivo é ajudar os usuários a dominar a tecnologia de IA e explorar juntos o potencial ilimitado da IA por meio de conteúdo de alta qualidade e compartilhamento de experiências práticas. Seja você um iniciante em IA ou um especialista sênior, este é o lugar ideal para adquirir conhecimento, aprimorar suas habilidades e realizar inovações.

Entre em contato conosco
pt_BRPortuguês do Brasil