Build MCP servers from VS Code.

New Server Wizard

Guided setup with three templates: basic, with-ui, and full — generates TypeScript, MCP SDK, and project structure.

Schema Validation

Real-time validation of mcp.json and mcp-tools.json on save, with IntelliSense and JSON Schema support.

Test Harness

Auto-generated tests from tool definitions. Run against your MCP tools with formatted pass/fail output.

Type Generation

Generate TypeScript types directly from tool definitions — no manual interface writing.

Dashboard

Visual webview interface with workspace integration. Detects MCP projects automatically.

MCP Apps UI

Build interactive UI components (tables, charts, forms, cards) that render directly in AI conversations.

Install & create

# Install from VS Code Marketplace
# Then create a new server:
Cmd+Shift+P → "MCP: New Server"

# Choose a template:
#   basic   — Simple hello world
#   with-ui — Tables and charts
#   full    — Tools, resources, prompts

UI components

import { table, chart } from
  '@mcp-app-builder/ui-components';

const results = table(
  [
    { key: 'name', header: 'Name',
      sortable: true },
    { key: 'status', header: 'Status' },
  ],
  data,
  { pageSize: 10 }
);

File structure

my-mcp-server/
├── mcp.json          # Server config
├── mcp-tools.json    # Tool definitions
├── package.json      # Dependencies
├── tsconfig.json     # TypeScript config
└── src/
    ├── index.ts      # Entry point
    ├── resources.ts  # Resource handlers
    └── prompts.ts    # Prompt handlers

Keyboard shortcuts

# Create new server
Ctrl+Alt+N  (Cmd+Alt+N on Mac)

# Validate schema
Ctrl+Alt+V  (Cmd+Alt+V on Mac)