MCP Servers

html-idea-mcp

Enables saving structured development ideas as HTML files from Claude Code CLI or claude.ai, capturing titles, summaries, features, tech stacks, phases, and other planning details using provided tools.

README

html-idea-mcp

開発アイデアを構造化して HTML ファイルとして保存する MCP サーバー。

環境	対応
Claude Code CLI	✅ `.mcp.json` で即時接続
claude.ai Web 版	✅ ngrok / Railway でデプロイして接続

ツール

ツール	説明
`create_idea`	アイデアを入力して HTML を生成
`list_ideas`	保存済みアイデアの一覧を表示（CLIモードのみ）

`create_idea` のパラメータ

パラメータ	型	説明
`title`	string	タイトル（必須）
`summary`	string	一言概要（必須）
`background`	string	背景・解決したい課題
`features`	string[]	主要機能のリスト
`techStack`	string[]	使用技術・ライブラリ
`phases`	object[]	開発フェーズ（`name` + `tasks[]`）
`notes`	string	メモ・補足
`priority`	`high` / `medium` / `low`	優先度（デフォルト: `medium`）
`status`	`idea` / `planning` / `in-progress` / `done`	ステータス（デフォルト: `idea`）
`outputDir`	string	保存先ディレクトリ（CLIモードのみ）

A. Claude Code CLI で使う（推奨・最も簡単）

git clone https://github.com/SOOJUNBARNG/Claude_base_html_make_MCP.git
cd Claude_base_html_make_MCP
npm install
npm run build

このディレクトリで claude を起動すると .mcp.json が自動で読み込まれ、すぐに使えます。

グローバルに登録したい場合：

claude mcp add html-idea-mcp node /path/to/Claude_base_html_make_MCP/dist/index.js

B. claude.ai Web 版で使う

ngrok を使う方法（簡単・ローカル起動）

# ターミナル1：HTTPモードでサーバー起動
npm run start:http

# ターミナル2：ngrokでインターネットに公開
brew install ngrok
ngrok http 3000

ngrok が発行した URL（例: https://xxxx.ngrok-free.app）を使って claude.ai に登録します。

Railway を使う方法（常時起動・クラウド）

railway.app にサインイン（GitHub アカウントでOK）
「New Project」→「Deploy from GitHub repo」→ このリポジトリを選択
環境変数を追加： START_MODE=http
「Settings」→「Domains」で URL を発行

claude.ai への登録手順（共通）

claude.ai を開いてチャット入力欄の 「+」→「コネクタ」→「コネクタを管理」
「カスタム MCP サーバーを追加」
SSE エンドポイントを入力：
```
https://発行されたURL/sse
```
保存して有効化

Web モードの注意： create_idea はファイル保存の代わりに HTML コードをチャットに返します。コピーして .html ファイルとして保存してください。

ローカルで動作確認

# HTTPモードで起動してヘルスチェック
npm run dev:http
curl http://localhost:3000/health
# → {"status":"ok","mode":"http"}

技術スタック

Model Context Protocol SDK
TypeScript / Node.js
Express + CORS（HTTP/SSEモード）
Zod（スキーマ検証）

Recommended Servers

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official

Featured

TypeScript

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official

Featured

Local

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official

Featured

TypeScript

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official

Featured

Python

E2B

Using MCP to run code via e2b.

Official

Featured

Neon Database

MCP server for interacting with Neon Management API and databases

Official

Featured

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official

Featured