Trip Blueprint

Published in

Google Cloud - Community

4 min readAug 5, 2024

Welcome to Trip Blueprint, an AI-powered travel itinerary planner built with React. Trip Blueprint helps you create, customize, and visualize your travel plans seamlessly. By integrating the Gemini API and Google Maps API, it provides real-time data and interactive maps to enhance your travel planning experience. Perfect for travel enthusiasts who want a streamlined and personalized trip planning solution.

Features

Interactive Maps: Leverage the power of Google Maps API to visualize routes and locations, making it easier to plan your journey.
Customizable Itineraries: Tailor your travel plans to your preferences, ensuring a personalized experience.
Real-time Data: Access up-to-date information about destinations with the Gemini API.
Responsive Design: Enjoy a seamless experience across all devices with a fully responsive design.
User Authentication: Secure login and sign-up functionality (currently under progress).

3.3Setup

Setup and Requirements

Sign up or Sign in to your Google Cloud account and create a new project. After creating your project, note your project ID for further use.
Enable APIs For Google Maps & Google Gemini

2. Cloning Repository

The Project Is Written In React JS

git clone https://github.com/swarnade/trip-blueprint.git

Assets:- Contains Various Images/Logos

Components:-Contains all the Sub-Components Used To Display Various Objects

Pages:- Contains The Main Pages That Are To Be Displayed

cd trip-blueprint

npm i

3. Creating Environmental variables

Create Maps API @ Google Cloud Console

Make Sure To Enable “Maps JavaScript & Direction API”

Create Gemini API Keys @ MakerSuite

Make sure to add API keys for Gemini & Maps

     REACT_APP_API_GEMINI=
     REACT_APP_API_MAPS=

Note:-Make Sure To Enable Google Maps & Gemini APIs from Google Cloud Console

4.Starting The Project

npm run dev

5.The Project Is Upp

https://localhost:5173

Using Gemini On Vertex Ai [Optional]

Open Google Cloud Console
Search Vertex Ai

3.Go To Plan.jsx , Replace The Code With Gemini in Vertex Ai

 npm install @google-cloud/vertexai

const {VertexAI} = require('@google-cloud/vertexai');

async function generate_from_text_input(projectId = 'PROJECT_ID') {
  const vertexAI = new VertexAI({project: projectId, location: ''});

  const generativeModel = vertexAI.getGenerativeModel({
    model: 'gemini-1.5-flash-001',
  });

    const jsonnn = '```json';
    const prompt = `Make a ${props.date} Days & ${props.person} Person Tour Plan For ${props.place}  In Format "[{
      "day": "",
      "title": "",
      "description": "",
      "locations": [
        {
          "name": "",
          "type": "",
          "description": "",
          "time": ""
        }
      ],
      "notes": ""
    }] " Format Such That It Directly Compatible In Map Function Of JS And Only Directly The Json Only & And Make Sure Not To Print "${jsonnn}"`;

  const resp = await generativeModel.generateContent(prompt);
  const contentResponse = await resp.response;
  const data = eval(contentResponse);
  setOut(data);
}