/ppakpoomm/AI-for-Thai-EMS

Wiki directory

Browse AI-generated documentation for any repository.

Configuration Files

Relevant source files

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

The configuration files in the AI-for-Thai-EMS project establish the foundation for the development environment, build process, and application metadata. They manage everything from TypeScript compilation rules and server settings to project dependencies and browser permissions. The project utilizes Vite for the build tooling, TypeScript for type safety, and manages dependencies through both npm and a CDN-based importmap.

These files collectively ensure a consistent and efficient workflow for developers. The Vite configuration (vite.config.ts) handles the development server and environment variables, while tsconfig.json enforces coding standards and enables modern JavaScript features. Project dependencies and scripts are defined in package.json, and the application's entry point and core browser setup, including unique inline configurations, are located in index.html.

Vite Configuration (`vite.config.ts`)

This file configures the Vite build tool, which is responsible for the development server, the build process, and how environment variables are handled.

Sources: vite.config.ts

Server Configuration

The development server is configured to run on port 3000 and be accessible on the local network (host: '0.0.0.0').

Option	Value	Description
`port`	`3000`	Specifies the port for the development server.
`host`	`'0.0.0.0'`	Makes the server accessible from other devices on the same network.

Sources: vite.config.ts:8-11

Plugins

The project uses the official React plugin for Vite, which enables features like Fast Refresh.

@vitejs/plugin-react: Provides React-specific integrations for the Vite build process.

Sources: vite.config.ts:4, vite.config.ts:12

Environment Variables

The configuration uses Vite's loadEnv function to load environment variables from a .env file. The GEMINI_API_KEY is then made available to the client-side code through the define property, which replaces process.env.GEMINI_API_KEY at build time.

The following diagram illustrates the flow of the API key from the environment file to the application code.

Generating architecture diagram...

Sources: vite.config.ts:6, vite.config.ts:13-16

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

Path Aliases

A path alias @{ is configured to resolve to the project's root directory (.), allowing for cleaner import statements.

// vite.config.ts
resolve: {
  alias: {
    '@': path.resolve(__dirname, '.'),
  }
}

Sources: vite.config.ts:17-21

TypeScript Configuration (`tsconfig.json`)

This file specifies the root files and the compiler options required to compile the TypeScript project. It ensures type safety and configures how TypeScript transpiles code into JavaScript.

Sources: tsconfig.json

Key Compiler Options

The configuration is set up for a modern web application using React.

Option	Value	Description
`target`	`"ES2022"`	Transpiles code to the ECMAScript 2022 standard.
`module`	`"ESNext"`	Uses the latest ECMAScript module syntax.
`lib`	`["ES2022", "DOM", "DOM.Iterable"]`	Includes type definitions for ES2022 and browser DOM APIs.
`jsx`	`"react-jsx"`	Configures the new JSX transform for React.
`moduleResolution`	`"bundler"`	Mimics the module resolution strategy of modern bundlers like Vite.
`paths`	`{"@/": ["./"]}`	Defines a path alias for imports, matching the Vite config.
`noEmit`	`true`	Prevents the TypeScript compiler from outputting files; Vite handles the transpilation.

Sources: tsconfig.json:2-23

The paths alias allows for simplified imports within the application, as shown below.

// tsconfig.json
"paths": {
  "@/*": [
    "./*"
  ]
},

Sources: tsconfig.json:18-22

Project Dependencies (`package.json`)

This file contains metadata about the project and manages its dependencies and scripts.

Sources: package.json

Scripts

The scripts section defines commands for running common development tasks.

Command	Description
`npm run dev`	Starts the Vite development server.
`npm run build`	Builds the application for production.
`npm run preview`	Serves the production build locally for previewing.

Sources: package.json:6-10

Dependencies

These packages are required for the application to run in production.

Package	Version	Description
`@google/genai`	`^1.28.0`	Google GenAI client library for interacting with the Gemini API.
`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.

Sources: package.json:11-15

Development Dependencies

These packages are only needed during the development and build process.

Package	Version	Description
`@types/node`	`^22.14.0`	TypeScript type definitions for Node.js.
`@vitejs/plugin-react`	`^5.0.0`	The official Vite plugin for React projects.
`typescript`	`~5.8.2`	The TypeScript language compiler.
`vite`	`^6.2.0`	The build tool and development server.

Sources: package.json:16-21

Application Entrypoint (`index.html`)

This file is the main HTML page that serves as the entry point for the single-page application. It includes several unique configurations for loading dependencies and styles.

Sources: index.html

Import Map

Instead of bundling all dependencies, the project uses an importmap to load React, React DOM, and the Google GenAI library directly from a CDN (aistudiocdn.com). This allows the browser to handle module resolution for these key libraries.

This diagram shows how the application loads its main dependencies.

Generating architecture diagram...

Sources: index.html:26-35

The importmap configuration is as follows:

<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:26-35

Inline Tailwind CSS Configuration

The project uses Tailwind CSS via a CDN script and configures it directly within a <script> tag in index.html. This setup extends the default theme with custom fonts (Sarabun) and brand colors.

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

Sources: index.html:10-25

Application Metadata (`metadata.json`)

This file provides metadata about the application, likely for use within the Google AI Studio environment. It defines the application's name, a brief description, and specifies required browser permissions.

Key	Value	Description
`name`	`"AI for Thai EMS"`	The display name of the application.
`description`	`"A web application showcasing..."`	A summary of the project's purpose.
`requestFramePermissions`	`["microphone"]`	Declares that the application requires access to the user's microphone.

This microphone permission is essential for the chatbot's voice-to-text feature.

Sources: metadata.json

Configuration Files

Relevant source files

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

Vite Configuration (`vite.config.ts`)

This file configures the Vite build tool, which is responsible for the development server, the build process, and how environment variables are handled.

Sources: vite.config.ts

Server Configuration

The development server is configured to run on port 3000 and be accessible on the local network (host: '0.0.0.0').

Option	Value	Description
`port`	`3000`	Specifies the port for the development server.
`host`	`'0.0.0.0'`	Makes the server accessible from other devices on the same network.

Sources: vite.config.ts:8-11

Plugins

The project uses the official React plugin for Vite, which enables features like Fast Refresh.

@vitejs/plugin-react: Provides React-specific integrations for the Vite build process.

Sources: vite.config.ts:4, vite.config.ts:12

Environment Variables

The following diagram illustrates the flow of the API key from the environment file to the application code.

Generating architecture diagram...

Sources: vite.config.ts:6, vite.config.ts:13-16

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

Path Aliases

A path alias @{ is configured to resolve to the project's root directory (.), allowing for cleaner import statements.

// vite.config.ts
resolve: {
  alias: {
    '@': path.resolve(__dirname, '.'),
  }
}

Sources: vite.config.ts:17-21

TypeScript Configuration (`tsconfig.json`)

This file specifies the root files and the compiler options required to compile the TypeScript project. It ensures type safety and configures how TypeScript transpiles code into JavaScript.

Sources: tsconfig.json

Key Compiler Options

The configuration is set up for a modern web application using React.

Option	Value	Description
`target`	`"ES2022"`	Transpiles code to the ECMAScript 2022 standard.
`module`	`"ESNext"`	Uses the latest ECMAScript module syntax.
`lib`	`["ES2022", "DOM", "DOM.Iterable"]`	Includes type definitions for ES2022 and browser DOM APIs.
`jsx`	`"react-jsx"`	Configures the new JSX transform for React.
`moduleResolution`	`"bundler"`	Mimics the module resolution strategy of modern bundlers like Vite.
`paths`	`{"@/": ["./"]}`	Defines a path alias for imports, matching the Vite config.
`noEmit`	`true`	Prevents the TypeScript compiler from outputting files; Vite handles the transpilation.

Sources: tsconfig.json:2-23

The paths alias allows for simplified imports within the application, as shown below.

// tsconfig.json
"paths": {
  "@/*": [
    "./*"
  ]
},

Sources: tsconfig.json:18-22

Project Dependencies (`package.json`)

This file contains metadata about the project and manages its dependencies and scripts.

Sources: package.json

Scripts

The scripts section defines commands for running common development tasks.

Command	Description
`npm run dev`	Starts the Vite development server.
`npm run build`	Builds the application for production.
`npm run preview`	Serves the production build locally for previewing.

Sources: package.json:6-10

Dependencies

These packages are required for the application to run in production.

Package	Version	Description
`@google/genai`	`^1.28.0`	Google GenAI client library for interacting with the Gemini API.
`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.

Sources: package.json:11-15

Development Dependencies

These packages are only needed during the development and build process.

Package	Version	Description
`@types/node`	`^22.14.0`	TypeScript type definitions for Node.js.
`@vitejs/plugin-react`	`^5.0.0`	The official Vite plugin for React projects.
`typescript`	`~5.8.2`	The TypeScript language compiler.
`vite`	`^6.2.0`	The build tool and development server.

Sources: package.json:16-21

Application Entrypoint (`index.html`)

This file is the main HTML page that serves as the entry point for the single-page application. It includes several unique configurations for loading dependencies and styles.

Sources: index.html

Import Map

This diagram shows how the application loads its main dependencies.

Generating architecture diagram...

Sources: index.html:26-35

The importmap configuration is as follows:

<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:26-35

Inline Tailwind CSS Configuration

The project uses Tailwind CSS via a CDN script and configures it directly within a <script> tag in index.html. This setup extends the default theme with custom fonts (Sarabun) and brand colors.

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

Sources: index.html:10-25

Application Metadata (`metadata.json`)

Key	Value	Description
`name`	`"AI for Thai EMS"`	The display name of the application.
`description`	`"A web application showcasing..."`	A summary of the project's purpose.
`requestFramePermissions`	`["microphone"]`	Declares that the application requires access to the user's microphone.

This microphone permission is essential for the chatbot's voice-to-text feature.

Sources: metadata.json

Configuration Files

Vite Configuration (vite.config.ts)

Server Configuration

Plugins

Environment Variables

Path Aliases

TypeScript Configuration (tsconfig.json)

Key Compiler Options

Project Dependencies (package.json)

Scripts

Dependencies

Development Dependencies

Application Entrypoint (index.html)

Import Map

Inline Tailwind CSS Configuration

Application Metadata (metadata.json)

Configuration Files

Vite Configuration (vite.config.ts)

Server Configuration

Plugins

Environment Variables

Path Aliases

TypeScript Configuration (tsconfig.json)

Key Compiler Options

Project Dependencies (package.json)

Scripts

Dependencies

Development Dependencies

Application Entrypoint (index.html)

Import Map

Inline Tailwind CSS Configuration

Application Metadata (metadata.json)

Vite Configuration (`vite.config.ts`)

TypeScript Configuration (`tsconfig.json`)

Project Dependencies (`package.json`)

Application Entrypoint (`index.html`)

Application Metadata (`metadata.json`)

Vite Configuration (`vite.config.ts`)

TypeScript Configuration (`tsconfig.json`)

Project Dependencies (`package.json`)

Application Entrypoint (`index.html`)

Application Metadata (`metadata.json`)