Deploying to Google AI Studio

Relevant source files

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

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

This document outlines the architecture, configuration, and deployment process for the "AI for Thai EMS" application, focusing on running it both locally and within the Google AI Studio environment. The application is a web-based showcase for a framework applying AI to enhance Emergency Medical Service (EMS) processes in Thailand.

The project is a client-side application built with React and Vite. It interacts directly with the Google Gemini API from the user's browser. There are two primary ways to run the application: locally for development and directly within Google AI Studio, which provides a hosted environment.

Sources: README.md, metadata.json

Architecture Overview

The application is a single-page application (SPA) that runs entirely in the browser. Its core functionality relies on making calls to the Google Gemini API to perform tasks like analyzing emergency call transcripts and powering a conversational chatbot.

The following diagram illustrates the high-level data flow:

This diagram shows that the user interacts with the React components, which use the geminiService to communicate with the external Google Gemini API.

Sources: components/AiDemo.tsx:60-65, services/geminiService.ts, components/Chatbot.tsx:87-90

Configuration

Proper configuration is essential for the application to connect to the Google Gemini API. This is managed through environment variables and build tool settings.

API Key

The application requires a Google Gemini API key to function.

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

   GEMINI_API_KEY="YOUR_API_KEY_HERE"
   

Sources: README.md:13-14

This environment variable is then processed by Vite during development. The vite.config.ts file is configured to load variables and make the GEMINI_API_KEY available within the application code under process.env.API_KEY.

// 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:6-14

The geminiService.ts module then uses this key to initialize the @google/genai client.

// services/geminiService.ts
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });

Sources: services/geminiService.ts:4

AI Studio Metadata

When deployed or viewed in Google AI Studio, the metadata.json file provides essential information about the application. This includes the app's name, a description, and permissions it requires to function correctly within the AI Studio frame.

Property	Description
name	The display name of the application: "AI for Thai EMS".
description	A summary of the project's purpose.
requestFramePermissions	An array of permissions the app requests from the AI Studio environment. In this case, it requests microphone access for the audio transcription feature in the chatbot.

Sources: metadata.json, components/Chatbot.tsx:112-153

Dependencies

The project relies on several key libraries, which are handled differently depending on the execution environment.

NPM Dependencies

For local development, dependencies are managed through npm and defined in package.json.

Package	Version	Description
@google/genai	^1.28.0	The official Google AI SDK for interacting with Gemini.
react	^19.2.0	A JavaScript library for building user interfaces.
react-dom	^19.2.0	Serves as the entry point to the DOM for React.
vite	^6.2.0	The build tool and development server.
@vitejs/plugin-react	^5.0.0	Vite plugin for React support.
typescript	~5.8.2	A typed superset of JavaScript.

Sources: package.json:9-17

AI Studio CDN Dependencies

When running in Google AI Studio, the application does not use the node_modules folder. Instead, it loads its primary dependencies from the AI Studio CDN via an importmap defined in index.html. This allows the browser to resolve bare module specifiers like "react" to full CDN URLs.

<!-- index.html -->
<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>

This configuration is a key part of what makes the project compatible with the AI Studio environment without requiring a separate build step for that platform.

Sources: index.html:19-29

Execution and Deployment

The application can be run in two distinct environments.

Local Development

To run the application on a local machine for development or testing, follow these steps:

1. Ensure Node.js is installed.
2. Install dependencies using npm install.
3. Configure the GEMINI_API_KEY in .env.local.
4. Start the development server with npm run dev.

The application will then be accessible, typically at http://localhost:3000.

The following diagram shows the local execution flow:

Google AI Studio

The application is also designed to be viewed directly within Google AI Studio. The platform handles the hosting and serving of the static files (index.html, .tsx files, etc.).

• View Link: The application can be accessed in AI Studio via the link: https://ai.studio/apps/drive/1o3q_hCN3PFul0_za4Sn9F_vitxWP35tV

In this environment, the importmap in index.html ensures that dependencies are fetched from the AI Studio CDN, and the application runs inside an iframe that can be granted permissions (like microphone access) as defined in metadata.json. The GEMINI_API_KEY must still be configured within the AI Studio environment settings for the API calls to succeed.

Sources: README.md:8, index.html:19-29, metadata.json:5-7

Summary

The "AI for Thai EMS" application is a versatile React-based project that demonstrates the power of the Gemini API. Its deployment strategy is twofold: a standard Vite-based local development setup for developers and a streamlined, configuration-driven approach for running directly within Google AI Studio. The use of importmap for CDN-based dependencies and a metadata.json file for environment integration are key architectural choices that enable seamless execution in the AI Studio platform.