Peacock for VS Code

What is Peacock MCP Server?

Peacock MCP Server is a Model Context Protocol (MCP) server specifically built for the Peacock extension in VS Code. Its primary function is to demonstrate how an MCP server can be used to interact with APIs, in this case, by fetching and providing information from the official Peacock documentation. It aims to color your VS Code editor experience by providing relevant information about the Peacock extension.

How to use Peacock MCP Server?

Peacock MCP Server can be used in conjunction with VS Code and GitHub Copilot. After installation, you can interact with it through the GitHub Copilot chat interface. The server can be installed via NPM or Docker, and configured within VS Code settings or through CLI commands. It can also be installed via Smithery for Claude Desktop.

Installation Methods:

• VS Code Manual Installation: Add specific JSON configurations to your VS Code User Settings (JSON) or use code --add-mcp commands.
• Smithery: Use npx -y @smithery/cli install @johnpapa/peacock-mcp --client claude for automatic installation with Claude Desktop.
• Local Run with MCP Inspector: Clone the repository, install dependencies, build the project, and then run npx @modelcontextprotocol/inspector node build/index.js to test the server locally.

Using Tools in GitHub Copilot:

1. Open GitHub Copilot and select Agent mode.
2. Refresh the server list.
3. Select the "🛠️" button to see available tools.
4. Ask questions that would naturally invoke the tools, e.g., "How do I set my VS Code accent colors?"

Key Features of Peacock MCP Server

• Fetch Peacock docs: The main feature is the ability to retrieve detailed information about the Peacock VS Code extension directly from its official documentation.
• API Interaction Demonstration: Serves as a practical example of how an MCP server can interact with external APIs.
• Integration with VS Code and GitHub Copilot: Seamlessly integrates with the VS Code environment and can be leveraged through GitHub Copilot for interactive queries.

Use Cases of Peacock MCP Server

• Quick Access to Peacock Documentation: Developers using the Peacock extension can quickly get answers to their questions about its features and usage without leaving their editor.
• Learning MCP Server Development: Provides a real-world example for developers interested in building their own MCP servers and understanding API interactions within this protocol.
• Enhanced Developer Productivity: By providing immediate access to documentation, it helps developers efficiently configure and utilize the Peacock extension.

FAQ from Peacock MCP Server

• Q: How do I set my VS Code accent colors?
  • A: You can ask this question in GitHub Copilot after setting up the Peacock MCP Server, and it will fetch the relevant information from the Peacock documentation.
• Q: What is the main goal of this project?
  • A: The main goal is to show how an MCP server can be used to interact with APIs, specifically by fetching data from the official Peacock documentation.
• Q: Where does the data used by this MCP server come from?
  • A: All data used by this MCP server is fetched from the official Peacock documentation (peacockcode.dev).

Features • Tools • Setup • Configuring an MCP Host

MCP Server for the Peacock extension for VS Code, coloring your world, one Code editor at a time. The main goal of the project is to show how an MCP server can be used to interact with APIs.

Note: All data used by this MCP server is fetched from the official Peacock documentation.

🔧 Features

• Fetch Peacock docs: Get detailed info on Peacock.

🧰 Tools

1. fetch_peacock_docs 🔍🦸‍♂️

• Description: Fetches the Peacock for VS Code extension docs from its GitHub repository and answers questions based on the documentation
• Input:
  • prompt (query): The question about Peacock.
• Returns: Your answer!

🛠️ Setup

Install Peacock for VS Code HERE.

Running the MCP Server hosted in GitHub Copilot with VS Code Insiders

Note: If you already have the MCP server enabled with Claude Desktop, add chat.mcp.discovery.enabled: true in your VS Code settings and it will discover existing MCP server lists.

If you want to associate the MCP server with a specific repo, create a .vscode/mcp.json file with this content:

{
  "inputs": [],
  "servers": {
    "peacock-mcp": {
      "command": "npx",
      // "command": "node",
      "args": [
        "-y",
        "@johnpapa/peacock-mcp"
        // "_git/peacock-mcp/dist/index.js"
      ],
      "env": {}
    }
  }
}

If you want to associate the MCP server with all repos, add the following to your VS Code User Settings JSON:

"mcp": {
  "servers": {
    "peacock-mcp": {
      "command": "npx",
      // "command": "node",
      "args": [
        "-y",
        "@johnpapa/peacock-mcp"
        // "/Users/papa/_git/peacock-mcp/dist/index.js"
        // "_git/peacock-mcp/dist/index.js"
      ],
      "env": {}
    }
  }
}
"chat.mcp.discovery.enabled": true,

VS Code Manual Installation

Note: For quick installation, click the install buttons at the top of this README.

Using VS Code Settings

To manually install the Peacock MCP server in VS Code, follow these steps:

1. Open VS Code Settings (JSON) by pressing Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) and searching for "Preferences: Open User Settings (JSON)"
2. Add the following JSON to your settings file:

{
  "mcp": {
    "servers": {
      "peacock-mcp": {
        "command": "npx",
        "args": ["-y", "@johnpapa/peacock-mcp"],
        "env": {}
      }
    }
  },
  "chat.mcp.discovery.enabled": true
}

Using CLI Commands

For VS Code Stable:

code --add-mcp '{"name":"peacock-mcp","command":"npx","args":["-y","@johnpapa/peacock-mcp"],"env":{}}'

For VS Code Insiders:

code-insiders --add-mcp '{"name":"peacock-mcp","command":"npx","args":["-y","@johnpapa/peacock-mcp"],"env":{}}'

Installing via Smithery

To install Peacock MCP Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @johnpapa/peacock-mcp --client claude

Run the MCP Server Locally with MCP Inspector

If you'd like to run MCP Inspector locally to test the server, follow these steps:

1. Clone this repository:

   git clone https://github.com/johnpapa/peacock-mcp
   

2. Install the required dependencies and build the project.

   npm install
   npm run build
   

3. (Optional) To try out the server using MCP Inspector run the following command:

   # Start the MCP Inspector
   npx @modelcontextprotocol/inspector node build/index.js
   

   Visit the MCP Inspector URL shown in the console in your browser. Change Arguments to dist/index.js and select Connect. Select List Tools to see the available tools.

Using Tools in GitHub Copilot

1. Now that the mcp server is discoverable, open GitHub Copilot and select the Agent mode (not Chat or Edits).

2. Select the "refresh" button in the Copilot chat text field to refresh the server list.

3. Select the "🛠️" button to see all the possible tools, including the ones from this repo.

4. Put a question in the chat that would naturally invoke one of the tools, for example:

   How do I set my VS Code accent colors?
   

   Note: If you see "Sorry, the response was filtered by the Responsible AI Service. Please rephrase your prompt and try again.", try running it again or rephrasing the prompt.