{"id":49471727,"url":"https://github.com/rukshar69/nextjs-gemini-chatbot","last_synced_at":"2026-04-30T16:36:23.941Z","repository":{"id":261615070,"uuid":"884826487","full_name":"rukshar69/nextjs-gemini-chatbot","owner":"rukshar69","description":"NextJS Chatbot with Gemini API to generate textual adventure games","archived":false,"fork":false,"pushed_at":"2024-11-10T09:23:39.000Z","size":1040,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-30T16:36:21.761Z","etag":null,"topics":["automation-testing","chatbot","docker","gemini-api","nextjs","playwright","prompt-engineering"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rukshar69.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-11-07T13:10:55.000Z","updated_at":"2025-03-30T08:48:54.000Z","dependencies_parsed_at":"2024-11-07T14:39:13.212Z","dependency_job_id":null,"html_url":"https://github.com/rukshar69/nextjs-gemini-chatbot","commit_stats":null,"previous_names":["rukshar69/nextjs-gemini-chatbot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rukshar69/nextjs-gemini-chatbot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rukshar69%2Fnextjs-gemini-chatbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rukshar69%2Fnextjs-gemini-chatbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rukshar69%2Fnextjs-gemini-chatbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rukshar69%2Fnextjs-gemini-chatbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rukshar69","download_url":"https://codeload.github.com/rukshar69/nextjs-gemini-chatbot/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rukshar69%2Fnextjs-gemini-chatbot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32470879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["automation-testing","chatbot","docker","gemini-api","nextjs","playwright","prompt-engineering"],"created_at":"2026-04-30T16:36:23.250Z","updated_at":"2026-04-30T16:36:23.933Z","avatar_url":"https://github.com/rukshar69.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS AI Chatbot to Generate Textual Adventure Game\n\nWe use Google's Gemini API to generate text. NextJS app calls the API through a chat interface\n\nThe system prompt instructs Gemini to act as an interactive adventure storyteller, generating  user-driven narratives with multiple possible paths and endings. It requires the AI to craft immersive scenes that unfold based on user choices. Each choice should lead to unique outcomes and include plot twists to keep the adventure engaging.\n\n\u003cimg src=\"images/story-teller-nextjs.png\" alt=\"app demo\" width=350 height=470\u003e\n\nA sample **VIDEO DEMO** hosted on Youtube:\n\n[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/82cfLiSjNr0/0.jpg)](https://youtu.be/82cfLiSjNr0)\n\n\n\n\nThere is one component in the app: **Chat.tsx**. The **useChat** function is used to interact with the API found in **api/chat/route.ts**.\n\n## Getting Started\n\nIn an *.env* file keep the Gemini API key under the variable **GOOGLE_GENERATIVE_AI_API_KEY**.\n\nTo install dependencies, run:\n\n```bash\nyarn\n```\n\nTo start the app, run:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the chat interface.\n\n## Automation Testing with Playwright\n\nPlaywright(Python) is used to test the chat flow (in Playwright-test folder). The chatflow for testing includes:\n- Send a sample message (\"Hi, tell me a story!\").\n- Check if the user's message appears in the chat bubble.\n- Wait for the AI response and verify it is not empty. \n\nA screenshot of the automated Playwright test:\n\n\u003cimg src=\"images/playwright-automation-test.png\" alt=\"app demo\" width=450 height=400\u003e\n\n## Dockerization\n\nThe app can be deployed as a Docker container using the provided Dockerfile.\n\n```bash\ndocker build -t nextjs-ai-chatbot .\ndocker run -p 3000:3000 nextjs-ai-chatbot\n```\n\n## Challenge\n\n### Challenge 1\nTypeScript detects mismatch due to different versions of *@ai-sdk/provider* and *@ai-sdk/google*\n\n**Solution: Clear node_modules and Reinstall:** Delete the node_modules folder and the lock file (*package-lock.json or yarn.lock*), then reinstall dependencies to ensure all packages are aligned:\n\n```bash\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n### Challenge 2\nLoading **favicon** in the web title. \n\n**Solution: Add favicon in the head tag.**:\nIn *layout.tsx*, add the following code:\n\n```tsx\n\u003chead\u003e\n\u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n\u003c/head\u003e\n```\nThe code snippet should be under the html tag.\n\n## References\n- [NextJS ChatBot Template Tutorial](https://www.youtube.com/watch?v=sHuIIX79MOs\u0026ab_channel=CodebenderAI)\n- [useChat() documentation](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat)\n- [ai-sdk chatbot](https://sdk.vercel.ai/docs/ai-sdk-ui/chatbot)\n- [NextJS Dockerization tutorial](https://dev.to/vorillaz/how-to-dockerize-a-nextjs-app-4e4h)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frukshar69%2Fnextjs-gemini-chatbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frukshar69%2Fnextjs-gemini-chatbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frukshar69%2Fnextjs-gemini-chatbot/lists"}