Nanostores MCP について
Nanostores MCP は、Nanostores を使う開発者向けの MCP サーバーです。AI アシスタントによる構成の調査、実行時の活動分析、ドキュメント検索を支援し、AST 静的解析と任意のライブ監視を組み合わせます。
主な機能
- 01AST によるストアと依存関係のスキャン
- 02ストア概要と依存グラフの作成
- 03任意の実行時イベント監視
- 04パフォーマンスと活動の分析
- 05Nanostores ドキュメント検索
活用シーン
- 01プロジェクト内のストア関係を把握
- 02ストア変更の影響を追跡
- 03更新頻度やエラーの多いストアを特定
- 04Nanostores の使い方を検索
MCP 対応
MCP のツール、リソース、プロンプトを通じて、Nanostores のプロジェクト分析とドキュメント検索を提供します。任意の実行時監視には `@nanostores/logger` のイベントを使用します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
12掲載時のツール一覧 · 2 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| force | boolean | いいえ | キャッシュを回避して、スキャンを強制的に再実行します。 |
| compact | boolean | いいえ | 完全な store/subscriber リストではなく、簡潔なディレクトリレベルの概要を返します。個々の store の詳細ではなく、store の配置場所をトークン効率よく把握したい場合に使用します。 |
| rootUri | string | いいえ |
詳細
Nano Stores MCP
Nanostores 用 Model Context Protocol サーバー — Claude Desktop のような AI アシスタントで、Nanostores を分析、デバッグ、監視できます。
- 📊 静的解析: AST ベースのプロジェクトスキャン、依存関係グラフ、ストアの調査
- 🔥 ランタイム監視:
@nanostores/loggerからのライブイベント、パフォーマンス指標、アクティビティの追跡 - 📚 ドキュメント: トピックやストアの種類から Nanostores のドキュメントを検索、閲覧
- 🎯 設定不要: すぐに使えます — プロジェクトのルートと Nanostores のドキュメントを自動検出
- 🌐 フレームワーク非依存: React、Vue、Svelte、Angular、Solid、Preact、Lit など、Nanostores を使用するあらゆるフレームワークで動作します
npx nanostores-mcp
AI に「ストアのアーキテクチャを分析して」や「最も頻繁に更新されるストアはどれ?」と尋ねてみましょう。
Evil Martians が制作。開発者向けツールのプロダクトコンサルティングを提供しています。
目次
機能
📊 静的解析(AST ベース)
アプリを実行せずに、Nanostores のアーキテクチャを把握できます。
- プロジェクトスキャン — すべてのストア、サブスクライバー、インポート/エクスポートの関係を検出します
- 依存関係グラフ — ストア同士の依存関係を可視化します(Mermaid 図)
- ストアの調査 — 種類(atom/map/computed/batched/persistentAtom/persistentMap/router)、場所、使用パターン、関連ファイルを確認します
- フレームワークを考慮したサブスクライバー検出 — React、Vue、Svelte、Angular での
.subscribe()/.listen()呼び出しや、コンポーネントのバインディングを認識します - Vue SFC のサポート —
.vueファイルの<script>と<script setup>の両方のブロックを解析します(@vue/compiler-sfcが必要です) - Svelte のサポート —
<script context="module">とインスタンスの<script>ブロック、自動サブスクリプション(テンプレート内の$storeName)を解析し、Svelte 5 のルーン($state、$derived、$effectなど)を除外して、ストアへの参照と誤認されないようにします(svelteが必要です) - Angular DI のサポート —
@nanostores/angularのNanostoresServiceコンストラクターインジェクションを解決し、TypeScript のコンポーネントファイル内にあるthis.nanostores.useStore(...)の呼び出しパターンを検出します
🔥 ランタイム監視(Logger 統合)
実行中のアプリケーションのリアルタイムな情報を確認できます。
- ライブイベントの取得 —
@nanostores/loggerからマウント/アンマウント、値の変更、アクションの呼び出しを取得します - パフォーマンス分析 — 頻繁にイベントを発生させるストア、高いエラー率、パフォーマンスのボトルネックを検出します
- アクティビティ指標 — 変更頻度、アクションの成功/失敗率、アクションの実行時間を確認します
- 複合分析 — 静的な構造とランタイムの動作を組み合わせ、詳細なデバッグを行います
📚 ドキュメント検索
AI アシスタントから Nanostores のドキュメントを直接検索、閲覧できます。
- 全文検索 — クエリを使ってガイド、API リファレンス、ベストプラクティスを検索します
- ストアの種類による検索 — 特定のストアの種類(atom、map、computed など)に関連するドキュメントを取得します
- 自動検出 —
node_modules内のnanostoresからドキュメントを自動的に取得します
要件
| 要件 | バージョン |
|---|---|
| Node.js | ^20.0.0 || >=22.0.0 |
必須のピア依存関係(静的解析用):
npm install nanostores
オプションのピア依存関係 — 対応するファイル形式を使用する場合のみインストールしてください:
| パッケージ | 必要となる場合 |
|---|---|
@vue/compiler-sfc | Vue SFC(.vue)ファイルのスキャン |
svelte | Svelte(.svelte)ファイルのスキャン |
@nanostores/logger | ランタイム監視(attachMcpLogger) |
これらのオプションパッケージがなくてもサーバーは動作し、未対応のファイル形式はエラーを出さずにスキップします。
インストール
npm install -g nanostores-mcp
# or
pnpm add -g nanostores-mcp
または、インストールせずに直接実行します:
npx nanostores-mcp
設定
Claude Desktop
~/Library/Application Support/Claude/claude_desktop_config.json(macOS)または %APPDATA%\Claude\claude_desktop_config.json(Windows)に追加します:
{
"mcpServers": {
"nanostores": {
"command": "npx",
"args": ["-y", "nanostores-mcp"],
"env": {
"NANOSTORES_MCP_ROOT": "/path/to/your/project"
}
}
}
}
VS Code
GitHub Copilot 拡張機能が必要です(VS Code 1.99 以降)。プロジェクトに .vscode/mcp.json を作成します:
{
"servers": {
"nanostores": {
"type": "stdio",
"command": "npx",
"args": ["-y", "nanostores-mcp"]
}
}
}
ツールは Copilot の エージェントモード で利用できます(Copilot Chat のドロップダウンから「Agent」を選択してください)。
Cursor
プロジェクトのルートに .cursor/mcp.json を作成します(グローバルに設定する場合は ~/.cursor/mcp.json)。
{
"mcpServers": {
"nanostores": {
"command": "npx",
"args": ["-y", "nanostores-mcp"]
}
}
}
Zed
Zed の settings.json に追加します:
{
"context_servers": {
"nanostores": {
"command": "npx",
"args": ["-y", "nanostores-mcp"],
"env": {
"NANOSTORES_MCP_ROOT": "/path/to/your/project"
}
}
}
}
サーバーは Zed の エージェントパネル の設定に表示されます。
Windsurf
~/.codeium/windsurf/mcp_config.json に追加します:
{
"mcpServers": {
"nanostores": {
"command": "npx",
"args": ["-y", "nanostores-mcp"],
"env": {
"NANOSTORES_MCP_ROOT": "/path/to/your/project"
}
}
}
}
Cascade パネルの MCP アイコン →「Configure」からこのファイルを開くこともできます。
Claude Code
CLI から追加します:
claude mcp add --transport stdio nanostores -- npx -y nanostores-mcp
または、プロジェクトのルートに .mcp.json を作成します(チームと共有できます):
{
"mcpServers": {
"nanostores": {
"command": "npx",
"args": ["-y", "nanostores-mcp"],
"env": {
"NANOSTORES_MCP_ROOT": "/path/to/your/project"
}
}
}
}
環境変数
| 変数 | デフォルト | 説明 |
|---|---|---|
NANOSTORES_MCP_ROOT | cwd | プロジェクトのルートパス |
NANOSTORES_MCP_ROOTS | — | 複数プロジェクト設定用の、プラットフォーム区切りのルート(Unix では :、Windows では ;) |
WORKSPACE_FOLDER | — | NANOSTORES_MCP_ROOT のエイリアス — VS Code や一部のエディターによって自動設定されます |
WORKSPACE_FOLDER_PATHS | — | NANOSTORES_MCP_ROOTS のエイリアス — 一部のエディターによって自動設定されます |
NANOSTORES_MCP_LOGGER_ENABLED | true | false または 0 に設定すると、ランタイムイベントの収集とロガーブリッジを無効にします |
NANOSTORES_MCP_LOGGER_PORT | 3999 | ロガーブリッジ用の HTTP ポート |
NANOSTORES_MCP_LOGGER_HOST | 127.0.0.1 | バインドするホスト。指定可能な値:127.0.0.1、localhost、::1 |
NANOSTORES_DOCS_ROOT | 自動検出 | ドキュメントディレクトリのパス |
NANOSTORES_DOCS_PATTERNS | **/*.md | ドキュメント用の、カンマ区切りの glob パターン |
プロジェクトルートの解決方法
サーバーは、次の優先順位でワークスペースのルートを選択します:
- 環境変数(最優先) —
NANOSTORES_MCP_ROOTS/NANOSTORES_MCP_ROOT/WORKSPACE_FOLDER_PATHS/WORKSPACE_FOLDER - クライアントのルート —
roots/list機能を通じて MCP クライアントから報告されるルート(一部のエディターによって自動設定されます) - 現在の作業ディレクトリ — 環境変数もクライアントのルートも設定されていない場合のフォールバックとして
process.cwd()が使用されます
ツールの呼び出し時に projectRoot 引数を明示しない場合、サーバーは最初に設定されたルートを使用します。複数ルートの設定では、曖昧さを避けるため、常に projectRoot を渡してください。
クイックスタート
1. 静的解析
そのまま利用できます。プロジェクトを指定して、次のように尋ねてください。
- 「ストアのアーキテクチャを分析してください」
- 「このプロジェクトで nanostores がどのように使われているか説明してください」
- 「$cart ストアの概要を教えてください」
- 「ストアが変更されました。プロジェクトを再スキャンしてください」 ← AI が強制的に再スキャンします
2. ドキュメント検索
node_modules 内の nanostores から自動検出されます。
- 「computed ストアの使い方を教えてください」
- 「persistentAtom のドキュメントを表示してください」
3. ランタイムモニタリング(任意)
アプリにロガーを統合する必要があります。詳しくは、以下のランタイムモニタリングをご覧ください。
- 「最も頻繁に更新されるストアはどれですか?」
- 「$user の最近のアクティビティを表示してください」
- 「全体的なヘルスレポートを作成してください」
セットアップの確認
以下の4つのツールを順番に実行し、すべて正常に動作することを確認してください。
nanostores_ping → should return server status and logger bridge state
nanostores_scan_project → should list your stores and subscribers
nanostores_docs_search → should return documentation results (requires nanostores in node_modules)
nanostores_runtime_overview → should return overview (or "no runtime data" if logger is disabled — that's fine)
nanostores_scan_project がストアを1つも返さない場合は、NANOSTORES_MCP_ROOT が正しいプロジェクトディレクトリを指していることを確認してください。
MCP インターフェース
MCP リソース
| リソース | 説明 |
|---|---|
nanostores://graph | 依存関係グラフ全体(テキスト+Mermaid) |
nanostores://store/{key} | 名前または ID によるストアの詳細 |
nanostores://docs | ドキュメントのインデックス — すべてのページとタグ |
nanostores://docs/page/{id} | ドキュメントページの全内容 |
MCP ツール
静的解析
| ツール | 説明 |
|---|---|
nanostores_scan_project | プロジェクト内のすべてのストア、サブスクライバー、依存関係をスキャンします |
nanostores_store_summary | 特定のストアの詳細な概要 |
nanostores_project_outline | 概要:ストアの種類、主要なディレクトリ、ハブストア |
nanostores_store_subgraph | ストアの依存関係の近傍を BFS で展開 |
nanostores_store_impact | 下流の因果関係 — X が変更されたときに再計算/再レンダリングされる対象 |
ランタイムモニタリング
| ツール | 説明 |
|---|---|
nanostores_runtime_overview | すべてのストアの統計情報を含む全体的なヘルスレポート |
nanostores_store_activity | 特定のストアのアクティビティタイムライン(種類/アクションでフィルタリング可能) |
nanostores_find_noisy_stores | 変更頻度やエラー率が高いストアを特定 |
nanostores_runtime_coverage | 静的グラフとランタイムイベントを比較し、カバレッジのギャップを特定 |
ドキュメント
| ツール | 説明 |
|---|---|
nanostores_docs_search | query(全文検索)、storeKind(atom、map、computed、persistentAtom など)、またはその両方でドキュメントを検索します。オプション:limit(デフォルトは 10)、tags |
検索結果に含まれるページの全内容を読むには、nanostores://docs/page/{id} リソースを使用してください。
ユーティリティ
| ツール | 説明 |
|---|---|
nanostores_ping | サーバーのヘルスチェックとロガーブリッジの状態 |
nanostores_clear_cache | プロジェクトのインデックスキャッシュを消去し、再スキャンを実行 |
MCP プロンプト
| プロンプト | パラメーター | 説明 |
|---|---|---|
explain-project | focus (optional) | AI がガイドする、プロジェクトのストアアーキテクチャの説明です。focus で機能やドメインを絞り込めます(例:"cart"、"auth") |
explain-store | store_name (required) | 特定のストアの実装と使用方法を詳しく解説します |
debug-store | store_name (required) | 静的データとランタイムデータを組み合わせた包括的な分析です |
debug-project-activity | — | プロジェクト全体のパフォーマンス分析と最適化 |
docs-how-to | task (required) | ドキュメントに基づく、Nanostores のタスクを段階的に進めるためのガイドです(例:「map ストアを localStorage に同期するには?」) |
高度なツール引数
多くのツールは、動作を大きく変える次の省略可能な引数を受け付けます。
| Argument | Type | Used in | Description |
|---|---|---|---|
storeId | string | store_summary, store_subgraph, store_impact | ストアの正確な識別子 — 形式:store:src/stores.ts#$counterName。両方が指定されている場合は、name より優先されます。 |
name | string | store_summary, store_subgraph, store_impact | ストア名(例:"$user")。storeId が指定されていない場合に使用されます。 |
radius | number (0–10, default 2) | nanostores_store_subgraph | ストアを中心とした BFS のホップ数です。1 = 直接の依存関係のみ、2 = 依存関係の依存関係までです。警告: 接続数の多いハブストア(ハブスコア > 5)では、radius ≥ 2 にするとプロジェクトの大部分が返される場合があります。まずは 1 から始めてください。 |
projectRoot | string | ほとんどのツール | 複数ルート構成で分析するプロジェクトルートです。省略すると、最初に設定されたルートが使用されます。複数ルートのプロジェクトでは、必ず指定してください。 |
windowMs | number | store_activity, find_noisy_stores, runtime_overview | 遡って確認する時間範囲(ミリ秒単位。例:60000 = 直近 60 秒)です。この時間範囲に該当するイベントに絞り込みます。 |
kinds | string[] | nanostores_store_activity | イベントの種類で絞り込みます。値:"mount"、"unmount"、"change"、"action-start"、"action-end"、"action-error"。 |
actionName | string | nanostores_store_activity | 特定のアクション(例:"increment")にイベントを絞り込みます。 |
compact | boolean | scan_project, find_noisy_stores, runtime_overview | 全文の代わりに、圧縮されたトークン効率の高いテーブルを返します。大規模なプロジェクトでコンテキストの使用量を削減するのに便利です。 |
ランタイムの監視
ランタイムを分析するには、MCP Logger クライアントをアプリケーションに組み込んでください。
1. アプリにインストールし、ロガーブリッジを有効にします:
npm install nanostores-mcp
ロガーブリッジは自動的に起動するため、追加の設定は不要です。無効にするには、MCP サーバーの設定で NANOSTORES_MCP_LOGGER_ENABLED=false を設定してください。
2. ロガーを付けてストアを定義します(src/stores.ts):
import { atom, map, computed } from "nanostores";
import { initMcpLogger, attachMcpLogger } from "nanostores-mcp/mcpLogger";
// Automatically disabled in production (checks NODE_ENV / import.meta.env.DEV)
initMcpLogger();
// Stores
export const $count = atom(0);
export const $user = map({ name: "", role: "guest" });
export const $greeting = computed($user, user => `Hello, ${user.name}`);
// Attach logger — each call returns a cleanup function
attachMcpLogger($count, "$count");
attachMcpLogger($user, "$user");
attachMcpLogger($greeting, "$greeting");
3. ストアを通常どおり使用します — イベント(マウント、アンマウント、変更、アクション)は自動的に記録され、毎秒 MCP サーバーにまとめて送信されます。
4. AI アシスタントに質問します:
- 「変更頻度が最も高いストアはどれですか?」 →
nanostores_find_noisy_stores - 「$user の最近のアクティビティを表示してください」 →
nanostores_store_activity - 「全体的な健全性レポートを作成してください」 →
nanostores_runtime_overview
ロガーのオプション
initMcpLogger({
url: "http://127.0.0.1:3999/nanostores-logger", // default; change if using a custom port
batchMs: 1000, // default; lower for faster delivery (e.g. 200)
projectRoot: "/absolute/path/to/project", // link runtime events with static analysis
// Mask sensitive data — return null to skip event entirely
maskEvent: event => {
if (event.storeName === "authToken") return null;
return event;
},
});
シャットダウン前のフラッシュ
import { getMcpLogger } from "nanostores-mcp/mcpLogger";
window.addEventListener("beforeunload", async () => {
await getMcpLogger()?.forceFlush();
});
結果の読み方
nanostores_runtime_overview の健全性サマリー
概要では、ストアを次の3つのカテゴリに分類します。
- アクティブなストアの上位 — イベント総数(変更+アクション)の順に並べられます。数秒で数百件の変更が発生するストアは、パフォーマンス上の懸念となる可能性があります。
- エラーが発生しやすいストア —
action-errorイベントが発生したストアです。エラー件数が多い場合、非同期アクションが失敗していることを示します。 - アンマウントされていないストア — マウント時には確認されているものの、アンマウントされていないストアです。メモリーリークの可能性があります。
nanostores_runtime_coverage
静的なストアグラフと、観測されたランタイムイベントを比較します。
| 用語 | 意味 |
|---|---|
| static-only | AST スキャンで見つかったものの、ランタイムイベントが観測されていないストアです。デッドコード、初期化の遅延、または attachMcpLogger の呼び出し漏れが考えられます。 |
| runtime-only | イベントを受信したものの、スキャナーでは見つからなかったストアです。動的に作成されたストア、ファクトリーパターン、または node_modules 内のストアでよく見られます。 |
| 種類別のカバレッジ | 例:atom: 3/5 (60%) — 5つの atom ストアのうち、3つがランタイムイベントを受信しました。ある種類のカバレッジが0%の場合、通常、その種類のストアに対して attachMcpLogger が呼び出されていないことを意味します。 |
nanostores_find_noisy_stores
windowMs の期間内におけるアクティビティ総数(変更とアクションの合計)でストアをランク付けして返します。変更頻度が目に見える UI の更新に比べて不釣り合いに高い場合、そのストアは「ノイジー」と見なされます。これを使って、再レンダリングが集中する箇所や、計算チェーンの過剰な再計算を特定できます。
プライバシーとセキュリティ
ランタイムロガーは、ローカルマシン上で動作するように設計されています。
- ループバックのみへのバインド — HTTP ブリッジは、
127.0.0.1、localhost、または::1からの接続のみを受け付けます。0.0.0.0へのバインドは明示的にブロックされます。データがマシンの外部に送信されることはありません。 - 送信される情報 — アプリから localhost 経由で MCP サーバーに送信されるのは、ストア名、タイムスタンプ、イベントの種類、および任意の値のスナップショット(200文字に切り詰め)です。Anthropic やその他の第三者に情報が送信されることはありません。
- 永続化されない情報 — イベントはプロセスメモリー内のリングバッファー(最大5,000件)に保持され、サーバーの再起動時に破棄されます。
- 機密データのマスキング —
maskEventを使うと、イベントをまとめて送信する前にクライアント側でフィルタリングまたは編集できます。
initMcpLogger({
maskEvent: event => {
if (event.storeName === "$authToken") return null; // drop entirely
if (event.storeName === "$paymentInfo") return { ...event, newValue: undefined }; // strip value
return event;
},
});
- CORS — ブリッジは、ループバック以外のオリジンからのクロスオリジンリクエストを拒否します。
クエリの例
AI アシスタントに自然言語で質問できます。
静的解析:
- 「ストアのアーキテクチャを分析して、潜在的な問題を見つけてください」
- 「$user が変更されると何が起きますか?サブスクライバーと派生ストアを表示してください」
ランタイムのデバッグ:
- 「最も頻繁に更新されるストアはどれですか?」
- 「コード内で宣言されているものの、ランタイムで一度も使われていないストアはありますか?」
- 「$user ストアをデバッグしてください。静的解析とランタイムの動作を組み合わせてください」
Playwright MCP を使う場合:
- 「ブラウザーでアプリを開いて操作し、再計算を最も多く引き起こすストアを分析してください」
ドキュメント:
- 「computed ストアの使い方を教えてください」
- 「永続ストアのベストプラクティスを教えてください」
アーキテクチャ
┌──────────────────────┐
│ Your Application │
│ │
│ @nanostores/logger │
│ events │
└──────────┬───────────┘
│ HTTP POST (localhost:3999)
▼
┌──────────────────────┐
│ nanostores-mcp │
│ │
│ ┌──────────────┐ │
│ │ Logger Bridge │ │ ← HTTP server for runtime events
│ └──────┬───────┘ │
│ ▼ │
│ ┌──────────────┐ │
│ │ Event Store │ │ ← Ring buffer (5000 events) + stats
│ └──────┬───────┘ │
│ │ │
│ ┌──────┴───────┐ │
│ │ AST Scanner │ │ ← ts-morph static analysis
│ └──────┬───────┘ │
│ │ │
│ ┌──────┴───────┐ │
│ │ Docs Index │ │ ← Auto-detected from node_modules
│ └──────┬───────┘ │
│ │ │
│ ┌──────┴───────┐ │
│ │ MCP Interface│ │ ← Resources, Tools, Prompts
│ └──────────────┘ │
└──────────┬───────────┘
│ MCP Protocol (stdio)
▼
┌──────────────────────┐
│ LLM Client │
│ (Claude, VS Code, …) │
└──────────────────────┘
制限事項と注意点
複数ルート:複数のプロジェクトで同じストア名を使用
複数ルートモードでは、$user という名前のストアが異なる2つのプロジェクトに存在することがあります。ランタイムイベントストアでは複合キー(projectRoot + storeName)を使ってそれぞれを区別しますが、概要ビューではプロジェクト名の表示なしに同じ名前が2回表示される場合があります。結果を明確にするため、複数ルート構成でツールをクエリするときは、必ず projectRoot を指定してください。
静的解析の対象は検出されたファイルのみ
AST スキャナーは、プロジェクトルートから TypeScript/JavaScript のインポートをたどります。実行時に動的に作成されるストア、ファクトリーによって生成されるストア、または node_modules 内にあるストアは静的解析の結果に表示されません。カバレッジレポートでは「ランタイムのみ」として表示されることがあります。
Vue と Svelte の解析にはオプションの依存関係が必要
@vue/compiler-sfc または svelte がインストールされていない場合、スキャン中に .vue/.svelte ファイルは警告なしにスキップされます。これらのファイル形式をすべて対象にするには、開発用依存関係としてインストールしてください。
イベントリングバッファの上限は 5 000 件です
バッファがいっぱいになると、古いイベントは破棄されます。高頻度で更新されるストアには windowMs を使ってクエリ対象を最近のデータに絞るか、initMcpLogger の batchMs を小さくしてイベントをより頻繁に配信し、イベントが集中した際のバッファオーバーフローの可能性を低減してください。
ハブストアの radius は非常に大きくなることがあります
依存関係の多いストア(ハブスコア > 5)では、radius=2 を指定するとプロジェクトグラフの大部分が返されることがあります。まずは radius=1 を使い、より広いコンテキストが必要な場合にのみ値を大きくしてください。
開発
git clone https://github.com/Valyay/nanostores-mcp.git
cd nanostores-mcp
pnpm install
pnpm dev # Run dev server
pnpm build # TypeScript compile
pnpm test # Run vitest
pnpm lint # ESLint
pnpm check # All checks: lint + format + test + build
# Test with MCP Inspector
npx @modelcontextprotocol/inspector pnpm run dev
トラブルシューティング
ロガーがイベントを受信しない場合:
pingツールを使って、ロガーブリッジが有効で稼働していることを確認します- ブラウザーコンソールで、接続の問題に関する
[nanostores-mcp]警告を確認します - サーバー(
NANOSTORES_MCP_LOGGER_PORT)とクライアント URL でポートが一致していることを確認します - シンプルなアトムストアでテストし、イベントが流れることを確認します
ポートの競合:
# Change server port
NANOSTORES_MCP_LOGGER_PORT=4000 npx nanostores-mcp
# Update client
initMcpLogger({ url: "http://127.0.0.1:4000/nanostores-logger" });
TypeScript のエラー:
// Import from the mcpLogger subpath export
import { initMcpLogger, attachMcpLogger } from "nanostores-mcp/mcpLogger";
ドキュメントが見つからない場合:
- サーバーは
node_modules内のnanostoresからドキュメントを自動検出します nanostoresがインストールされていることを確認してください:npm install nanostores- または、
NANOSTORES_DOCS_ROOTにドキュメントディレクトリのパスを手動で設定してください
関連プロジェクト
Nanostores エコシステム:
- nanostores — 小さなステートマネージャー(atom、map、computed、batched、deepMap)
- @nanostores/logger — ロガーとアクションシステム
- @nanostores/persistent — 永続ストア(localStorage、sessionStorage)
- @nanostores/router — SPA ルーター
- @nanostores/i18n — 国際化
- @nanostores/react、@nanostores/vue、@nanostores/preact、@nanostores/solid、@nanostores/lit — フレームワークバインディング
MCP:
- Model Context Protocol — MCP 仕様
- Playwright MCP — ブラウザー自動化(ランタイム解析で nanostores-mcp と連携します)
ライセンス
MIT
コントリビューション
コントリビューションを歓迎します!Issue または PR を作成してください。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。