Contributing to MCP Apps SDK

Contributing to MCP Apps SDK

We welcome contributions to the MCP Apps SDK! This document outlines the process for contributing to the project.

Getting Started

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR-USERNAME/ext-apps.git
3. Install dependencies: npm install
4. Build the project: npm run build
5. Run tests: npm test

Development Process

1. Create a new branch for your changes
2. Make your changes
3. Run npm run prettier to ensure code style compliance
4. Run npm test to verify all tests pass
5. Submit a pull request

Pull Request Guidelines

• Follow the existing code style
• Include tests for new functionality
• Update documentation as needed
• Keep changes focused and atomic
• Provide a clear description of changes
• Keep "Allow edits by maintainers" checked when opening your PR — this lets maintainers rebase your branch and lets the `/update-snapshots` workflow push updated screenshots to it

Running Examples

Start the development environment with hot reloading:

npm run examples:dev

Or build and run examples:

npm run examples:start

With MCP Clients

To use these examples with MCP clients that support the stdio transport (such as Claude Desktop or VS Code), add this MCP server configuration to your client's settings:

MCP client configuration for all examples (using stdio)

{
  "mcpServers": {
    "basic-react": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-react",
        "--stdio"
      ]
    },
    "basic-vanillajs": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-vanillajs",
        "--stdio"
      ]
    },
    "basic-vue": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-vue",
        "--stdio"
      ]
    },
    "basic-svelte": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-svelte",
        "--stdio"
      ]
    },
    "basic-preact": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-preact",
        "--stdio"
      ]
    },
    "basic-solid": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-solid",
        "--stdio"
      ]
    },
    "budget-allocator": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https: