# How Vite+ Integrates with VS Code Agents for AI-Assisted Development

> Discover how Vite+ seamlessly integrates AI agents like Copilot and Claude into VS Code for enhanced development. Simplify your workflow with auto-configuration.

- Repository: [VoidZero/vite-plus](https://github.com/voidzero-dev/vite-plus)
- Tags: how-to-guide
- Published: 2026-03-16

---

**Vite+ provides a single-command workflow that auto-configures VS Code and wires AI agents like GitHub Copilot, Claude Code, or Cursor via MCP (Model Context Protocol) configuration files.**

The `voidzero-dev/vite-plus` repository streamlines AI-assisted development by shipping a dedicated VS Code Extension Pack and CLI utilities that generate editor-specific configurations. This **Vite+ VS Code agents integration** eliminates manual setup by automatically linking your chosen AI assistant to the local Vite+ MCP server through standardized configuration files.

## The Three-Layer Integration Architecture

Vite+ implements its editor integration through three coordinated layers that handle extension distribution, settings generation, and AI agent communication.

### Extension Pack Distribution

Vite+ distributes a ready-made VS Code Extension Pack (`VoidZero.vite-plus-extension-pack`) that recommends essential tooling including formatters, test runners, and AI-assistant extensions. This bundle ensures that all team members receive consistent editor capabilities when opening the project. The extension pack is documented in the [IDE integration guide](https://github.com/voidzero-dev/vite-plus/blob/main/docs/guide/ide-integration.md) and referenced within generated [`.vscode/extensions.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/extensions.json) files.

### Editor Configuration Generation

The CLI utilities `vp create` and `vp migrate` invoke `writeEditorConfigs` from [`packages/cli/src/utils/editor.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/editor.ts) (lines 10-34) to generate [`.vscode/settings.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/settings.json) and [`.vscode/extensions.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/extensions.json). These files enforce the **Oxc formatter** as the default formatter, enable format-on-save, and configure code actions to run automatically when saving files. This ensures that VS Code respects the same formatting rules that Vite+ applies during builds.

### MCP Wiring for AI Agents

When you select a VS Code-compatible agent such as **GitHub Copilot**, Vite+ writes a specialized MCP configuration to [`.vscode/mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/mcp.json). The function `writeAgentInstructions` in [`packages/cli/src/utils/agent.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/agent.ts) manages this process, injecting the required `type: "stdio"` field (as seen in lines 78-85 for the Copilot entry) that tells VS Code how to launch the agent over standard input/output streams. This configuration enables the AI assistant to communicate directly with the **Vite+ MCP server** launched via `vp mcp`.

## How the Integration Works

The CLI entry points in [`packages/cli/src/create/bin.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/create/bin.ts) and [`packages/cli/src/migration/bin.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/migration/bin.ts) orchestrate the setup process when you pass flags like `--editor vscode` and `--agent copilot`.

1. **Editor Resolution**: The CLI identifies the target editor ID (`vscode`) through the editor utility.
2. **Config Generation**: `writeEditorConfigs` creates [`.vscode/extensions.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/extensions.json) with the extension-pack recommendation and [`.vscode/settings.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/settings.json) containing Oxc-specific formatting rules.
3. **Agent Registration**: If an AI agent is specified, `writeAgentInstructions` generates the agent's instruction file and adds the MCP server entry to [`.vscode/mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/mcp.json) with the `type: "stdio"` configuration.
4. **Runtime Activation**: When VS Code starts, the Extension Pack activates recommended extensions, the settings enforce consistent formatting, and the MCP config makes the AI assistant available for inline completions and chat features.

## Setting Up VS Code Agents in Vite+

You can configure AI agent support during project initialization or add it to existing codebases using Vite+ CLI commands.

### Scaffold a New Project with Agent Support

Run the following command to initialize a monorepo with VS Code and GitHub Copilot pre-configured:

```bash
vp create --editor vscode --agent copilot

```

This command generates the following configuration files:

```jsonc
// .vscode/extensions.json
{
  "recommendations": [
    "VoidZero.vite-plus-extension-pack"
  ]
}

```

```jsonc
/* .vscode/settings.json */
{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "oxc.fmt.configPath": "./vite.config.ts",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "explicit"
  }
}

```

```jsonc
/* .vscode/mcp.json – created for the Copilot agent */
{
  "servers": [
    {
      "name": "copilot",
      "type": "stdio"          // <- injected by agent.ts for VS Code agents
    }
  ]
}

```

### Add Agents to Existing Projects

For existing Vite+ projects, use the `vp config` command to integrate additional AI agents without overwriting your current setup:

```bash
vp config --agent claude --editor vscode

```

This re-runs the `writeEditorConfigs` and `writeAgentInstructions` utilities from [`packages/cli/src/utils/editor.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/editor.ts) and [`packages/cli/src/utils/agent.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/agent.ts), merging the new agent instructions into [`AGENTS.md`](https://github.com/voidzero-dev/vite-plus/blob/main/AGENTS.md) while preserving existing VS Code settings.

## Summary

- Vite+ provides a **VS Code Extension Pack** (`VoidZero.vite-plus-extension-pack`) that recommends essential development and AI extensions.
- The CLI commands `vp create` and `vp migrate` generate [`.vscode/settings.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/settings.json) and [`.vscode/extensions.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/extensions.json) through `writeEditorConfigs` in [`packages/cli/src/utils/editor.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/editor.ts).
- AI agent integration uses **MCP (Model Context Protocol)** configuration stored in [`.vscode/mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/mcp.json), managed by `writeAgentInstructions` in [`packages/cli/src/utils/agent.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/agent.ts).
- VS Code agents require the `type: "stdio"` field in their MCP configuration to communicate with the local Vite+ server.
- The entire workflow is triggered by single CLI commands with `--editor` and `--agent` flags, ensuring consistent editor configuration across team members.

## Frequently Asked Questions

### What AI agents are supported by Vite+?

Vite+ supports VS Code-compatible agents including **GitHub Copilot**, **Claude Code**, and **Cursor**. The supported agents are registered in [`packages/cli/src/utils/agent.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/agent.ts), where each entry defines specific configuration parameters such as the `type: "stdio"` field required for VS Code integration.

### How does the MCP configuration enable AI features in VS Code?

The MCP (Model Context Protocol) configuration in [`.vscode/mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/mcp.json) tells VS Code how to launch and communicate with the AI agent. When `writeAgentInstructions` generates this file, it specifies `type: "stdio"` for VS Code agents, which establishes a standard input/output channel between the editor and the Vite+ MCP server launched by `vp mcp`. This allows the AI assistant to request project context and receive completions directly within the editor interface.

### Can I use multiple AI agents simultaneously in a Vite+ project?

Yes, you can configure multiple agents by running `vp config` with different agent flags for the same project. The `writeAgentInstructions` function merges new agent configurations into the existing [`.vscode/mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/.vscode/mcp.json) structure and updates the [`AGENTS.md`](https://github.com/voidzero-dev/vite-plus/blob/main/AGENTS.md) file with instructions for each additional assistant, allowing you to switch between or combine AI tools like Copilot and Claude Code.

### Where are the VS Code configuration files generated?

Vite+ generates three primary files in the `.vscode/` directory: [`extensions.json`](https://github.com/voidzero-dev/vite-plus/blob/main/extensions.json) (recommending the VoidZero extension pack), [`settings.json`](https://github.com/voidzero-dev/vite-plus/blob/main/settings.json) (containing Oxc formatter configuration and format-on-save rules), and [`mcp.json`](https://github.com/voidzero-dev/vite-plus/blob/main/mcp.json) (defining AI agent connections). These files are created by the utilities in [`packages/cli/src/utils/editor.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/editor.ts) and [`packages/cli/src/utils/agent.ts`](https://github.com/voidzero-dev/vite-plus/blob/main/packages/cli/src/utils/agent.ts) when you run `vp create`, `vp migrate`, or `vp config` with the `--editor vscode` flag.