Serendie MCPサーバーは、デザインシステムを利用するユーザーが、AIエージェントを用いて快適にアプリケーションをデザイン・開発するためのModel Context Protocolサーバーです。

このMCPサーバーを、各種AIエージェントに接続することで、Serendie Design Systemが提供するガイドラインやベストプラクティス、コンポーネントやアイコンをはじめとするリソース一覧などをAIが自律的に入手できるようになります。

Model Context Protocolは、AIエージェントが外部のデータソースやサービスに接続するためのオープンなプロトコルです。Serendie MCPサーバーでは、本サイトで公開しているガイドラインや、Serendie UIの型情報などを提供しています。Serendie MCPサーバーを使うことで、Serendie Design Systemに則ったアプリケーション開発ワークフローを実現できます。

Serendie MCP サーバーは、リモートMCPサーバー(Streamable HTTP Transport形式)として公開しており、ローカルでのセットアップなしにすぐに利用を始められます。

MCPサーバーでは「ツール」という単位で、AIエージェントに道具の提供を行います。どのツールを使うのかは、AIエージェントが、プロンプトやコンテキストに基づいて決定します。現在Serendie MCPサーバーが提供しているツールは以下の通りです。

• Serendie UIのセットアップ方法など概要情報 (Overview) の取得ツール
• Serendie UIコンポーネントの一覧とプロパティなどの詳細取得ツール
• デザイントークンの一覧・詳細取得ツール
• Serendie Symbolsの一覧・詳細取得ツール
• 本サイトで提供している各種ガイドラインの取得ツール

各種ツールの実装は、GitHubリポジトリ (serendie/serendie-web) にて確認できます。

自然言語によるプロトタイピング

CursorやClaude Code など各種Agentic Codingツールを用いることで、自然言語によるプロトタイピングが可能ですが、ここにSerendie MCPサーバーを用いることで、Serendie UIを用いた実装がスピーディーに実現できます。

特にSerendie MCPのOverviewツールにより、Serendie UIのイントロダクションが提供されるため、Serendie UIを使うためのセットアップをAIエージェントが自律的行うことができます。また、各種リソース取得ツールを用いることで、AIエージェントはコンテキスト消費量を抑えながら、Serendie UIの活用に必要な知識を得ることができます。これはAgentic Codingにおいて質の高いプロトタイピングの実現に繋がります。

デザインから実装する

Serendie UIは、Figmaコンポーネント(デザイン)とReactコンポーネント(実装) がセットで提供されていることが特徴の一つです。FigmaのMCPサーバーであるFigma MCP サーバーと、Serendie MCPサーバーを併用することで、Serendie UI Kitによるデザインを、高速かつ高品質に実装することが可能です。

Figma MCPサーバーを用いることで、AIエージェントは、デザインデータ (レイヤー情報) の読み取りが可能になります。これにより、 「現在選択しているFigma上のデザインを、Serendie UIで実装して」 のように伝えることで、AIエージェントは自律的にSerendie UIのセットアップ、各種コンポーネントの使い方などの知識を得ながら、プロジェクト環境に応じた高品質なコードを生成できます。

Claude Code

下記のコマンドをターミナルから入力してください

claude mcp add --transport http serendie-mcp https://serendie.design/mcp

VSCode / GitHub Copilot

1. ショートカット ⌘ Shift P を押下

   1. MCP サーバーをグローバルに使いたい場合： MCP: ユーザー設定を開く を選択します。
   2. 現在のワークスペース内でのみ使いたい場合： MCP: ワークスペースフォルダー MCP 設定を開く を選択します。

2. mcp.jsonファイルの中に、下記のようにサーバーの設定を記入後、スタートを押下

{
  "inputs": [],
  "servers": {
    "serendie-mcp": {
      "url": "https://serendie.design/mcp",
      "type": "http"
    }
  }
}

Cursor

こちらのリンクをクリックすることで、自動的にMCPサーバーが追加されます。