MoonshotAI/kimi-code Apps Directory Structure: A Technical Guide to the Three Applications

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), 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), 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).

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), 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), 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).

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) 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), 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), 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) 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) 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) 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:

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:

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:

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/apps/vscode/webview-ui/src/services/bridge.ts) and [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) 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}