We use Google's Gemini API to generate text. NextJS app calls the API through a chat interface
The 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.
A sample VIDEO DEMO hosted on Youtube:
There is one component in the app: Chat.tsx. The useChat function is used to interact with the API found in api/chat/route.ts.
In an .env file keep the Gemini API key under the variable GOOGLE_GENERATIVE_AI_API_KEY.
To install dependencies, run:
yarnTo start the app, run:
yarn devOpen http://localhost:3000 with your browser to see the chat interface.
Playwright(Python) is used to test the chat flow (in Playwright-test folder). The chatflow for testing includes:
- Send a sample message ("Hi, tell me a story!").
- Check if the user's message appears in the chat bubble.
- Wait for the AI response and verify it is not empty.
A screenshot of the automated Playwright test:
The app can be deployed as a Docker container using the provided Dockerfile.
docker build -t nextjs-ai-chatbot .
docker run -p 3000:3000 nextjs-ai-chatbotTypeScript detects mismatch due to different versions of @ai-sdk/provider and @ai-sdk/google
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:
rm -rf node_modules package-lock.json
npm installLoading favicon in the web title.
Solution: Add favicon in the head tag.: In layout.tsx, add the following code:
<head>
<link rel="icon" href="/favicon.ico" />
</head>The code snippet should be under the html tag.