# 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 で使う（推奨・最も簡単）

```bash
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` が自動で読み込まれ、すぐに使えます。

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

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

---

## B. claude.ai Web 版で使う

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

```bash
# ターミナル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](https://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` ファイルとして保存してください。

---

## ローカルで動作確認

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

---

## 技術スタック

- [Model Context Protocol SDK](https://github.com/modelcontextprotocol/typescript-sdk)
- TypeScript / Node.js
- Express + CORS（HTTP/SSEモード）
- Zod（スキーマ検証）