Widget MCP

🚀 ⚙️ Widget MCP

このプロジェクトは、タイマーや単位変換などの一般的なシチュエーションに対応したシンプルなウィジェットをLLMチャットに追加することができます。

デモビデオ: https://youtu.be/4gfom42vHkc

🚀 クイックスタート

このセクションでは、widget-mcp を使い始めるための基本的な手順を説明します。

サポートされるMCPクライアントでの使用方法

Goose

1. Gooseをインストールします。
2. Extensions をクリックし、Add custom extension を選択します。
3. 名前に Widgets を入力し、コマンドに npx widget-mcp を入力します。
4. Chat をクリックし、2 minute timer と入力して動作を確認します。

✨ 主な機能

現在のウィジェット

• Timer - チャイム付きの編集可能なタイマーです。
• Stopwatch - 単純にカウントアップするタイマーです。
• Conversion - LLMが式を書ける一連の単位間での変換が可能です。
• Display Fact - 答えが単純な場合、読みやすいカードで表示します。

追加を検討しているウィジェット

• Color Picker - インタラクティブな色選択とパレットツールです。LLMが色を提案し、ユーザーが微調整して探索できるようにパラメータ化することができます。
• Calculator - 基本的な科学計算機の機能を備え、初期関数はLLMによって設定されます。
• Dice Roller - エージェントに要求した内容に基づくカスタムダイスセットです。

📦 インストール

開発環境のセットアップ

新しいウィジェットを追加するには、以下の手順で環境をセットアップします。

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

# HTMLのホットリロードで開発を行う
npm run dev:html

# Smitheryのウェブインスペクターを使用してMCPサーバーを起動する
npm run dev:mcp

📚 ドキュメント

動機

MCP-UIは、ここ数年使ってきたチャットUIからテキストの壁を打破する扉を開きます。このプロジェクトは、一般的なシチュエーションに対応したいくつかのシンプルなウィジェットを提供することで、可能なことの一端を示しています。

もしあなたが「XをYに変換する」や「2分間のタイマー」をグーグルで検索し、カスタムUIの結果を見たことがあるなら、これは非常に親しみやすいはずです。

サポートされるMCPクライアント

MCP-UIは新しい技術で、2025年8月現在、一部のクライアントでのみサポートされています。

Smithery

Smitheryのプレイグラウンドでwidget-mcpを試すことができます。(TODO: Smitheryのデプロイ待ち)

ウィジェットの追加依頼

追加すると面白いウィジェットの例をいくつか挙げます。もちろん、あなたにも素敵なアイデアがあることでしょう！

開発

新しいウィジェットを追加するのは非常に簡単です！これらのウィジェットはすべて、変数を注入できるHTMLページです（例：LLMによって提供される値）。新しいウィジェットを追加するには、html ディレクトリにテンプレートファイルを追加し、index.ts に新しいツールを追加します。

おそらく、「 を行うウィジェットのHTMLとツールを追加する」とプロンプトを入力するだけで済みます。index.ts と timer.html を参考にしてください。

🔗 リンク

• MCP-UI - MCP上のUIです。
• Smithery - MCPサーバーを見つけて試す最も簡単な方法です。
• Goose - BlockのオープンソースMCPクライアントです。
• PulseMCP - MCPに関する最新情報を得る最良の方法です。
• メンテナンス: Ref. - コーディングエージェントのコンテキストです。