Local Development Setup

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
• tsconfig.json

This document provides a comprehensive guide to setting up and running the AI-for-Thai-EMS project on a local machine. The project is a web application built with React and Vite, designed to showcase the application of AI in Emergency Medical Services (EMS). It interacts with the Google Gemini API to perform tasks like analyzing emergency call transcripts and powering a chatbot.

The setup involves installing Node.js dependencies, configuring the necessary API keys, and running the local development server. This guide is based on the scripts and configurations defined within the project's source files.

1. Prerequisites

The only prerequisite for running this project locally is having Node.js installed on your system.

Sources: README.md:9

2. Installation

First, install the required project dependencies using npm. This command reads the dependencies and devDependencies from the package.json file and installs them into the node_modules directory.

npm install

Sources: README.md:12

The following diagram illustrates the installation process.

Key Dependencies

The project relies on several key packages for its functionality.

Package	Version	Description
react	^19.2.0	A JavaScript library for building user interfaces.
react-dom	^19.2.0	Serves as the entry point to the DOM and server renderers for React.
@google/genai	^1.28.0	The official Google AI client library for interacting with Gemini models.
vite	^6.2.0	A build tool that provides a faster and leaner development experience.
typescript	~5.8.2	A typed superset of JavaScript that compiles to plain JavaScript.
@vitejs/plugin-react	^5.0.0	The official Vite plugin for React projects.

Sources: package.json:10-19

Note that the index.html file also includes an importmap to load React, ReactDOM, and @google/genai from a CDN. While this is present, the local development setup described in the README.md relies on the npm packages and the Vite build process.

Sources: index.html:19-27

3. Configuration

To use the application's AI features, you must configure your Google Gemini API key.

Environment Variable Setup

1. The README.md specifies creating a .env.local file in the project root.

2. Inside this file, add your Gemini API key as follows:

   GEMINI_API_KEY=your_api_key_here
   

Sources: README.md:13

The Vite configuration is set up to load this environment variable and make it accessible within the application's source code.

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

The vite.config.ts file uses loadEnv to read the .env file and then uses the define property to replace process.env.GEMINI_API_KEY with the actual key string during the build process.

// vite.config.ts
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, '.', '');
    return {
      // ...
      define: {
        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
      },
      // ...
    };
});

Sources: vite.config.ts:5-14

This key is then consumed by the geminiService.ts to initialize the connection to the Google AI services.

// services/geminiService.ts
import { GoogleGenAI, Type, GenerateContentResponse } from "@google/genai";

// We assume process.env.API_KEY is available in the execution environment.
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });

Sources: services/geminiService.ts:4

4. Running the Application

Once dependencies are installed and the API key is configured, you can start the local development server using the dev script defined in package.json.

npm run dev

Sources: README.md:15, package.json:7

This command executes vite, which starts a local development server.

Development Server

The Vite development server is configured in vite.config.ts with the following settings:

Option	Value	Description
port	3000	The port the server will run on.
host	0.0.0.0	Makes the server accessible on the local network.

Sources: vite.config.ts:7-10

The following sequence diagram shows the process of starting the development server.

5. Build and Preview

The package.json file also includes scripts for building the application for production and previewing the build.

Script	Command	Description
build	vite build	Bundles the app into static files for production in the dist directory.
preview	vite preview	Starts a local static web server that serves the files from dist.

Sources: package.json:8-9