# MoonshotAI/kimi-code Apps Directory Structure: A Technical Guide to the Three Applications > Explore the MoonshotAI/kimi-code apps directory structure. Understand the independent Vite configs, entry points, and build pipelines for kimi-web, vscode, and vis applications. - Repository: [Moonshot AI/kimi-code](https://github.com/MoonshotAI/kimi-code) - Tags: technical-guide - Published: 2026-07-29 --- **The `apps` directory in MoonshotAI/kimi-code houses three isolated applications—**kimi-web** (Vue 3 browser UI), **vscode** (React-based VS Code extension), and **vis** (React visual debugger)—each with independent Vite configurations, entry points, and build pipelines.** The MoonshotAI/kimi-code repository implements a modular front-end architecture under its `apps` directory, organizing distinct user interfaces into separate projects that share a unified `pnpm` workspace. This structure enables independent development and deployment of Kimi’s browser interface, IDE extension, and debugging tools while maintaining consistent build tooling across the ecosystem. ## The Three Applications in `apps` ### kimi-web – Browser Interface The `kimi-web` application serves as the primary browser-based UI for interacting with Kimi agents. Built with Vue 3 and Vite, the application initializes through [[`apps/kimi-web/src/main.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/main.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/main.ts), which bootstraps the global component tree and routing logic. Core utilities for workspace management reside in [[`apps/kimi-web/src/lib/workspacePicker.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/lib/workspacePicker.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/lib/workspacePicker.ts), while tool output comparisons are handled by [[`apps/kimi-web/src/lib/toolDiff.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/lib/toolDiff.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/lib/toolDiff.ts). ### vscode – VS Code Extension The `vscode` package embeds Kimi’s UI directly inside VS Code as a Webview extension. The React entry point is located at [[`apps/vscode/webview-ui/src/main.tsx`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/main.tsx)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/main.tsx), rendering the interface within the editor’s webview panel. Communication between the UI and the extension host flows through [[`apps/vscode/webview-ui/src/services/bridge.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/services/bridge.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/services/bridge.ts), with application state centralized in [[`apps/vscode/webview-ui/src/stores/chat.store.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/stores/chat.store.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/stores/chat.store.ts). ### vis – Visual Debugging Suite The `vis` application provides a dedicated interface for debugging sessions, agent transcripts, and replay data. The React root component at [[`apps/vis/web/src/main.tsx`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/main.tsx)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/main.tsx) sets up the routing layer for pages such as [[`apps/vis/web/src/pages/SessionListPage.tsx`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/pages/SessionListPage.tsx)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/pages/SessionListPage.tsx), which renders active session listings, and [[`apps/vis/web/src/pages/SubagentDetailPage.tsx`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/pages/SubagentDetailPage.tsx)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/src/pages/SubagentDetailPage.tsx), which displays granular subagent execution details. ## Key Source Files and Architecture Each application maintains its own build configuration and dependency scope, demonstrating the repository’s commitment to isolation. The Vite configuration files define distinct plugin chains and output targets specific to each runtime environment. - **kimi-web** configuration: [[`apps/kimi-web/vite.config.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/vite.config.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/vite.config.ts) handles asset optimization for the browser. - **vscode** configuration: [[`apps/vscode/webview-ui/vite.config.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/vite.config.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/vite.config.ts) bundles the Webview UI into the extension package. - **vis** configuration: [[`apps/vis/web/vite.config.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/vite.config.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vis/web/vite.config.ts) configures the development server for the debugging interface. Despite their isolation, all three apps leverage TypeScript and share linting rules from the root workspace, ensuring type safety and code consistency across the MoonshotAI/kimi-code codebase. ## Development Workflow and Commands Each application can be built and run independently using `pnpm` scripts defined in the workspace root. Launch the browser UI and backend server simultaneously: ```bash pnpm install pnpm dev ``` This command starts the kap-server on `http://127.0.0.1:58627` and the kimi-web development server on `http://localhost:5173`. Launch only the VS Code extension in development mode: ```bash pnpm dev:vscode ``` This builds the Webview bundle and opens a new VS Code window with the Kimi extension pre-loaded. Launch the visual debugger separately: ```bash pnpm dev:vis ``` This starts the debugging interface on `http://localhost:5174`, allowing inspection of session data without running the full browser UI. ## Summary - The `apps` directory isolates three distinct front-ends: **kimi-web** (Vue 3 browser app), **vscode** (React Webview extension), and **vis** (React debugging tool). - Each application owns its **Vite configuration**, **entry point**, and **state management**, preventing build-time coupling. - Development commands (`pnpm dev`, `pnpm dev:vscode`, `pnpm dev:vis`) enable targeted iteration on specific interfaces. - Source files such as [[`bridge.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/bridge.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/services/bridge.ts) and [[`toolDiff.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/toolDiff.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/kimi-web/src/lib/toolDiff.ts) demonstrate specialized logic for IDE integration and UI utilities. ## Frequently Asked Questions ### What is the difference between kimi-web and the vscode extension? **kimi-web** runs as a standalone browser application accessed via `localhost:5173`, while the **vscode** extension embeds a React-based Webview inside VS Code’s editor panels. The extension reuses much of the UI logic but communicates with the Kimi backend through a message bridge in [[`apps/vscode/webview-ui/src/services/bridge.ts`](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/services/bridge.ts)](https://github.com/MoonshotAI/kimi-code/blob/main/apps/vscode/webview-ui/src/services/bridge.ts) rather than direct HTTP calls. ### How do I run only the visual debugger without the other apps? Execute `pnpm dev:vis` from the repository root. This command targets only the `apps/vis` workspace, starting the debugging interface on port 5174 without initializing the kimi-web server or VS Code extension, allowing lightweight inspection of session and agent data. ### Why does each app have its own vite.config.ts? Independent Vite configurations allow each interface to optimize for its specific runtime environment—the browser, VS Code’s Webview container, or the visual debugger’s standalone server. This separation prevents plugin conflicts and enables custom build pipelines, such as bundling the VS Code extension into a `.vsix` artifact while serving kimi-web as static assets. ### Which frameworks power each application? According to the source structure, **kimi-web** utilizes Vue 3 with TypeScript, while both the **vscode** extension and **vis** debugger use React with TypeScript. All three rely on Vite for builds and share the root workspace’s TypeScript configuration for consistent type checking across the MoonshotAI/kimi-code repository.