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ê.
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.
-
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.
- 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.
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
- Tecnologias:
Next.js;TypeScript;Tailwind CSS;OpenAI;