本文へスキップ

21st.dev

MCP 対応の UI 部品基盤

公式サイトを見る

21st.dev とは

21st.dev は AI の時代に合わせて配線された部品ライブラリーである。選ばれたフロントエンドの部品を眺め、ブログからの写し貼りではなく MCP を通してエージェントに IDE へ取り込ませられる。

できること

  • 設計の意図から部品を検索する
  • AI エージェント経由で直接取り込む
  • 採用前にその場で部品を確認する
  • オープンソースのコードを取り込んで調整する
  • チームの部品の使い方をそろえる

向いている人

  • フロントエンドの開発者
  • デザインエンジニア
  • UI の体系を標準化するチーム

注意点

  • 分類のずれがある。デジタルヒューマンの製品ではなく開発者向けの道具である
  • 取り込んだ部品には元のライセンスが付く。出荷前に確認すること
  • 部品のコードは他の外部依存と同じように確認すること
  • 無料枠には利用の上限がある。条件を確認すること

長所と短所

✓ 良い点

  • MCP 連携は実際に将来を見込んでいる
  • その場でのプレビューが選定を助ける
  • 無料の入口が説明されている

! 注意したい点

  • ライセンスの確認が必要
  • コードの確認は依然として必要
  • 無料枠の上限

よくある質問

What is the MCP angle?

Agents can search and fetch components through the Model Context Protocol inside your IDE.

Are components free to use?

They are open-source based, but check each component's licence.

Is it free?

Free entry is described; confirm limits.

最終評価日: 2026-09-19

その他 MCPサーバー ツール

すべて見る →

評価方法