Como transmitir a resposta OpenAI em NextJS
Publicados: 2024-03-22Resumo:
Aprenda como transmitir respostas OpenAI perfeitamente em NextJS usando o AI SDK da Vercel. Com um processo de integração simples descrito neste guia, os desenvolvedores podem aproveitar com eficiência o poder da geração de IA em tempo real, melhorando as experiências do usuário e a eficiência do fluxo de trabalho.
No atual cenário digital em rápida evolução, a integração de capacidades avançadas de IA tornou-se imperativa para as empresas que se esforçam para se manterem competitivas. Como uma empresa de desenvolvimento OpenAI, aproveitar o poder de tecnologias de ponta como NextJS para agilizar o processo de geração e gerenciamento de respostas OpenAI apresenta uma infinidade de vantagens.
Desde a melhoria da experiência do usuário até a otimização da eficiência do fluxo de trabalho, a experiência de uma empresa de desenvolvimento OpenAI pode impactar profundamente a integração e utilização perfeitas dos recursos do OpenAI dentro da estrutura NextJS. Neste guia, nos aprofundamos nas estratégias e insights essenciais para que as empresas de desenvolvimento OpenAI aproveitem efetivamente o potencial do NextJS na simplificação das respostas OpenAI, capacitando assim as empresas a desbloquear novos domínios de inovação e eficiência.
Sabemos que você está frustrado e tem procurado streaming de respostas OpenAI no NextJS. Há muitas maneiras de transmitir a resposta do OpenAI e também muito o que fazer após o fluxo que analisa os dados para torná-los legíveis.
Observação: usaremos NextJS e Vercel AI SDK em todo o blog.
O que é Next.js?
Next.js é uma estrutura React para construir aplicativos web full-stack. Você usa React Components para construir interfaces de usuário e Next.js para recursos e otimizações adicionais.
Nos bastidores, Next.js também abstrai e configura automaticamente as ferramentas necessárias para React, como agrupamento, compilação e muito mais. Isso permite que você se concentre na construção de seu aplicativo em vez de perder tempo com configuração.
Quer você seja um desenvolvedor individual ou parte de uma equipe maior, Next.js pode ajudá-lo a construir aplicativos React interativos, dinâmicos e rápidos.
O que é Vercell?
Vercel é uma plataforma para desenvolvedores que fornece as ferramentas, fluxos de trabalho e infraestrutura de que você precisa para construir e implantar seus aplicativos web com mais rapidez, sem a necessidade de configuração adicional.
Vercel oferece suporte a estruturas de front-end populares prontas para uso, e sua infraestrutura escalonável e segura é distribuída globalmente para servir conteúdo de data centers próximos aos seus usuários para velocidades ideais.
Qual é a relação entre Vercel e Nextjs?
A plataforma Vercel é feita pelos criadores do Next.js, projetada para aplicações Next.js. Concluindo, o relacionamento entre Vercel e Next.js representa uma parceria simbiótica que redefine a forma como construímos e implantamos aplicações web. Ao aproveitar os pontos fortes de ambas as plataformas, os desenvolvedores podem desbloquear novas possibilidades e oferecer experiências web excepcionais que se destacam no cenário competitivo atual.
Durante o desenvolvimento, Vercel fornece ferramentas para colaboração em tempo real em seus projetos, como visualização automática e ambientes de produção, e comentários sobre implantações de visualização.
Como podemos facilitar o streaming usando Vercel e NextJS?
Em junho de 2023, a Vercel lançou uma nova biblioteca ai (Vercel AI SDK) que fornece adaptadores LLM integrados / Streaming First UI Helpers / Stream Helpers e Callbacks. Desde esta biblioteca, o streaming da resposta OpenAI tornou-se muito mais fácil.
Antes de mergulhar em um exemplo, deixe-me dizer quais bibliotecas/estruturas de nós o Vercel AI SDK suporta.
Suporta React/Next.js, Svelte/SvelteKit, com suporte para Nuxt/Vue em breve.
Exemplo - Frontend/Backend ambos em NextJS (A react Framework)
Etapa 1: Criando o aplicativo NextJS e instalando o Vercel AI SDK
npx create-next-app@latest
Para instalar o SDK, digite o seguinte comando em seu terminal:
npm eu ai
Para instalar o Openai, digite o seguinte comando em seu terminal:
npm eu abro
Acabei de seguir a estrutura de pastas simples/padrão que npx create-next-app@latest criou para mim para tornar esta demonstração simples e fácil de entender.
Etapa 2: crie uma página front-end para transmitir a resposta
importar {useState} de "reagir";
função padrão de exportação Home() {
const [pergunta, setQuestion] = useState("")
const [resposta, setAnswer] = useState("")
/// função para chamar o roteador openai e processar a resposta de streaming
função assíncrona retriveResponse() {
/// chama a rota
resposta const: qualquer = await fetch("/api/chat", {
método: "POSTAR",
corpo: JSON.stringify({
pergunta
}),
próximo: {revalidar: 0}
})
deixe resptext = "";
leitor const = resposta.body
.pipeThrough(novo TextDecoderStream())
.getReader();
/// continua o stream
enquanto (verdadeiro) {
const {valor, concluído} = aguardar leitor.read();
se (concluído) {
quebrar;
}
resptexto += valor;
setAnswer(resptexto);
}
}
retornar (
<div>
<label htmlFor="Faça sua pergunta"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Transmitir resposta</button>
<br />
<p>{resposta}</p>
</div>
);
}
O componente acima cria uma interface onde os usuários podem inserir perguntas e clicar em um botão para enviar a pergunta para uma API do lado do servidor (/api/chat) e exibir a resposta de streaming do servidor em tempo real
Etapa 3: crie uma rota de back-end para transmitir a resposta
importar OpenAI de "openai";
// Defina o tempo de execução para o limite para melhor desempenho
exportar configuração const = {
tempo de execução: "borda",
};
exportar manipulador de função assíncrona padrão (solicitação, resposta) {
const {pergunta} = aguardar request.json();
//Busca a resposta da API OpenAI
const openai = new OpenAI({
apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
});
const respostaFromOpenAI = aguarda openai.chat.completions.create({
modelo: "gpt-3.5-turbo",
temperatura: 0,
topo_p: 1,
mensagens: [{ role: "usuário", conteúdo: pergunta }],
fluxo: verdadeiro,
})
tentar {
// Converte a resposta em um fluxo de texto amigável
fluxo const = OpenAIStream(responseFromOpenAI);
//Responde com o stream
retornar novo StreamingTextResponse(stream);
} pegar (erro) {
retornar resposta.send(400).send(erro);
}
}
O código acima define uma função sem servidor que recebe uma pergunta de uma solicitação HTTP, a envia para a API OpenAI para processamento e transmite a resposta de volta ao cliente.
Etapa 4: execute o aplicativo
npm executar dev
Saída
Vídeo.webm
Vídeo da demonstração
drive.google.com
Se você assistiu ao vídeo, provavelmente já entendeu bem como a demonstração funciona. Para os interessados em explorar o código completo, você pode encontrá-lo no GitHub neste link: Next.js OpenAI Streaming.
Referências:
https://vercel.com/blog/introduzindo-the-vercel-ai-sdk
https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction
https://platform.openai.com/docs/introduction
Para se manter informado sobre os últimos desenvolvimentos no campo da IA, é aconselhável ficar de olho na documentação de IA da Vercel. Fique atento às atualizações e melhorias à medida que a Vercel continua a aprimorar suas ofertas no domínio de IA.