mcpField
L
liquefy-ui

liquefy-ui

ローカル
liquefy-ui.com開発ツール62 週間前に更新

liquefy-ui について

@liquefy-ui/mcpは、liquefy-uiのAPIを正確に調べるためのコーディングエージェント向けMCPサーバーです。カタログはビルド時にライブラリーのソースから生成され、実行時の依存関係やネットワーク接続は不要です。

主な機能

  1. 01コンポーネントの一覧表示と絞り込み
  2. 02エクスポートと型宣言の確認
  3. 03名前・説明・型の検索
  4. 04インポートを書き換えたソースの取得
  5. 05テーマ別デザイントークンの参照
  6. 06ライブラリーソースからカタログを生成

活用シーン

  1. 01コーディング中に有効なコンポーネントプロパティを確認
  2. 02名前や説明からコンポーネントを検索
  3. 03shadcnエイリアスを使ったソースをコピー

MCP 対応

MCPクライアントに、liquefy-uiの規約、コンポーネント一覧と詳細、ソース、検索、トークン参照のツールを提供します。

設定

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

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

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

パッケージ
npm@liquefy-ui/mcp0.1.4

ツール

8

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

パラメーター型必須説明
kindenumいいえコンポーネント("ui")、フック、共有内部モジュール("lib")に絞り込みます。ui | hook | lib

詳細

@liquefy-ui/mcp

liquefy-ui の実際の API をもとに質問に回答する Model Context Protocol サーバーです。コーディングエージェントが存在しない props をでっち上げるのを防ぎます。

# Claude Code
claude mcp add liquefy-ui -- npx -y @liquefy-ui/mcp
{
  "mcpServers": {
    "liquefy-ui": { "command": "npx", "args": ["-y", "@liquefy-ui/mcp"] }
  }
}
ツール回答内容
get_conventions間違えやすいルール:クライアント境界、必須のプロバイダー、存在しない props
list_componentsライブラリ内のすべての項目。ui / hook / lib で絞り込み可能
get_component1 つのコンポーネントのエクスポートと、エクスポートされたすべての型宣言(原文のまま)
search_components名前、説明、型宣言を対象にしたフリーテキスト検索
get_component_sourceコピーして使えるソース。インポートは shadcn エイリアスに書き換え済み
get_tokens--lq-* トークンとその実際の値(テーマスコープごと)

ドキュメント:https://liquefy-ui.com/#/guides/ai-tooling

カタログはビルド時にライブラリのソースから生成されるため、パッケージに含まれる内容と食い違うことはありません。サーバーにランタイム依存関係はなく、ネットワークにも一切アクセスしません。

コメント

MCP は初めてですか?

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

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