Lism Tips

MCP サーバー

AI のコーディングツールに Lism CSS の資料を読ませる MCP サーバー（@lism-css/mcp）の設定のしかたと、できることを説明します。

@lism-css/mcp は、AI のコーディングツール（Claude Code・Cursor・VS Code など）が、Lism CSS のドキュメントやクラスの情報を引けるようにするための MCP サーバーです。入れておくと、AI が Lism の書き方を調べながらコードを書けるようになります。

MCP ってなに？#

MCP は Model Context Protocol（モデル・コンテキスト・プロトコル）の略です。AI のツールが、外にある資料や道具を使うときの「つなぎ方の決まり」です。

  • MCP サーバー：資料や道具を、決まった形で AI に差し出すプログラム
  • MCP クライアント：それを使う側の AI のツール

つなぎ方が決まっているので、1つの MCP サーバーを、いろいろな AI のツールから同じように使えます。

設定のしかた#

どのツールでも、npx -y @lism-css/mcp というコマンドで MCP サーバーを動かすように設定します。npx は、npm のパッケージをその場で取ってきて動かすコマンドです（Node.js が入っている必要があります）。

Claude Code#

ターミナルで次のコマンドを1回実行します。

bash
claude mcp add lism-css -- npx -y @lism-css/mcp

Cursor#

プロジェクトの .cursor/mcp.json に書きます。

json
{
  "mcpServers": {
    "lism-css": {
      "command": "npx",
      "args": ["-y", "@lism-css/mcp"]
    }
  }
}

VS Code#

プロジェクトの .vscode/mcp.json に書きます。Cursor と違い、いちばん外の名前が servers で、"type": "stdio" が入ります。

json
{
  "servers": {
    "lism-css": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@lism-css/mcp"]
    }
  }
}

できること#

AI に頼めること たとえば
部品のことを聞く 「Tabs にはどんな Props があって、中に何を入れる？」
短い名前の意味を聞く 「fz は何の CSS？」（答えは font-size。p なら padding）
決まった値を聞く 「余白や色、文字の大きさのトークンは何がある？」
資料を言葉で探す ドキュメント全体から、言葉を入れて探す
今の CSS を Lism に置きかえる 手元の CSS を渡すと、合いそうな Props やコンポーネントを出してくれる

くわしくは、GitHub の @lism-css/mcp のページにあります。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧