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 を使う方法（常時起動・クラウド）

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

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

1. claude.ai を開いてチャット入力欄の 「+」→「コネクタ」→「コネクタを管理」
2. 「カスタム MCP サーバーを追加」
3. SSE エンドポイントを入力：

   https://発行されたURL/sse
   

4. 保存して有効化

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（スキーマ検証）