Clone do ChatGPT com Next.js
Assistir agora
1. Introdução ao projeto Clone do ChatGPT
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Clone do ChatGPT com Next.js.
Descrição do projeto
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
👉🏽 Sobre esse Mini Projeto
Tecnologias
- Tecnologias:
Next.js
;TypeScript
;Tailwind CSS
;OpenAI
;
Seu Instrutor
Aulas
- Introdução
- 1.
Introdução ao projeto Clone do ChatGPT
11:18 - Layout da Aplicação
Criando a tela inicial do chat
24:49Construindo a sidebar
18:43Criando a tela de chat
19:20- Chamada para a API
Chamando a API da OpenAI
10:47- Criando o hook customizado use-chat
Criando a estrutura do useReducer
14:54Criando a action de adicionar uma mensagem do usuário
12:57Chamando a API no useEffect
14:50- Finalizando a Sidebar
Listando os chats na sidebar
09:53Gerando o título com a API da OpenAI
03:50Salvando as conversas no localStorage
06:57Trocando o chat no clique da sidebar
04:15Deletando uma conversa
05:34- Conclusão
Finalizando o projeto e fazendo o deploy
04:58