🛠️ Simple MCP Example with Claude and a Local JSON HTTP Server

This guide walks you through a basic setup where you use Claude (MacOS desktop) to interact with a local mock JSON server via MCP (Model-Computer Protocol).

---

🧰 Prerequisites

- Node.js installed
- Claude for MacOS (download from Anthropic)
- Basic understanding of how local servers and Claude MCP tools work

---

🚀 Step-by-Step Setup

1. Install Dependencies

In the root of your project, install the required packages:

npm install
npm run mock-api
npm run mcp-server

` Edit the claude_desktop_config.json file (usually found in ~/.claude/ or the app's internal config folder), and add your MCP server config:

{
  "mcpServers": {
    "json-chat": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-example/dist/index.js"]
    }
  }
}

Restart Claude
Once restarted, you should see two new MCP tools appear below the input bar in Claude, each marked with a 🛠️ hammer icon:

• Try prompting Claude with something like:

> "get all posts"

> "insert a post with id 500, title "created by claude" and views 123"

Claude will use the MCP tools you've configured to send actual requests to your local mock server.

Make sure you're running the JSON server, MCP server when you prompt Claude.

Testing

Run

npx @modelcontextprotocol/inspector node build/index.js

You should then see all of the available resources at http://127.0.0.1:6274/#resources