Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• package.json
• vite.config.ts
• index.html
• services/geminiService.ts
• App.tsx
• components/AiDemo.tsx
• components/Chatbot.tsx
• index.tsx

This guide provides instructions on how to set up, configure, and run the AI for Thai EMS project locally. The project is a web application built to showcase a framework for applying Artificial Intelligence (AI) to enhance Emergency Medical Service (EMS) processes in Thailand. It utilizes React, Vite, and the Google Gemini API for its core functionality.

The application demonstrates AI capabilities through two main features: an "AI in Action" simulation for emergency dispatch analysis and an interactive AI Assistant chatbot. Both features rely on the Gemini API to process and respond to user inputs.

Sources: metadata.json, README.md, App.tsx:11-21

Prerequisites

Before you begin, ensure you have Node.js installed on your system. The project also requires a Google Gemini API key to interact with the AI models.

Sources: README.md:11

Installation and Configuration

Follow these steps to install dependencies and configure the application.

1. Install Dependencies

Clone the repository and install the required npm packages.

npm install

This command reads the dependencies and devDependencies from package.json and installs them into your node_modules directory.

Sources: README.md:14-15, package.json:10-19

2. Configure API Key

The application requires a Google Gemini API key to function.

1. Create a file named .env.local in the root of the project.
2. Add your Gemini API key to this file:

GEMINI_API_KEY=YOUR_API_KEY_HERE

The Vite build process, configured in vite.config.ts, will load this environment variable and make it available to the application as process.env.GEMINI_API_KEY.

The diagram below illustrates how the API key is loaded and used.

This diagram shows the flow of the Gemini API key from the local environment file to the service that communicates with the Google API.

Sources: README.md:16-17, vite.config.ts:6,12-13, services/geminiService.ts:4

Running the Application

The project includes scripts to run a development server, build the application for production, and preview the production build.

Script	Command	Description
Development	npm run dev	Starts the Vite development server, typically on http://localhost:3000.
Build	npm run build	Compiles the TypeScript and React code into static assets for production.
Preview	npm run preview	Starts a local static web server to preview the production build.

Sources: package.json:6-9, vite.config.ts:7-10

The local development workflow is as follows:

This flowchart shows the process of starting the local development server and rendering the application.

Sources: package.json:7, index.html:38, index.tsx:3-14

Project Structure

The repository is organized into several key directories and files. The main application logic resides in the root directory, which is a standard convention for Vite projects.

File / Directory	Description
index.html	The main HTML entry point for the application. It includes import maps for external libraries like React and @google/genai.
index.tsx	The main TypeScript entry point that renders the React App component into the DOM.
App.tsx	The root component of the application, which assembles all other UI components and sections.
package.json	Defines project metadata, scripts, and dependencies.
vite.config.ts	Configuration file for the Vite build tool, including server settings and environment variable definitions.
components/	Contains reusable React components like AiDemo.tsx, Chatbot.tsx, and Header.tsx.
services/	Contains modules that interact with external APIs, such as geminiService.ts.
constants.ts	Stores static data used throughout the application, such as project objectives and team members.
types.ts	Defines TypeScript interfaces for data structures like AiAnalysisResult.

Sources: index.html, index.tsx, App.tsx, package.json, vite.config.ts, constants.ts, types.ts

Component Architecture

The application is built with a component-based architecture. The App component serves as the main container.

This diagram shows how index.tsx renders the main App.tsx component, which in turn uses various UI components. The AiDemo and Chatbot components utilize the geminiService to communicate with the AI backend.

Sources: index.tsx:3, App.tsx:2-10, components/AiDemo.tsx:3, components/Chatbot.tsx:4

AI Integration

The core AI functionality is powered by the Google Gemini API, accessed via the @google/genai library. The services/geminiService.ts file acts as a dedicated service layer for all interactions with the Gemini API.

Key Functions

• analyzeEmergencyCallWithGemini(transcript: string): This function takes a string transcript of an emergency call, sends it to the gemini-2.5-flash model, and expects a structured JSON response. The expected response format is defined by a schema within the function.
• sendMessageToChatStream(...): This function handles the interactive chatbot. It sends the user's message and conversation history to either gemini-2.5-pro or gemini-2.5-flash and returns a response stream. It also supports enabling tools like Google Search and Maps.

Sources: services/geminiService.ts:8-48, 55-83

AI Analysis Flow

The following sequence diagram illustrates how the AiDemo component uses the geminiService to analyze a call transcript.

This diagram shows the user starting the simulation, the AiDemo component building a transcript and calling the geminiService, which then communicates with the external Gemini API and returns the structured analysis.

Sources: components/AiDemo.tsx:55-66, 107-110, services/geminiService.ts:8-48