Technology Stack

Relevant source files

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

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

The AI-for-Thai-EMS project is a modern web application designed to showcase the application of AI in emergency medical services. The technology stack is centered around a lightweight frontend built with React and TypeScript, which communicates directly with Google's Gemini AI services. The build process is managed by Vite, ensuring a fast development experience.

The architecture prioritizes rapid development and demonstration, leveraging Content Delivery Networks (CDNs) for core libraries like React and Google GenAI, and a serverless approach where the client directly interacts with the AI API. This setup is characteristic of a proof-of-concept or a demonstration application.

Overall Architecture

The application follows a client-side rendering architecture where the browser is responsible for fetching data from the Google Gemini API and rendering the UI.

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

Frontend

The frontend is built using React and TypeScript, with styling provided by Tailwind CSS.

Core Libraries & Frameworks

The project uses React for building the user interface. Instead of being bundled locally, React, ReactDOM, and the Google GenAI library are loaded directly from a CDN via an importmap in the main HTML file. This approach simplifies the build configuration.

<!-- index.html:24-33 -->
<script type="importmap">
{
  "imports": {
    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.28.0",
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
  }
}
</script>

Sources: index.html:24-33, package.json:13-15

TypeScript is used for static typing, enhancing code quality and developer experience. The configuration in tsconfig.json is set up for a modern web project, targeting ES2022 and using react-jsx for JSX transformation.

Sources: tsconfig.json, package.json:19-20

Styling

Styling is handled by Tailwind CSS, which is included via a CDN script in index.html. Custom theme extensions, such as fonts (Sarabun) and brand colors (niem-blue, brand-primary), are configured directly within a <script> tag in the HTML head.

// index.html:9-22
tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Sarabun', 'sans-serif'],
      },
      colors: {
        'niem-blue': '#0D47A1',
        'niem-yellow': '#FFC107',
        'brand-primary': '#005A9C',
        'brand-secondary': '#FFC72C',
      },
    },
  },
}

Sources: index.html:6-23

Build System & Development Environment

The project uses Vite as its build tool and development server, configured in vite.config.ts.

Vite Configuration

The Vite configuration specifies the development server settings and defines how environment variables are handled.

Option	Value	Description
server.port	3000	Sets the development server port.
server.host	'0.0.0.0'	Allows access from any network interface.
plugins	[react()]	Enables React support with Fast Refresh.
define	...	Injects the GEMINI_API_KEY from environment variables into the client-side code as process.env.API_KEY.
resolve.alias	{'@': ...}	Creates a path alias @ pointing to the project root.

Sources: vite.config.ts:5-21

The define configuration is crucial for making the Gemini API key available to the geminiService.ts module in the browser.

// vite.config.ts:13-16
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:13-16

Package Management

Node Package Manager (npm) is used to manage project dependencies, which are defined in package.json.

Type	Package	Version	Description
Dependency	@google/genai	^1.28.0	Client library for Google Gemini AI.
Dependency	react	^19.2.0	JavaScript library for building user interfaces.
Dependency	react-dom	^19.2.0	Serves as the entry point to the DOM and server renderers for React.
Dev Dependency	@vitejs/plugin-react	^5.0.0	Vite plugin for React.
Dev Dependency	typescript	~5.8.2	Superset of JavaScript that adds static types.
Dev Dependency	vite	^6.2.0	Next-generation frontend tooling.

Sources: package.json:12-21

AI Service Integration

The core AI functionality is powered by the Google Gemini API, accessed through the @google/genai library. The services/geminiService.ts file encapsulates all interactions with the Gemini API.

Gemini Service Functions

Two main functions handle communication with the Gemini API:

1. analyzeEmergencyCallWithGemini(transcript: string): This function sends a transcript to the gemini-2.5-flash model and requests a structured JSON response. It defines a strict schema for the expected output, ensuring the AI's response can be reliably parsed into the AiAnalysisResult type.
2. sendMessageToChatStream(...): This function manages the interactive chatbot. It selects a Gemini model (gemini-2.5-pro or gemini-2.5-flash) based on a "Thinking Mode" flag and can enable tools like Google Search and Google Maps. It returns a stream for real-time responses.

Sources: services/geminiService.ts:8-93

AI Analysis Flow

The following sequence diagram shows the process of analyzing an emergency call transcript in the AiDemo component.

This diagram illustrates the flow from user interaction to the AI analysis and back to the UI.
Sources: components/AiDemo.tsx:50-62, services/geminiService.ts:8-51

Chatbot Audio Transcription

The chatbot feature includes real-time audio transcription. When the user starts recording, the browser's MediaRecorder API captures audio. Upon stopping, the audio data is sent to a gemini-2.5-flash-native-audio-preview-09-2025 model via a live connection, which transcribes the speech to text in real-time.

Sources: components/Chatbot.tsx:118-175