{"id":20314170,"url":"https://github.com/samuel-ricardo/nextgpt","last_synced_at":"2025-09-22T22:31:26.375Z","repository":{"id":163520596,"uuid":"634874431","full_name":"Samuel-Ricardo/NextGPT","owner":"Samuel-Ricardo","description":"Full cycle Chat to talk with OpenAI GPT with a auth system","archived":false,"fork":false,"pushed_at":"2023-07-06T18:46:15.000Z","size":21350,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-14T18:14:13.078Z","etag":null,"topics":["chat","docker","go","gpt","grpc","javascript","keycloack","mysql","nextauth","nextjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Samuel-Ricardo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-01T12:40:29.000Z","updated_at":"2024-08-26T01:35:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"965f70a7-a271-4a6b-b286-e427bebed0ff","html_url":"https://github.com/Samuel-Ricardo/NextGPT","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2FNextGPT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2FNextGPT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2FNextGPT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Ricardo%2FNextGPT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Samuel-Ricardo","download_url":"https://codeload.github.com/Samuel-Ricardo/NextGPT/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233895274,"owners_count":18747019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","docker","go","gpt","grpc","javascript","keycloack","mysql","nextauth","nextjs","tailwindcss","typescript"],"created_at":"2024-11-14T18:14:14.625Z","updated_at":"2025-09-22T22:31:19.438Z","avatar_url":"https://github.com/Samuel-Ricardo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextGPT\n\u003cp align=\"center\"\u003e \n  \u003ca href=\"https://fullcycle.com.br/\" target=\"_blank\"\u003e\n    \u003cimg width=\"auto\" src=\"./readme_file/image.png\"/\u003e\n  \u003c/a\u003e \n\u003c/p\u003e\n\n\u003ch4 align=\"center\" \u003e🚀 🟨 Full Cycle Learning Experience - 2023 🟨 🚀\u003c/h4\u003e\n\n\u003ch4 align=\"center\"\u003e\n  Application developed during a Programmer Event, the \u003ca style=\"color: #8a4af3;\" href=\"https://github.com/search?q=full%20cycle%20learning%20experience\u0026type=repositories\" target=\"_blank\"\u003eFull Cycle Learning Experience\u003c/a\u003e promoted by \u003ca style=\"color: #8a4af3;\" href=\"https://fullcycle.com.br/\" target=\"_blank\"\u003e@FullCycleSchool\u003c/a\u003e\n\u003c/h4\u003e\n\n#\n\n\u003cp align=\"center\"\u003e\n  |\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#project\"\u003eOverview\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#techs\"\u003eTechnologies\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#app\"\u003eProject\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#run-project\"\u003eRun\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n  \u003ca style=\"color: #8a4af3;\" href=\"#author\"\u003eAuthor\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n\n#\n\n\u003ch1 align=\"center\"\u003e\n  \n  \u003ca href=\"https://github.com/Samuel-Ricardo\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=GITHUB\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca herf=\"https://www.instagram.com/samuel_ricardo.ex/\"\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel.ex\u0026color=black\u0026style=for-the-badge\u0026logo=instagram'/\u003e \n  \u003c/a\u003e\n\n  \u003ca herf='https://www.linkedin.com/in/samuel-ricardo/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=LinkedIn'/\u003e \n  \u003c/a\u003e\n\n\u003c/h1\u003e\n\n\u003cbr\u003e\n\n\u003cp id=\"project\"/\u003e\n\n\u003cbr\u003e\n\n\u003ch2\u003e  | :artificial_satellite: About:  \u003c/h2\u003e\n\n\u003cp align=\"justify\"\u003e\n    This project is one application of a complete Full Cycle Chat project to talk in real time with Chat-GPT, with amazing technologies like NextJS for front-end, Back-End for Front-end with NextJS, Next Auth + Keyclock for Authentication and Users management, MySQL database, GO Lang for microsservice, Docker and the power of Chat-GPT with real time reactive data and gRPC communication.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"128px\" src = \"https://anch.ai/wp-content/uploads/2023/04/blog-new-chatgpt.png\" /\u003e\n  \u003cimg width=\"128px\" src = \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbsRJ8KR7ADqtND-a1upt8M0wAufo6NBpYw31g68Eytz-9uXF5u32ziWo8JjeQf7OmNC0\u0026usqp=CAU\"/\u003e\n  \u003cimg width=\"128px\" src = \"https://www.mundodocker.com.br/wp-content/uploads/2015/06/docker_facebook_share.png\" /\u003e\n  \u003cimg width=\"128px\" src = \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzKsNo97qflGoKifTQP6ztDT9tM-k2SIVsz7KV5vPsB0opSP00nLG6UIyy3oFSZDLkztA\u0026usqp=CAU\" /\u003e\n  \u003cimg width=\"128px\" src = \"https://res.cloudinary.com/practicaldev/image/fetch/s--TpDTGYw5--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuxiptjqj8pa4bvyffym.png\" /\u003e\n  \u003cimg width=\"128px\" src = \"https://devtools.com.br/blog/wp-content/uploads/2013/06/MySQL-Logo.wine_.png\" /\u003e\n  \u003cimg width=\"128px\" src = \"https://grpc.io/img/logos/grpc-icon-color.png\" /\u003e \n  \u003cimg width=\"128px\" src = \"https://www.materialize.pro/wp-content/uploads/2021/10/GOLANG.png\" /\u003e \n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\n    This application is a chat site to talk directly with a AI powered by the amazing OpenAI Chat GPT, creating chats with isolated context and real time messages and stream responses, using a advanced authentication system all this with a clean and modern Metalic UI.\n\u003c/p\u003e\n\n\u003cp align=\"justify\"\u003e\n    Here i use a complete test ambiente, Unit test, E2E, back-end, front-end, using jest, cypress... All application have a robust base because of it.\n\u003c/p\u003e\n\n\u003e \u003ca href=\"https://github.com/Samuel-Ricardo\" target=\"_blank\"\u003e \u003cimg src=\"https://github.com/Samuel-Ricardo/GPT-Chat_Service/raw/main/readme_files/app_preview.png\"\u003e \u003c/a\u003e\n\n  \u003cbr\u003e\n\n#\n\n\u003cbr/\u003e\n\n- Front-End \u0026 Back-End : NextJS | [ [repositories](https://github.com/Samuel-Ricardo/NextGPT) ]\n- microsservice : GO Lang | [ [repositories](https://github.com/Samuel-Ricardo/GPT-Chat_Service) ]\n\n#\n\n\u003cbr\u003e\n\n\u003ch2 id=\"techs\"\u003e\n  :building_construction: | Technologies and Concepts Studied:\n\u003c/h2\u003e\n\n\u003e \u003ca href='https://nextjs.org/'\u003e \u003cimg width=\"128px\" src=\"https://nextjs.org/static/blog/next-13-4/twitter-card.png\" /\u003e \u003c/a\u003e\n\n- NextJS\n- REST\n- gRPC\n- SWR\n- Server Sent Events\n- Streams\n- TailwindCSS\n- Prisma\n- MySQL\n- Typescript\n- Jest\n- Cypress\n- Docker\n- Enzyme\n- Marked\n- Axios\n- eslint\n- Prettier\n- husky\n- isomorphic-fetch\n- lint-staged\n- Highlight.js\n- Mullti Thread and Concurrency\n- Design Patterns\n- Perfomance\n- Clean Architeture\n- Clean Code / SOLID\n- Scalability\n- Real Time\n\n\u003e Among Others...\n\n#\n\n\u003cbr\u003e\n\n\n\u003ch2 id=\"app\"\u003e\n  💻 | Application:\n\u003c/h2\u003e\n\n\u003e Go to the video demo by clicking on any image\n  \n  \u003cbr\u003e\n  \u003cbr\u003e\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/NextGPT/tree/main/readme_file/demo\"\u003e \u003cimg src=\"./readme_file/2image.png\" /\u003e \u003c/a\u003e\n\n First of all, this is a full stack app that une back and front end in the same project, all thanks to NextJS. So the backend part is a REST API with middlewares and routes authentications. This API communicate with GO Lang Microsservice to manage the chat life cycle and handle with GPT, by otherside, the api manage the user life cylce using Next Auth to connect with Keycloack a complete auth system with a dashboard full of functionalities that gives to you the control of system as user friendly way, perfect for no technical people,\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/NextGPT/tree/main/readme_file/demo\"\u003e \u003cimg src=\"./readme_file/1image.png\" /\u003e \u003c/a\u003e\n\n This whole project is concerned with having a robust base, for that, i apply concepts of clean archteture both in back and in front end for a better programming experience and maintainability, you can see patterns like, repository, gateway, controller, DTO, service (adapted), use case, factory, entity  and etc...\n\n \u003cbr\u003e\n\n Still on the developmente expereince question, the most relevant part of code, bussines rules and possibles cases are covered by a full cycle of test that include from unit tests to End 2 End tests with Jest and Cypress, eslint and prettier to keep the code organization, pre-commit and pre-push routines that clean up the code and ensure safety before committing the changes and Docker to run all this infrastructure without headache and Dev Containers to run a complete off-the-shelf development environment.\n\n\u003cbr\u003e\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/NextGPT/tree/main/readme_file/demo\"\u003e \u003cimg src=\"./readme_file/chat1.png\" /\u003e \u003c/a\u003e\n\nThis app uses advanced caching strategy using SWR, it allows to make better and performatic external calls including APIs and microservices, keeping smart caching, it is more fast, efficient and cost-effective than common way, Enabling your app to perform more without degrading the user experience\n\n\u003cbr\u003e\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/NextGPT/tree/main/readme_file/demo\"\u003e \u003cimg src=\"./readme_file/chat2.png\" /\u003e \u003c/a\u003e\n\nThe data is storaged in a MySQL Database that is managed by Prisma that make developers life easier, you can access the database by using adminer (light) or phpmyadmin (full) dashboard, the beautifull visual is build with TailwindCSS with a amazing and perfomatic way of use CSS Style Classes. Proto work by handling gRPC data and converting to TypeScript data structure.\n\n#\n\n\u003e \u003cimg src=\"./readme_file/adminer.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/adminer2.png\"/\u003e\n\n#\n\n\u003e \u003cimg src=\"./readme_file/phpmyadmin.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/phpmyadmin2.png\"/\u003e\n\n#\n\n\u003e API Example:\n\n```bash\n\nGET http://localhost:3000/api/hello\n\n###\nPOST http://localhost:3000/api/chats\nContent-Type: application/json\n\n{\n  \"message\": \"Hello World\"\n}\n\n###\nGET http://localhost:3000/api/chats\n\n###\n@chatId = \n\nGET http://localhost:3000/api/chats/{{chatId}}/messages\n\n###\nPOST http://localhost:3000/api/chats/{{chatId}}/messages\nContent-Type: application/json\n\n{\n  \"message\": \"Estou testando a API 2222\"\n}\n\n###\n@messageId = d56cf557-17b5-4a9f-ac58-1f0be4bccbe3\n\nGET http://localhost:3000/api/messages/{{messageId}}/events\n\n```\n\n\u003cbr\u003e\n\n\u003ch3\u003e [💻] - Project Plannig: \u003ch3\u003e\n\n\n \u003cimg src=\"./readme_file/Untitled.png\"/\u003e\n\n\n#\n\n\u003cbr\u003e\n\n\u003ch2\u003e \n   👨‍💻 | How to run the full project\n\u003c/h2\u003e\n\nFirst, you need to setup the GO Lang Microsservice, click on image bellow to setup it\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/GPT-Chat_Service#------how-to-use\"\u003e \u003cimg width=\"128px\" src=\"https://cdn.thenewstack.io/media/2022/05/57bb2a1f-golang.png\"/\u003e \u003c/a\u003e\n\nNow, you can setup this NextJS App, click on image bellow to setup it\n\n\u003e \u003ca target=\"_blank\" href=\"https://github.com/Samuel-Ricardo/NextGPT#run-project\"\u003e \u003cimg width=\"128px\" src=\"https://wallpapercave.com/dwp1x/wp11846969.jpg\"/\u003e \u003c/a\u003e\n\n\n\n\u003ch2 id=\"run-project\"\u003e \n   👨‍💻 | How to use\n\u003c/h2\u003e\n\n\u003cbr\u003e\n\n### Open your Git Terminal and clone this repository\n\n```git\n  $ git clone \"git@github.com:Samuel-Ricardo/NextGPT.git\"\n```\n\n### Make Pull\n\n```git\n  $ git pull \"git@github.com:Samuel-Ricardo/NextGPT.git\"\n```\n\n\u003cbr\u003e\n\nThis application use `Docker` so you dont need to install and cofigurate anything other than docker on your machine.\n\n\u003e \u003ca target=\"_blank\" href=\"https://www.docker.com/\"\u003e \u003cimg width=\"48px\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-plain-wordmark.svg\" /\u003e \u003c/a\u003e\n\n\u003cbr\u003e\n\nOnce Docker is setup, we can start the project :D\n\n\u003cbr\u003e\n\n\u003cp align=\"justify\"\u003e\n    You will see that it runs all tests and repeat every time they fail until 100% have success in a separated container and later down it.\n\u003c/p\u003e\n\n\u003cp align=\"justify\"\u003e\n    For the first time the project should run, but some test will doesn't work. It happens because the Keycloak needs to be manually configurated after all container up, you can stop the test container for now.\n\u003c/p\u003e\n\n```bash\n\n  # After setup docker environment just run this commmand on root project folder:\n\n  $ docker-compose up --build   # For First Time run this command\n\n  $ docker-compose up           # to run project\n\n```\n\n\u003cimg src=\"./readme_file/containers.png\"/\u003e\n\n```bash\n\n  #Apps Running on:\n\n  $ Site : http://localhost:3000\n  \n  $ API  : htpp://localhost:3000\n  \n  $ Keyclock: http://localhost:9000 - [AUTH]\n  \n  $ MySQL: localhost:3307 - [DB]\n  \n  # DB Manager\n  \n  $ Adminer    : http://localhost:8080 - [light]    - [optional]\n  $ PHPMyAdmin : http://localhost:8088 - [complete] - [optional]\n\n  # Test\n\n  $ app_test     : run all tests and repeat until have 100% success, when it happen the container stop - [optional]\n  $ app_dev_test : Detect project changes and run tests related with this changes if exists - [optional] \n\n  See more: ./next-gpt/docker-compose.yaml\n\n  [optional] - you can stop this container to free up the processor and memory and the app will still be running normally\n\n```\n\n\u003cbr\u003e\n\n#\n\n\u003cbr\u003e\n\n#### * First of all let's setup Keycloack (You only need to do this the first time you run)\n\n\u003cbr\u003e\n\n\u003cp align=\"justify\" \u003e\n Access Keycloack dashboard [http://localhost:9000] and go to \u003ccode\u003eAdministrator Console\u003c/code\u003e and login as admin\n\u003c/p\u003e\n\n\u003cimg src=\"./readme_file/kaycloack.png\"/\u003e\n\n```bash\n\n    $ login : admin\n    $ pass  : admin\n\n    $ See ./next-gpt/docker-compose.yaml\n\n```\n\n\u003e \u003cimg src=\"./readme_file/keycloack2.png\"/\u003e\n\nGo to \u003ccode\u003eClients\u003c/code\u003e and create a new client, name it \u003ccode\u003enextjs\u003c/code\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloack3.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloack4.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloack5.png\"/\u003e\n\nNow let's configurate the access for localhost:\n\n\u003e \u003cimg src=\"./readme_file/keycloack6.png\"/\u003e\n\nNow create a secret and set it on  ```.env```  file \n\n\u003e \u003cimg src=\"./readme_file/keycloack7.png\"/\u003e \n\n\u003e \u003cimg src=\"./readme_file/keycloack8.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloack9.png\"/\u003e\n\n\n#### How to create users:\n\n\u003e \u003cimg src=\"./readme_file/keycloakuser1.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloakuser2.png\"/\u003e\n\nSet user password:\n\n\u003e \u003cimg src=\"./readme_file/keycloakuser3.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloakuser4.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/keycloakuser5.png\"/\u003e\n\n#\n\n#### You need to setup a login token for tests\n\n\u003e \u003cimg src=\"./readme_file/login1.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/login2.png\"/\u003e\n\n\u003e \u003cimg src=\"./readme_file/login3.png\"/\u003e\n\n \u003cimg src=\"./readme_file/login4.png\"/\u003e\n\n#\n\n\u003cbr\u003e\n\n\u003ch2 id=\"author\"\u003e\n  :octocat: | Author:  \n\u003c/h2\u003e\n\n\u003e \u003ca target=\"_blank\" href=\"https://www.linkedin.com/in/samuel-ricardo/\"\u003e \u003cimg width=\"350px\" src=\"https://github.com/Samuel-Ricardo/bolao-da-copa/blob/main/readme_files/IMG_20220904_220148_188.jpg?raw=true\"/\u003e \u003cbr\u003e \u003cp\u003e \u003cb\u003e - Samuel Ricardo\u003c/b\u003e \u003c/p\u003e\u003c/a\u003e\n\n\u003ch1\u003e\n  \u003ca herf='https://github.com/Samuel-Ricardo'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=GITHUB'\u003e \n  \u003c/a\u003e\n  \n  \u003ca herf='https://www.instagram.com/samuel_ricardo.ex/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel.ex\u0026color=black\u0026style=for-the-badge\u0026logo=instagram'\u003e \n  \u003c/a\u003e\n  \n  \u003ca herf='https://twitter.com/SamuelR84144340'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=twitter'\u003e \n  \u003c/a\u003e\n  \n   \u003ca herf='https://www.linkedin.com/in/samuel-ricardo/'\u003e\n    \u003cimg src='https://img.shields.io/static/v1?label=\u0026message=Samuel%20Ricardo\u0026color=black\u0026style=for-the-badge\u0026logo=LinkedIn'\u003e \n  \u003c/a\u003e\n\u003c/h1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-ricardo%2Fnextgpt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuel-ricardo%2Fnextgpt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-ricardo%2Fnextgpt/lists"}