Visit: https://tour-gemini.vercel.app

Report Bug

Table of Contents

1. About The Project
   • Project Overview
   • Built With
   • Workflow
   • Database Schema
2. Usage

About The Project

Project Overview

• Chat with AI:

  • Users can interact with an AI chatbot, asking questions and receiving responses in a natural language format.

• Tour Generation:

  • Users can enter a place name.
  • The AI will generate a one-day tour itinerary for that place.
  • The tour itinerary includes a list of attractions and an image of the place.

• Saved Tours:

  • Users can view a list of their previously generated tours.
  • They can also access and view the details of each tour.

• Token Management:

  • Each user has a limited number of tokens available.
  • Tokens are consumed with each chat message sent and tour generation request.
  • Users are notified of the number of tokens available after each request.
  • They can view their available token amount in the profile section also.

Built With

This web app is developed using the following:

• Next.js
• Google Gemini API
• Prisma
• Clerk
• Unsplash API
• Deployment: PlanetScale, Vercel
• Additional libraries/packages used: Tailwind, DaisyUI, React Query, React Hot Toast, React Icons

Workflow:

• All communication with the database and external APIs (Gemini and Unsplash) is handled in Server Actions.

• The authentication of users is managed by Clerk.

• Chat

  • The user enters a message and this is passed to the Gemini's sendMessage function.
  • The received response and previous messages are then displayed to the user.
  • This API internally manages the current chat session context, so we don't need to pass historical messages along with the current message.
  • The response output is restricted to 100 tokens for now.

• New Tour:

  • User enters a city and its country.
  • If this place is already present in the database, then the tour is returned from the database directly.
  • If it is not present in the database, we create a prompt in which we ask Gemini to create a one-day tour and return the response in a specific JSON format.
  • If Gemini can generate a tour and returns the response in the specified JSON format, we call the Unsplash API to get the image of this place.
  • This tour is stored in the database (to avoid any subsequent calls to Gemini for the same place).
  • We also push the current place in the current user's tours list.

• Saved Tours:

  • From the database, we fetch all the tours generated previously by the current user.
  • We can also search for a specific place among the previous tours (using useDeferredValue to avoid intermediate re-renderings while the user is typing for a place and keeping the UI responsive).

• Token Management:

  • Each user is allotted some amount of token on initial login.
  • Whenever we make a call to the Gemini API, we subtract some amount of tokens from the current user.
  • Tokens are not subtracted when fetching a tour from the database.

Database Schema

• The ID of a tour is generated by the database.

• The ID of a user is the same as the Clerk ID.

• To represent this many-to-many relation (each user can have multiple tours and each tour can belong to multiple users), Prisma internally creates another table _TourToUser.

  

• _TourToUser contains 2 columns: the first column is the ID of the Tour and the second column is the ID of the User.

Usage

The live version of this web app is deployed at: https://tour-gemini.vercel.app
To set up locally, follow these simple steps:

1. Clone the repo

   git clone https://github.com/shakib1729/tour-gemini.git

2. Install NPM packages

   npm install

3. Setup DATABSAE_URL (for Prisma) in .env file and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, GEMINI_API_KEY, UNSPLASH_API_KEY in .env.local
4. Run the project

   npm run dev