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

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 and referenced within generated .vscode/extensions.json files.

Editor Configuration Generation

The CLI utilities vp create and vp migrate invoke writeEditorConfigs from packages/cli/src/utils/editor.ts (lines 10-34) to generate .vscode/settings.json and .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. The function writeAgentInstructions in 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 and 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 with the extension-pack recommendation and .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 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:

vp create --editor vscode --agent copilot

This command generates the following configuration files:

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

/* .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"
  }
}

/* .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:

vp config --agent claude --editor vscode

This re-runs the writeEditorConfigs and writeAgentInstructions utilities from packages/cli/src/utils/editor.ts and packages/cli/src/utils/agent.ts, merging the new agent instructions into 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 and .vscode/extensions.json through writeEditorConfigs in packages/cli/src/utils/editor.ts.
• AI agent integration uses MCP (Model Context Protocol) configuration stored in .vscode/mcp.json, managed by writeAgentInstructions in 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, 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 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 structure and updates the 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 (recommending the VoidZero extension pack), settings.json (containing Oxc formatter configuration and format-on-save rules), and mcp.json (defining AI agent connections). These files are created by the utilities in packages/cli/src/utils/editor.ts and packages/cli/src/utils/agent.ts when you run vp create, vp migrate, or vp config with the --editor vscode flag.

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