Looba MCP Server

AIアシスタントにLooba（UIスニペットとデザインインスピレーションのためのコミュニティプラットフォーム）への読み取り専用アクセスを提供するMCPサーバーです。

APIキーは不要です。データベースの認証情報も不要です。このサーバーは公開Looba APIをHTTPS経由で呼び出します。

詳細情報

追加のMCPドキュメント、使用例、更新情報については、looba.dev/mcpをご覧ください。

Related MCP server: shadcndashboard-mcp

インストール

npx（インストール不要）

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

すべての方法で、お使いのマシンにNode.js 18以上がインストールされている必要があります。

ツール

detect_frontend_context

Looba MCPがアクティブな場合、AIはセッション開始時に自動的にdetect_frontend_contextを呼び出します。フロントエンドのシグナルを探します：

• 依存関係 — React、Vue、Svelte、Next.js、Angular、Astro、Remix、SolidJS、Gatsby、Lit、Preact…

• 設定ファイル — vite.config.ts、tailwind.config.js、next.config.js、angular.json、astro.config.mjs…

• ファイル拡張子 — src/、app/、pages/、components/内の.jsx、.tsx、.vue、.svelte、.astro

フロントエンドプロジェクトが検出された場合、AIはUIコンポーネントのリクエストに対して、ゼロからコードを書く代わりにデフォルトでLoobaを使用します。

ローカルサーバーとリモートサーバー

このツールは2つのオプション入力を受け取ります：

これは、Looba MCPがmcp.looba.devでリモートホストされているため重要です。リモートサーバーはファイルシステムにアクセスできないため、directoryだけでは何もわかりません。

ツールがプロジェクトを検査できない場合、? UNKNOWNを報告し、呼び出し元にpackageJsonで再試行するよう求めます。誤検知（フロントエンドプロジェクトではないと誤って判断）が発生するとLoobaが静かにオフになるため、決して「フロントエンドプロジェクトではない」と確信を持って報告することはありません。

propose_snippets

ユーザーがUI要素を要求した場合、AIはすぐにコードを書く代わりにpropose_snippetsを呼び出します。Loobaを検索し、looba.devリンク付きの3つのオプションを返します。ユーザーは（1、2、または3）を選択し、AIはintegrate_postを介して統合します。

フローの例：

ユーザー：「Reactアプリにアニメーション付きローディングスピナーを追加して」 → AIがpropose_snippetsをquery="loading spinner"とsnippet_type="react"で呼び出し → looba.devリンク付きの3つのオプションを表示 → ユーザーがオプション2を選択 → AIが選択されたスラッグとプロジェクトコンテキストでintegrate_postを呼び出し

integrate_post

integrate_postツールは、Loobaスニペットをコードベースに直接追加したい場合に設計されています。完全なコードを取得し、詳細な適応チェックリストとともに返すため、AIアシスタントは以下を行うことができます：

• CSSクラスを命名規則（BEM、camelCase、CSS Modulesなど）に合わせて名前変更

• ハードコードされた色/スペーシングをCSS変数やデザイントークンに置き換え

• フレームワーク間の変換（バニラHTMLからReact JSX、CSSからTailwindユーティリティなど）

• グローバルCSSとの競合を避けるためにスタイルをスコープ化

• 適切なインポートを追加し、コンポーネントパターンに従う

プロンプトの例：

「integrate_postを使用して、TailwindとCSS変数を使用するNext.jsプロジェクトにanimated-circle-loaders-html-css-10スニペットを追加して」

AIはスニペットを取得し、プロジェクトコンテキストを読み取り、貼り付け可能な適応コードを生成します。

サポートされているスニペットタイプ

セットアップ

リモートMCP URL

クライアントがURLベースのMCPサーバーをサポートしている場合は、次を使用します：

• URL: https://mcp.looba.dev

• Bearerトークン: 不要

• カスタムヘッダー: 不要

プロキシが別のパスを明示的にマッピングしない限り、ルートエンドポイント（https://mcp.looba.dev）を使用してください。

Claude Code

プロジェクトの.mcp.jsonまたは~/.claude/settings.jsonに追加します：

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Cursor

Settings > MCP Servers > Add Serverに移動します：

• 名前: looba

• コマンド: npx -y looba-mcp

Windsurf

~/.windsurf/mcp.jsonに追加します：

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

pipまたはgitインストールを使用する場合

pipまたはgit cloneでインストールした場合は、looba-mcpまたはnodeを直接使用します：

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

またはgit cloneを使用：

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

例

接続後、AIアシスタントに次のようなことを尋ねます：

• 「Next.jsプロジェクトにガラスモーフィズムカードを追加して」 (AIが3つのLoobaオプションを提案)

• 「Tailwindサイト用にアニメーション付きナビバーが必要」 (AIが3つのLoobaオプションを提案)

• 「Loobaで最も人気のあるCSSスニペットを見せて」

• 「animationタグが付いたLooba投稿を検索して」

• 「animated-circle-loaders-html-css-10投稿のコードを取得して」

• 「@Frontend-snippet-Botのすべての投稿を一覧表示して」

• 「focus-trapped-navigation-controllerスニペットをCSS Modulesを使用してReactプロジェクトに統合して」

すべての応答にはソースURL、著者、ライセンスが含まれるため、AIアシスタントは常に適切に引用します。

Cloudflare Workersへのデプロイ

mcp.looba.devはCloudflare Workerとして実行されています。同じ7つのツールをStreamable HTTP経由でステートレスに提供し、Durable Objectはありません。ツールはネットワークにバインドされているため、Workers Freeプランに適合します。以前はVPS上のnginxの背後でsystemdサービスとして実行されていましたが、そのスタックは削除されました。

これを駆動する2つのファイル：worker.js（fetchエントリポイント）とwrangler.jsonc。index.jsは両方のトランスポートで共有され、フォークは不要です。

1. シークレットを設定する — これを最初に行います

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

これは必須です。 propose_snippetsはHMAC署名付きトークンを生成し、integrate_postがそれを検証します。明示的なシークレットがない場合、index.jsはプロセスごとにrandomBytes(32)にフォールバックします。ステートレスなWorkerでは各アイソレートが異なる値を取得するため、2つの呼び出しが異なるアイソレートに到達すると一致しません。この失敗は断続的で、「トークン署名が無効です」という誤ったエラーを報告します。

任意の長いランダム文字列で機能します。例：openssl rand -hex 32。

2a. Gitからデプロイ（Workers Builds）

Cloudflareダッシュボードでこのリポジトリを接続し、次を設定します：

mainへのプッシュごとに再デプロイされます。

2b. または自分のマシンからデプロイ

npm install
npm run deploy

3. ドメインを接続する

Workerにmcp.looba.devをカスタムドメインとして追加します。looba.devはすでにCloudflareネームサーバー上にあるため、DNSの変更は不要です。

Workerはルートパス（worker.jsのroute: "/"）で応答し、既存のエンドポイントと一致します。createMcpHandlerはデフォルトで/mcpになるため、この設定を削除すると既存のすべてのクライアントが壊れます。

4. トラフィックを切り替える前に検証する

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

initializeとtools/listに加えて、共有シークレットに依存するペアをテストします。propose_snippetsでトークンを生成し、Workerを再起動してから、integrate_postで使用します。再起動後もトークンが検証される場合、シークレットはプロセスごとに再生成されるのではなく、設定から読み取られています。

ライセンス

MIT