Untitledui Mcp

UntitledUI MCP

AI エージェントが UI を一から生成するのではなく、実際の UntitledUI コンポーネントを取得できる MCP サーバーです。

理由

AI ツールは機能的な UI を生成できますが、仕上がりの洗練度や一貫性が、プロが設計したシステムには及ばないことがよくあります。UntitledUI は、入手可能なコンポーネントライブラリの中でも特に洗練されたものの 1 つです。この MCP を使うと、AI から直接アクセスできます。

パターンからモーダルを生成する代わりに、AI は細部まで丁寧に作り込まれた実際の UntitledUI モーダルを取得できます。

クイックスタート

1. UntitledUI スターターキットから始める

UntitledUI コンポーネントを使うには、特定の Tailwind 設定、デザイントークン、プロバイダーが必要です。手軽に始めるには、公式スターターキットを使いましょう。

Next.js：

git clone https://github.com/untitleduico/untitledui-nextjs-starter-kit my-app
cd my-app && npm install

Vite：

git clone https://github.com/untitleduico/untitledui-vite-starter-kit my-app
cd my-app && npm install

これらのスターターキットには、以下があらかじめ設定されています。

• すべての UntitledUI デザイントークンを含む Tailwind CSS
• ライト／ダークモード用のテーマプロバイダー
• トースト通知
• ルーティングの設定
• 必要な依存関係一式

2. MCP サーバーを追加する

Claude Code：

claude mcp add untitledui -- npx untitledui-mcp

Cursor / VS Code — .cursor/mcp.json に追加します。

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

これで認証なしで基本コンポーネント（ボタン、入力欄、セレクト、アバター、バッジなど）を利用できます。

3. Pro コンポーネントの認証を行う（任意）

アプリケーションコンポーネント（モーダル、サイドバー、テーブル、ダッシュボード）やマーケティングセクションにアクセスするには、UntitledUI Pro ライセンスで認証します。

npx untitledui@latest login

ブラウザーが開いて認証が行われ、ライセンスキーが ~/.untitledui/config.json に保存されます。MCP はこのファイルを自動的に検出します。

または、MCP の設定でキーを手動で設定します。

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["-y", "untitledui-mcp"],
      "env": {
        "UNTITLEDUI_LICENSE_KEY": "<your-key>"
      }
    }
  }
}

4. セットアップを確認する

npx untitledui-mcp --test

推奨ワークフロー

1. スターターキットから始める — Tailwind が適切に設定されていない既存のプロジェクトに、UntitledUI コンポーネントを追加しようとしないでください。スターターキットを使えば、すべての設定が行われます。

2. AI にコンポーネントの取得を依頼する — プロジェクトのセットアップが完了したら、AI に特定のコンポーネントの追加を依頼します。

   • 「設定モーダルを追加して」
   • 「サイドバーのナビゲーションが必要です」
   • 「ユーザープロフィールのドロップダウンを追加して」

3. サンプルからページ全体を構築する — 大きな機能を作る場合は、ページテンプレートから始めます。

   • 「利用できるダッシュボードのテンプレートを見せて」
   • 「ランディングページのサンプルを取得して」

利用可能なツール

AI は以下のツールを利用できます。

ツール	内容
search_components	名前または説明からコンポーネントを検索します
list_components	カテゴリーを閲覧します
get_component_with_deps	コンポーネントとすべての依存関係を取得します
get_component	コンポーネントのみを取得します
get_component_file	個別のファイルを取得します（大きなコンポーネント向け）
list_examples	利用可能なページテンプレートを閲覧します
get_example	ページテンプレート全体を取得します

できること

スクリーンショットからあらゆる UI を再現する

You: [paste screenshot] "Recreate this with UntitledUI components"

AI analyzes the design → identifies matching components
AI fetches sidebar, header, cards, tables → all with dependencies
AI assembles → production-ready page matching your screenshot

数秒でページ全体を構築する

You: "Build me a SaaS pricing page with 3 tiers and a FAQ section"

AI fetches marketing/pricing-sections + marketing/faq-sections
AI combines components → complete pricing page with toggle for monthly/annual
Result: Professional pricing page with all interactions working

アプリのシェル全体をセットアップする

You: "Set up the main app layout with collapsible sidebar and header with user dropdown"

AI fetches application/sidebars + application/headers + base components
AI wires up navigation state, theme toggle, user menu
Result: Complete app shell ready for your content

UntitledUI のテンプレートからページを複製する

You: "I want a dashboard like the one in dashboards-01"

AI calls get_example { path: "application/dashboards-01/01" }
→ Returns 27 files: page layout, charts, tables, cards, all base components
→ Ready to customize with your data

コンポーネントを自由に組み合わせる

You: "Create a settings page with sections for profile, notifications, billing, and team members"

AI searches → finds matching components for each section
AI fetches settings panels, forms, tables, modals
AI composes → cohesive settings page with consistent styling

機能をすばやく開発する

You: "Add a command palette like Linear/Notion with keyboard shortcut"

AI fetches application/command-menus
→ Complete command palette with search, keyboard navigation, sections
→ Just wire up your actions

レスポンス形式

{
  "primary": {
    "name": "settings-modal",
    "files": [{ "path": "settings-modal.tsx", "code": "..." }],
    "baseComponents": ["button", "input", "select"]
  },
  "baseComponents": [
    { "name": "button", "files": [...] },
    { "name": "input", "files": [...] }
  ],
  "allDependencies": ["@headlessui/react", "clsx"],
  "estimatedTokens": 12500,
  "fileList": [
    { "path": "settings-modal.tsx", "tokens": 850 },
    { "path": "button/button.tsx", "tokens": 420 }
  ]
}

レスポンスにはトークン数の推定値が含まれており、AI エージェントがコンテキストの上限を管理するのに役立ちます。非常に大きなレスポンス（25K トークン超）の場合、AI は get_component_file を使って個別のファイルを取得できます。

トラブルシューティング

コンポーネントの表示がおかしい／スタイルが適用されない

UntitledUI コンポーネントでは、bg-primary や text-display-md などのカスタム Tailwind クラスと、標準の Tailwind に含まれていないデザイントークンを使用します。

解決策： UntitledUI スターターキットを使用してください。スターターキットには、必要な Tailwind 設定とデザイントークンがすべて含まれています。

基本コンポーネントのインポートエラー

Pro コンポーネントは、基本コンポーネント（ボタン、入力欄など）に依存します。get_component_with_deps でコンポーネントを取得すると、依存関係もすべて自動的に含まれます。

解決策： Pro コンポーネントには get_component ではなく、get_component_with_deps を使用していることを確認してください。

必要条件

• Node.js 18+
• UntitledUI Pro ライセンス（Pro コンポーネントのみ）

クレジット

UntitledUI は Jordan Hughes が作成しています。

• Twitter/X
• Dribbble
• X の UntitledUI
• UntitledUI Pro を入手

ライセンス

MIT