Como integrar a OpenAI no seu projeto Next

A inteligência artificial (IA) desempenha um papel cada vez mais importante no desenvolvimento de aplicativos modernos. Uma das empresas líderes no campo da IA é a OpenAI, que oferece poderosos modelos de linguagem capazes de gerar texto de maneira quase humana. Neste tutorial, você aprenderá como integrar a API da OpenAI em seu projeto Next.js.

Pré-requisitos

Antes de começar, você precisará ter o Node.js e o npm (ou pnpm) instalados em seu sistema. Além disso, é importante que você tenha uma conta na OpenAI para obter sua chave de API.

Passo 1: Configuração do projeto.

Criar um projeto Next.js

Se você ainda não possui um projeto Next.js, crie um novo usando o seguinte comando:

pnpm dlx create-next-app my-ai-app
cd my-ai-app

Instalar pacotes necessários.

A seguir, instale os pacotes necessários, incluindo o Vercel AI SDK e o cliente da API da OpenAI:

pnpm install ai openai

Passo 2: Configuração da chave da Api da OpenAI

Agora, crie um arquivo .env na raiz do seu projeto e adicione sua chave de API da OpenAI:

OPENAI_API_KEY=sua-chave-de-api-aqui

Passo 3: Criar um roteador para a Api

Crie um roteador para a API Next.js que lidará com as solicitações para a OpenAI. Crie um arquivo em app/api/chat/route.ts com o seguinte conteúdo:

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

// Crie um cliente da API da OpenAI
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Configure o tempo de execução para 'edge'
export const runtime = 'edge';

export async function POST(req: Request) {
  // Extraia as mensagens do corpo da solicitação
  const { messages } = await req.json();

  // Solicite à OpenAI uma conclusão de chat em tempo real com base nas mensagens fornecidas
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  // Converta a resposta em um fluxo de texto amigável
  const stream = OpenAIStream(response);

  // Responda com o fluxo
  return new StreamingTextResponse(stream);
}

Passo 4: Configurar a interface do usuário

Agora, vamos criar uma interface de usuário para interagir com a API da OpenAI. Crie um componente chamado Chat em app/page.tsx com o seguinte código:

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <main className="mx-auto w-full h-screen max-w-lg p-24 flex flex-col">
      <section className="mb-auto m">
        {messages.map(m => (
          <div className="mb-4" key={m.id}>
            {m.role === 'user' ? 'Usuário: ' : 'IA: '}
            {m.content}
          </div>
        ))}
      </section>
      <form className="flex space-x-4" onSubmit={handleSubmit}>
        <input
          className="rounded-md p-2 text-black"
          value={input}
          onChange={handleInputChange}
          placeholder="Diga algo..."
        />
        <button
          className="border-solid border-2 border-white p-2 rounded-md"
          type="submit"
        >
          Enviar
        </button>
      </form>
    </main>
  );
}

Passo 5: Testando a integração.

Agora que tudo está configurado, inicie seu aplicativo Next.js com o comando:

pnpm dev

Visite http://localhost:3000 no seu navegador e você poderá interagir com seu chatbot alimentado pela API da OpenAI.

Conclusão

Neste tutorial, você aprendeu como integrar a API da OpenAI em um projeto Next.js para criar um chatbot alimentado por IA. Com essa integração, você pode adicionar facilmente recursos de IA impressionantes aos seus aplicativos web. Explore mais sobre as capacidades da API da OpenAI na documentação oficial.