mcpField
N
Nanostores MCP

Nanostores MCP

ローカル
github.com開発ツール327 週間前に更新

Nanostores MCP について

Nanostores MCP は、Nanostores を使う開発者向けの MCP サーバーです。AI アシスタントによる構成の調査、実行時の活動分析、ドキュメント検索を支援し、AST 静的解析と任意のライブ監視を組み合わせます。

主な機能

  1. 01AST によるストアと依存関係のスキャン
  2. 02ストア概要と依存グラフの作成
  3. 03任意の実行時イベント監視
  4. 04パフォーマンスと活動の分析
  5. 05Nanostores ドキュメント検索

活用シーン

  1. 01プロジェクト内のストア関係を把握
  2. 02ストア変更の影響を追跡
  3. 03更新頻度やエラーの多いストアを特定
  4. 04Nanostores の使い方を検索

MCP 対応

MCP のツール、リソース、プロンプトを通じて、Nanostores のプロジェクト分析とドキュメント検索を提供します。任意の実行時監視には `@nanostores/logger` のイベントを使用します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"nanostores": {
"command": "npx",
"args": [
"-y",
"nanostores-mcp"
]
}
}
}
起動コマンドnpx -y nanostores-mcp

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmnanostores-mcp0.1.2

ツール

12

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
forcebooleanいいえキャッシュを回避して、スキャンを強制的に再実行します。
compactbooleanいいえ完全な store/subscriber リストではなく、簡潔なディレクトリレベルの概要を返します。個々の store の詳細ではなく、store の配置場所をトークン効率よく把握したい場合に使用します。
rootUristringいいえ

詳細

Nano Stores MCP

Nano Stores logo

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 に「ストアのアーキテクチャを分析して」や「最も頻繁に更新されるストアはどれ?」と尋ねてみましょう。


README の画像 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-sfcVue SFC(.vue)ファイルのスキャン
svelteSvelte(.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_ROOTcwdプロジェクトのルートパス
NANOSTORES_MCP_ROOTS—複数プロジェクト設定用の、プラットフォーム区切りのルート(Unix では :、Windows では ;)
WORKSPACE_FOLDER—NANOSTORES_MCP_ROOT のエイリアス — VS Code や一部のエディターによって自動設定されます
WORKSPACE_FOLDER_PATHS—NANOSTORES_MCP_ROOTS のエイリアス — 一部のエディターによって自動設定されます
NANOSTORES_MCP_LOGGER_ENABLEDtruefalse または 0 に設定すると、ランタイムイベントの収集とロガーブリッジを無効にします
NANOSTORES_MCP_LOGGER_PORT3999ロガーブリッジ用の HTTP ポート
NANOSTORES_MCP_LOGGER_HOST127.0.0.1バインドするホスト。指定可能な値:127.0.0.1、localhost、::1
NANOSTORES_DOCS_ROOT自動検出ドキュメントディレクトリのパス
NANOSTORES_DOCS_PATTERNS**/*.mdドキュメント用の、カンマ区切りの glob パターン
プロジェクトルートの解決方法

サーバーは、次の優先順位でワークスペースのルートを選択します:

  1. 環境変数(最優先) — NANOSTORES_MCP_ROOTS / NANOSTORES_MCP_ROOT / WORKSPACE_FOLDER_PATHS / WORKSPACE_FOLDER
  2. クライアントのルート — roots/list 機能を通じて MCP クライアントから報告されるルート(一部のエディターによって自動設定されます)
  3. 現在の作業ディレクトリ — 環境変数もクライアントのルートも設定されていない場合のフォールバックとして 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_searchquery(全文検索)、storeKind(atom、map、computed、persistentAtom など)、またはその両方でドキュメントを検索します。オプション:limit(デフォルトは 10)、tags

検索結果に含まれるページの全内容を読むには、nanostores://docs/page/{id} リソースを使用してください。

ユーティリティ

ツール説明
nanostores_pingサーバーのヘルスチェックとロガーブリッジの状態
nanostores_clear_cacheプロジェクトのインデックスキャッシュを消去し、再スキャンを実行
MCP プロンプト
プロンプトパラメーター説明
explain-projectfocus (optional)AI がガイドする、プロジェクトのストアアーキテクチャの説明です。focus で機能やドメインを絞り込めます(例:"cart"、"auth")
explain-storestore_name (required)特定のストアの実装と使用方法を詳しく解説します
debug-storestore_name (required)静的データとランタイムデータを組み合わせた包括的な分析です
debug-project-activity—プロジェクト全体のパフォーマンス分析と最適化
docs-how-totask (required)ドキュメントに基づく、Nanostores のタスクを段階的に進めるためのガイドです(例:「map ストアを localStorage に同期するには?」)
高度なツール引数

多くのツールは、動作を大きく変える次の省略可能な引数を受け付けます。

ArgumentTypeUsed inDescription
storeIdstringstore_summary, store_subgraph, store_impactストアの正確な識別子 — 形式:store:src/stores.ts#$counterName。両方が指定されている場合は、name より優先されます。
namestringstore_summary, store_subgraph, store_impactストア名(例:"$user")。storeId が指定されていない場合に使用されます。
radiusnumber (0–10, default 2)nanostores_store_subgraphストアを中心とした BFS のホップ数です。1 = 直接の依存関係のみ、2 = 依存関係の依存関係までです。警告: 接続数の多いハブストア(ハブスコア > 5)では、radius ≥ 2 にするとプロジェクトの大部分が返される場合があります。まずは 1 から始めてください。
projectRootstringほとんどのツール複数ルート構成で分析するプロジェクトルートです。省略すると、最初に設定されたルートが使用されます。複数ルートのプロジェクトでは、必ず指定してください。
windowMsnumberstore_activity, find_noisy_stores, runtime_overview遡って確認する時間範囲(ミリ秒単位。例:60000 = 直近 60 秒)です。この時間範囲に該当するイベントに絞り込みます。
kindsstring[]nanostores_store_activityイベントの種類で絞り込みます。値:"mount"、"unmount"、"change"、"action-start"、"action-end"、"action-error"。
actionNamestringnanostores_store_activity特定のアクション(例:"increment")にイベントを絞り込みます。
compactbooleanscan_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-onlyAST スキャンで見つかったものの、ランタイムイベントが観測されていないストアです。デッドコード、初期化の遅延、または 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

トラブルシューティング

ロガーがイベントを受信しない場合:

  1. ping ツールを使って、ロガーブリッジが有効で稼働していることを確認します
  2. ブラウザーコンソールで、接続の問題に関する [nanostores-mcp] 警告を確認します
  3. サーバー(NANOSTORES_MCP_LOGGER_PORT)とクライアント URL でポートが一致していることを確認します
  4. シンプルなアトムストアでテストし、イベントが流れることを確認します

ポートの競合:

# 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 エコシステム:

MCP:

ライセンス

MIT

コントリビューション

コントリビューションを歓迎します!Issue または PR を作成してください。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。