Building a CSS Tutor MCP Server

Name: Building a CSS Tutor MCP Server
Author: 3mdistal

3mdistal

Get started Repository

A demo of how to build an MCP server (without just vibe coding).

Setup

Choose your client, copy the config, then fill in any required environment variables.

Add to Cursor Add to VS Code

claude mcp add building-a-css-tutor -- npx @modelcontextprotocol/inspector node ./build/index.js

~/.codex/config.toml

[mcp_servers.building-a-css-tutor]
command = "npx"
args = ["@modelcontextprotocol/inspector", "node", "./build/index.js"]

# codex mcp add building-a-css-tutor -- npx @modelcontextprotocol/inspector node ./build/index.js

~/.cursor/mcp.json

{
  "mcpServers": {
    "building-a-css-tutor": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

.vscode/mcp.json

{
  "servers": {
    "building-a-css-tutor": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

~/.gemini/settings.json

{
  "mcpServers": {
    "building-a-css-tutor": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

claude_desktop_config.json

{
  "mcpServers": {
    "building-a-css-tutor": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

.trae/mcp.json

{
  "mcpServers": {
    "building-a-css-tutor": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

Setup

Related