Skip to content
AI Primer
Developer ToolsML/AI

diy-mcp-connector

Builds a dedicated MCP server for a single web app by walking through API discovery, tool design, security review, implementation, testing, and deployment. Use when the user asks to create an MCP server, connect a web app to Claude Code, or build a tool integration for any web app.

8 starsFirst seen April 19, 2026Last seen April 19, 20261 public mentions

Install command

npx skills add https://github.com/sshh12/claude-plugins --skill diy-mcp-connector
View on GitHub
SKILL.md show

Parsed frontmatter

name
diy-mcp-connector
description
Builds a dedicated MCP server for a single web app by walking through API discovery, tool design, security review, implementation, testing, and deployment. Use when the user asks to create an MCP server, connect a web app to Claude Code, or build a tool integration for any web app.
---
name: diy-mcp-connector
description: >-
  Builds a dedicated MCP server for a single web app by walking through
  API discovery, tool design, security review, implementation, testing,
  and deployment. Use when the user asks to create an MCP server, connect
  a web app to Claude Code, or build a tool integration for any web app.
---

## Overview

This skill runs in Claude Code and builds a standalone MCP server that turns one web app's API into purpose-built tools. The connector you build works with Claude Code, Claude Desktop (Cowork), and any other MCP-supporting application. The result is a Node.js server that handles authentication, response formatting, and tool routing — one dedicated server per app.

**All 9 stages are mandatory. Complete each in order — do not skip ahead.** Each stage has a gate condition that must be met before proceeding.

**Stages can loop.** Auth or API issues discovered in Stages 6-7 may require returning to Stage 2 to reclassify the app type, then re-running Stages 5-7. This is expected — the linear numbering is the happy path, not a one-way gate.

## Prerequisites

- **Node.js 18+** and **npm**
- **Python 3** (for HAR analysis script)
- **Google Chrome** (for auto-login via CDP)
- **`@modelcontextprotocol/sdk`** npm package (installed during build)
- **Optional (for live exploration):** Claude for Chrome, brw, Playwright MCP, or Chrome DevTools MCP — any browser MCP server enables live API discovery instead of manual HAR capture

## Getting Started

1. Ask the user which web app they want to connect
2. Detect available browser tools (`claude mcp list`) — see `references/1-capture-api.md` for the detection table and preference order
3. If no browser tools found, ask if they have HAR files or want to set up a browser tool (Claude for Chrome is the easiest)
4. Create the project directory: `<app>/`
5. Copy the analyze script: `cp "${SKILL_DIR}/scripts/analyze-har.py" <app>/scripts/`

---

## Stage 1: Capture API Surface

See `references/1-capture-api.md`

- [ ] If api-key-auth with documented API: skip HAR, document endpoints from docs/existing code

Source

Repository
sshh12/claude-plugins
Entry path
plugins/diy-mcp-connector/skills/diy-mcp-connector/SKILL.md
Default branch
main
Commit
7fb764a

Recent mentions

1 shown