🚀 MCP Frontend Starter

A comprehensive toolkit, playground, and starter for integrating MCP[^1] servers with GitHub Copilot's Agent in VS Code. Designed specifically for frontend developers to achieve maximum "vibing"[^2] in their workflow.

✨ Supercharge GitHub Copilot with MCP Server Tools

MCP support has just landed in VS Code Insiders (v1.99) as a preview feature, ready to enhance GitHub Copilot's Agent mode (see open issues). This integration lets you leverage any MCP server directly in your agentic coding workflow.

⚠️ This is an early preview feature that may evolve. Use it for exploration and fun! Found a bug or have ideas? File issues here.

🏁 Getting Started with MCP

Prerequisite: VS Code Insiders (version 1.99 or later) with GitHub Copilot pre-release installed. (👋 Welcome to our early adopter audience!)

1. A tour of MCP Servers configurations

Already set up, but feel to edit and add:

1. Servers in .vscode/mcp.json are shared as configurations with all repo collaborators:
   • "servers": {} follows Claude's structure for claude_desktop_config.json
   • "inputs": [] lets you define custom placeholders for configurations, avoiding hardcoded secrets

   // Example .vscode/mcp.json
   {
       // 💡 Inputs will be prompted on first server start,
       //    then stored securely by VS Code.
       "inputs": [
           {
           "type": "promptString",
           "id": "perplexity-key",
           "password": true, // Encrypted at-rest
           "description": "Perplexity API Key"
           }
       ],
       //
       "servers": {
           // https://github.com/ppl-ai/modelcontextprotocol/
           "Perplexity": {
               "command": "docker",
               "args": [
                   "run",
                   "-i",
                   "--rm",
                   "-e",
                   "PERPLEXITY_API_KEY",
                   "mcp/perplexity-ask"
               ],
               "env": {
                   // Look ma, no hardcoded secrets!
                   "PERPLEXITY_API_KEY": "${input:perplexity-key}"
               }
           }
       }
   }
   

2. Alternatively, configure "mcp": {…} in your VS Code settings for a personalized MCP server list which follows you with with Settings Sync.
3. Enable MCP discovery ("chat.mcp.discovery.enabled": true) to use your existing entries from Claude Desktop and other MCP clients. VS Code will show a trust dialog before enabling those servers:
4. Run MCP: List Servers to see all available servers, manage them, and check logs in the Output panel

2. Unleash Copilot Agent Mode with MCP Tools

1. Open Copilot view in VS Code and switch to Agent mode
2. Click the 🛠️ tools button to see enabled MCP tools (Playwright, Memory, and Perplexity for this repo)
   • Toggle servers/tools on or off as needed
3. Try these prompts that will use tools:
   • "Research with perplexity what the best MCP servers for frontend development are and create a splashy listing page"
   • "Use the playwright tool to check the landing page and fix any ayout bugs"
   • "Change the design to a dark-only mode, and do a visual review with playwright"