Já considerou a possibilidade de desenvolver o seu próprio chatbot? A inteligência artificial está conquistando cada vez mais espaço, e com a API da OpenAI, você tem a oportunidade de criar o seu próprio ChatGPT. Com a capacidade de gerar textos de maneira natural, o seu chatbot estará pronto para conversar com você.

🤓 Antes de começar

Este Mini Projeto contém um boilerplate inicial, ou seja, algumas partes do código já estão prontas para que você possa focar nas tecnologias principais. Atente-se, portanto, à estrutura do código inicial.

Caso você prefira começar do zero, não tem problema, basta apagar os arquivos.

🔨 Requisitos

• Utilize o Next.js + TypeScript + Tailwind CSS.

• Utilize a API da OpenAI para gerar os textos.

  👀 Dicas:

  • Utilize as rotas de API do Next.js para fazer as requisições à OpenAI.
  • Tire as suas dúvidas na documentação da OpenAI.

• Crie um guia inicial de como o usuário pode obter a sua chave de acesso da OpenAI.

• Seu app deve ter um campo de texto para o usuário digitar a sua chave.

  ⚠️ Cuidado:

  • Sua chave API é secreta e não pode ser compartilhada. Utilize-a somente em sua máquina local e não faça commit com ela no seu código.

• Seu app deve ter um campo de texto para o usuário digitar a sua pergunta.

  👀 Dicas:

  • Busque reaproveitar componentes.
  • Fique à vontade para utilizar qualquer gerenciador de estado.

• Seu app deve ter um botão para enviar a pergunta à OpenAI.
• Crie componentes para renderizar as perguntas do usuário e respostas do bot.
• Crie um loading para indicar que a resposta do bot está sendo processada.

🔨 Desafio extra para quem quer ir além

• Crie um menu lateral para armazenar diferentes conversas.
• Crie uma lógica para que seja possível navegar entre as conversas.
• Crie uma lógica para que seja possível excluir uma conversa.
• Utilize o localStorage para carregar a sua lista de conversas ao abrir a aplicação.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse Mini Projeto

Tecnologias

• Tecnologias:
  • Next.js;
  • TypeScript;
  • Tailwind CSS;
  • OpenAI;