Skip to main content
Glama
Stella2211

MCP Apps Todo

by Stella2211
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

MCP Apps Todo

MCP Apps(旧 SEP-1865)を活用した Todo アプリです。Claude Desktop や Claude Code などの MCP クライアントから Todo を操作でき、会話内にインタラクティブな UI が表示されるのが特徴です。

WARNING

これは個人の学習・練習用リポジトリです。認証・認可をはじめとするセキュリティ対策は一切実装されていません。本番環境での利用には適しません。

MCP Apps とは

通常の MCP ツールは テキストの入出力のみですが、MCP Apps を使うと ツール実行時にリッチな UI を会話内に埋め込むことができます。

このアプリでは、Claude に「Todo を見せて」と頼むと、テキスト応答に加えて操作可能な Todo リスト UI が表示されます。UI 上から直接 Todo の追加・完了・削除ができ、その結果がサーバーに即時反映されます。

Related MCP server: Todoist MCP Server

技術スタック

レイヤー

技術

フロントエンド

React 19 + TanStack Start + Tailwind CSS

MCP サーバー

@modelcontextprotocol/sdk + @modelcontextprotocol/ext-apps

MCP 内 UI

React (単一 HTML にビルドして埋め込み)

データベース

Cloudflare D1 (SQLite) + Drizzle ORM

ホスティング

Cloudflare Workers

アーキテクチャ

┌──────────────┐      ┌───────────────────────────┐      ┌──────────┐
│ Claude       │◄────►│  Cloudflare Workers        │      │          │
│ Desktop/Code │ MCP  │  ┌──────────┐ ┌─────────┐ │      │ D1       │
│              │      │  │MCP Server│ │ Web UI  │ │◄────►│ Database │
└──────────────┘      │  └──────────┘ └─────────┘ │      │          │
                      └───────────────────────────┘      └──────────┘
                           ▲
┌──────────────┐           │
│ ブラウザ      │◄──────────┘
│ (Web UI)     │   HTTP
└──────────────┘

  • /mcp — MCP エンドポイント (Streamable HTTP)

  • / — Web UI (SSR)

MCP ツール

ツール

説明

list_todos

Todo 一覧の取得

add_todo

Todo の追加

update_todo

Todo の更新

complete_todo

完了/未完了の切り替え

delete_todo

Todo の削除

すべてのツールに MCP Apps の UI メタデータが付与されており、対応クライアントではインタラクティブな UI が表示されます。

セットアップ

前提条件

ローカル開発

# 依存関係のインストール
bun install

# ローカル DB にマイグレーション適用
bunx wrangler d1 migrations apply mcp-todo-db --local

# 開発サーバー起動 (http://localhost:3000)
bun run dev

MCP Inspector でテスト

npx @modelcontextprotocol/inspector http://localhost:3000/mcp

デプロイ

# Cloudflare D1 データベースを作成 (初回のみ)
bunx wrangler d1 create mcp-todo-db

# wrangler.jsonc の database_id を作成した DB の ID に更新

# 本番 DB にマイグレーション適用
bunx wrangler d1 migrations apply mcp-todo-db --remote

# ビルド & デプロイ
bun run deploy

Claude クライアントへの接続

デプロイ後の MCP エンドポイント URL を https://<your-domain>/mcp として、各クライアントに設定します。 例：https://mcp-apps-todo.starry-night.dev/mcp

Claude Desktop

claude_desktop_config.json に追加:

{
  "mcpServers": {
    "todo": {
      "type": "streamable-http",
      "url": "https://<your-domain>/mcp"
    }
  }
}

Claude Code (CLI)

claude mcp add todo --transport http https://<your-domain>/mcp

VS Code (Claude 拡張機能)

.vscode/settings.json に追加:

{
  "claude-code.mcpServers": {
    "todo": {
      "type": "streamable-http",
      "url": "https://<your-domain>/mcp"
    }
  }
}

使い方の例

Claude との会話で:

  • 「stella の Todo を見せて」

  • 「stella の Todo に『牛乳を買う』を追加して」

  • 「『牛乳を買う』を完了にして」

MCP Apps 対応クライアントでは、ツール実行時に UI が表示され、そこから直接操作することもできます。

ライセンス

MIT

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • Todoist MCP Server

    abhiz123
    A
    license
    A
    quality
    C
    maintenance
    An MCP server that integrates Claude with Todoist, enabling natural language task management including creating, updating, completing, and deleting tasks.
    5
    376 npm
    391
    MIT

  • day-planner-mcp

    ryaker
    F
    license
    A
    quality
    D
    maintenance
    An MCP App that renders an interactive dashboard in Claude conversations to unify calendar events, emails, and documents into a single interface. It enables users to manage their daily schedule and perform actions like meeting preparation through bidirectional communication between the UI and the model.
    2
    -

  • todo-mcp

    floriscornel
    A
    license
    Not graded
    quality
    C
    maintenance
    A simple, powerful Todo list manager for Claude Desktop and other MCP-compatible AI assistants. Organize your tasks across different projects with priorities and never lose track of what needs to be done!
    15 npm
    2
    MIT