Introduction

Relevant source files

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

• README.md
• metadata.json
• App.tsx
• constants.ts
• components/AiDemo.tsx
• services/geminiService.ts
• components/Chatbot.tsx
• package.json
• types.ts
• vite.config.ts

The "AI for Thai EMS" project is a web application designed to showcase a framework for applying Artificial Intelligence (AI) to enhance Emergency Medical Service (EMS) processes in Thailand. It is based on a research project by the National Institute for Emergency Medicine (NIEM). The primary goal is to demonstrate how AI can address common challenges in EMS, such as complex data management, delays in emergency response, and errors in processing information for service payments.
Sources: metadata.json:2-5, App.tsx:23-28

This application serves as a proof-of-concept, illustrating AI's potential to improve emergency incident assessment, command, and control. It features a simulated emergency call analysis and an interactive AI assistant, both powered by Google's Gemini models. The project is built as a modern web application using React, Vite, and TypeScript, and it integrates directly with the Gemini API for its AI capabilities.
Sources: App.tsx:36, components/AiDemo.tsx, components/Chatbot.tsx, package.json:11-13

Project Architecture

The system is a client-side web application that communicates directly with the Google Gemini AI service. There is no custom backend server; all logic is contained within the React frontend, which makes API calls to Google's services.

The following diagram illustrates the high-level architecture of the application.

Frontend Application

The frontend is a single-page application built with React and TypeScript, bundled using Vite. The main application entry point is App.tsx, which composes the UI from various reusable components.

• Core Technologies:
  • React: For building the user interface.
  • Vite: As the build tool and development server.
  • TypeScript: For static typing.
  • TailwindCSS: For styling the application.
• Key Dependencies:
  • @google/genai: The official Google AI SDK for JavaScript.
  • react: The core React library.
  • react-dom: For rendering React components in the DOM.

Sources: package.json:11-18, vite.config.ts, index.html:5, App.tsx

Main UI Components

The application UI is broken down into several key components:

Component	File	Description
App	App.tsx	The root component that assembles the main page layout and sections.
Header	components/Header.tsx	Displays the application header with the NIEM logo and project title.
Section	components/Section.tsx	A reusable component for creating titled content sections.
Timeline	components/Timeline.tsx	Renders the project's operational plan as a visual timeline.
AiDemo	components/AiDemo.tsx	The interactive simulation of an AI-assisted emergency dispatch call.
Chatbot	components/Chatbot.tsx	A floating AI assistant that users can interact with via text or voice.

Sources: App.tsx:2-10

AI Service Integration

All AI functionality is handled by the geminiService.ts module, which provides an interface between the React components and the Google Gemini API.

Sources: services/geminiService.ts

Key Service Functions

1. analyzeEmergencyCallWithGemini(transcript: string): This function takes a conversation transcript, sends it to the gemini-2.5-flash model, and requests a structured JSON output. This is used in the "AI in Action" demo.
2. sendMessageToChatStream(...): This function handles the interactive chatbot. It sends the user's message and conversation history to the Gemini API and returns a streaming response, allowing the chatbot to display the AI's answer as it's being generated. It can switch between gemini-2.5-pro (for "Thinking Mode") and gemini-2.5-flash.

Sources: services/geminiService.ts:9-88

Data Schema for Call Analysis

To ensure structured data is returned from the AI, the analyzeEmergencyCallWithGemini function defines a strict JSON schema. The AI is prompted to populate this schema based on the call transcript.

The expected data structure is defined by the AiAnalysisResult type:

// From types.ts
export interface AiAnalysisResult {
  incidentType: string | null;
  location: string | null;
  severity: 'Critical' | 'Urgent' | 'Non-Urgent' | null;
  recommendedAction: string | null;
  extractedData: {
    name: string;
    age: string;
    condition: string;
  }
}

Sources: types.ts:11-21, services/geminiService.ts:11-30

Core Features

AI in Action: Emergency Dispatch Simulation

This feature, implemented in the AiDemo.tsx component, simulates an emergency call and demonstrates how AI can analyze the conversation in real-time to provide critical information to a dispatcher.

The simulation flow is as follows:

1. The user clicks "Start Simulation".
2. A hardcoded transcript is displayed message by message.
3. When a message from the "Caller" is added, the runAnalysis function is triggered.
4. runAnalysis calls the analyzeEmergencyCallWithGemini service with the current transcript.
5. The UI's "AI Analysis Dashboard" is updated with the structured data returned by the Gemini API, such as incident severity, location, and recommended action.

Sources: components/AiDemo.tsx:59-86

This diagram shows the workflow for the emergency dispatch simulation.

EMS AI Assistant Chatbot

The Chatbot.tsx component provides a floating AI assistant that can answer user questions. It supports text and audio input.

Features:

• Text & Voice Input: Users can type messages or use their microphone to speak. Voice input is transcribed to text using a live connection to the gemini-2.5-flash-native-audio-preview-09-2025 model.
• Streaming Responses: The chatbot displays the AI's response word-by-word as it is generated.
• Configurable Tools: The user can toggle settings to enable:
  • Thinking Mode: Uses the more powerful gemini-2.5-pro model.
  • Search: Allows the model to use Google Search to answer questions.
  • Maps: Allows the model to use Google Maps.

Sources: components/Chatbot.tsx:32-35, 80-84, 107-124, 218-220

The sequence diagram below illustrates how the chatbot handles a user's text message.

Setup and Deployment

Local Development

To run the application locally, follow these steps:

1. Install dependencies:

   npm install
   

2. Configure API Key: Create a .env.local file in the root directory and add your Gemini API key:

   GEMINI_API_KEY=your_api_key_here
   

3. Run the app:

   npm run dev
   

The application will be available at http://localhost:3000.

Sources: README.md:11-18, vite.config.ts:6-15

The Vite configuration file (vite.config.ts) is responsible for making the GEMINI_API_KEY environment variable available to the application code under process.env.GEMINI_API_KEY.
Sources: vite.config.ts:13-14