Sleek

Sleek MCP サーバー

モバイルアプリを平易な言葉で説明すると、チャット内に画像としてレンダリングされた、本物の編集可能な画面が返ってきます。その画面をもとに、コーディングエージェントが動作するアプリを構築できます。

Sleek は、AI モバイルアプリのデザインツールです。このリモート MCP サーバーを使うと、Claude、ChatGPT、Codex、Cursor など、あらゆる MCP クライアントがデザインを依頼できます。「オンボーディング、ホーム、商品詳細、カートを備えた植物ショップアプリをデザインして」と伝えると、アシスタントがプロジェクトを作成し、デザインエージェントを実行して、画面を表示します。さらに、画面を開いて編集したり、Figma やコードにエクスポートしたりできるリンクを渡します。

インストールは不要です。サーバーは Sleek のインフラストラクチャ上で稼働します。クライアントに URL を指定してサインインするだけです。

https://sleek.design/api/mcp

• MCP を初めて使いますか？ MCP は、AI クライアントが外部のツールに接続できるようにするオープンスタンダードです。「リモート」とは、ツールがホストされていることを意味するため、上記の URL だけで接続できます。
• アカウントが必要ですか？ sleek.design で無料アカウントを作成できます。
• MCP 接続ではなくスキルをお探しですか？ sleekdotdesign/agent-skills をご覧ください。

このリポジトリには、サーバーを参照するマニフェストとドキュメントのみが含まれています。サーバーコード、スクリプト、フック、テレメトリーは含まれていません。

クイックスタート

1. 以下の該当するセクションに従ってクライアントを接続し、プロンプトが表示されたら Sleek にサインインします。
2. 1 文でアプリ全体を依頼します。「Sleek で植物ショップアプリをデザインしてください。オンボーディング、注目の植物を掲載したホーム、植物の詳細、カート、プロフィールを含めてください。温かみのあるミニマルなスタイルで。」
3. アシスタントがレンダリングされた画面を表示し、プロジェクトへのリンクを渡します。リンクを開いて編集するか、Figma、HTML、React にエクスポートできます。

アプリ全体を1 回のリクエストで送信してください。Sleek のデザインエージェントは画面一式をまとめて計画するため、5 画面を 1 回のメッセージで依頼すればまとまりのあるアプリになりますが、5 回に分けて依頼すると互いに無関係な画面が 5 つ生成され、料金も 5 回分かかります。

クライアントを接続する

どのクライアントでも同じ URL を使用します。

OAuth でサインインしてください。 Sleek への接続にはこの方法を使用します。URL を追加すると、クライアントがブラウザーを開き、アクセスを承認すれば完了です。コピーや保存は不要で、どちら側からでも接続を取り消せます。このページに掲載されているすべてのクライアントが OAuth に対応しているため、利用するクライアントの手順に従えば接続は完了します。

最初から API キーを使わないでください。 API キーを使えるのは、OAuth にまったく対応していないクライアントだけです。API キーは OAuth の完全な許可と同等の権限を持つ長期間有効な秘密情報で、自動的には期限切れになりません。また、API キーを設定すると、クライアントにブラウザーでのサインインが表示されなくなります。OAuth がうまくいかない場合は、別の方法で回避するのではなく、その問題を解決してください。よくある原因についてはトラブルシューティングのセクションをご覧ください。以下の API キーの手順は、意図的に折りたたんであります。

Claude.ai、Claude Desktop、Cowork、モバイル

カスタムコネクターは Free（コネクター 1 つ）、Pro、Max、Team、Enterprise の各プランで利用できます。Claude はお使いのデバイスではなく、Anthropic のクラウドから Sleek に接続します。

Pro または Max プランの場合：

1. Customize → Connectors を開きます。
2. + をクリックし、Add custom connector を選択します。
3. リモート MCP サーバーの URL として https://sleek.design/api/mcp を入力します。
4. Advanced settings は空欄のままにします。Claude は Sleek に自動的に登録されます。
5. Add をクリックして Sleek にサインインし、アクセスを承認します。

Team または Enterprise の場合は、Owner が Organization settings → Connectors → Add で 1 度追加します（Custom にカーソルを合わせ、Web を選択して、同じ URL を入力します）。その後、メンバーは Customize → Connectors を開き、Owner が追加した項目を見つけて Connect をクリックします。

接続を解除するには、Customize → Connectors を開き、Remove を選択します。

7ef50bea-9fe8-47bb-8163-68a0e21395ab

claude mcp add --transport http sleek https://sleek.design/api/mcp
claude mcp login sleek

Claude Code 内の /mcp からサインインすることもできます。

または、このリポジトリのマーケットプレイスからプラグインとしてインストールできます。

/plugin marketplace add sleekdotdesign/mcp
/plugin install sleek@sleek

その後、同じ方法でサインインします。プラグインのサーバーは plugin:sleek:sleek として表示されます。.mcp.json` にはサーバー定義のみが含まれており、フック、スキル、エージェント、コマンドはありません。

export SLEEK_API_KEY=sk_...   # in ~/.zshrc or ~/.bashrc
claude mcp add --transport http sleek https://sleek.design/api/mcp \
  --header 'Authorization: Bearer ${SLEEK_API_KEY}'

Codex CLI と ChatGPT デスクトップアプリ

codex mcp add sleek --url https://sleek.design/api/mcp
codex mcp login sleek

ChatGPT デスクトップアプリ、Codex CLI、IDE 拡張機能は、この設定を共有します。

codex mcp add sleek --url https://sleek.design/api/mcp --bearer-token-env-var SLEEK_API_KEY

[mcp_servers.sleek]
url = "https://sleek.design/api/mcp"
bearer_token_env_var = "SLEEK_API_KEY"

ChatGPT

1. Settings → Security and login を開き、Developer mode をオンにします。利用できるかどうかは、アカウントとワークスペースのポリシーによって異なります。
2. ChatGPT の Plugins ページに移動し、プラスボタンをクリックします。
3. 名前（Sleek）と説明を入力します。
4. Connection に https://sleek.design/api/mcp を入力します。
5. 接続を作成し、Sleek にサインインします。

認証方式を尋ねられた場合は、OAuth を選択し、クライアント ID とシークレットは空欄のままにします。

Cursor

これをブラウザーのアドレスバーに貼り付けると、Cursor にサーバーのインストールを促す画面が表示されます。

cursor://anysphere.cursor-deeplink/mcp/install?name=sleek&config=eyJ1cmwiOiJodHRwczovL3NsZWVrLmRlc2lnbi9hcGkvbWNwIn0=

または、~/.cursor/mcp.json（すべてのプロジェクト）か .cursor/mcp.json（1 つのプロジェクト）に手動で追加します。

{ "mcpServers": { "sleek": { "url": "https://sleek.design/api/mcp" } } }

サーバーを有効にすると、Cursor が OAuth サインインを実行するため、それだけで設定は完了です。それがどうしてもできない場合に限り、ヘッダーを追加します。Cursor は ${env:NAME} を解決します。

{ "mcpServers": { "sleek": { "url": "https://sleek.design/api/mcp", "headers": { "Authorization": "Bearer ${env:SLEEK_API_KEY}" } } } }

その他の MCP クライアント

Streamable HTTP トランスポートを使用して、リモートサーバーを追加します。type の値はクライアントによって異なり（http、streamable-http、または省略）、次のようになります。

{ "mcpServers": { "sleek": { "type": "streamable-http", "url": "https://sleek.design/api/mcp" } } }

MCP 認可を実装しているクライアントは、保護されたリソースのメタデータから必要な情報をすべて取得し、自動的に登録するため、通常はこれだけで設定が完了します。OAuth をまったくサポートしていないクライアントに限り、"headers": { "Authorization": "Bearer sk_..." } を追加する必要があります。

リクエストできること

1 つのメッセージでアプリ全体をデザインできます。

Sleek で植物ショップのアプリをデザインしてください。オンボーディング、注目の植物を掲載したホーム画面、植物の詳細、カート、プロフィールを用意します。温かみのあるミニマルなスタイルにしてください。

アシスタントがプロジェクトを作成し、概要全体を 1 回のデザイン実行として送信して、新しい画面を 1 枚の画像にレンダリングし、プロジェクトのリンクを共有します。1 回の実行で、課金も 1 回です。

すでにあるものを無料で確認できます。

植物ショップのプロジェクトから、カート画面とプロフィール画面を見せてください。

一覧表示とレンダリングは無料なので、プロジェクトを見てもクレジットは消費されません。

画面を 1 つ編集できます。

植物の詳細画面で、「カートに追加」ボタンを画面下部の固定バーに移動し、価格を大きくしてください。

エージェントは新しい画面を作成するのではなく、その画面を直接編集します。デザイン実行となるため、クレジットを消費します。

エクスポート

画面はアプリの画像ではなく、実際のデザインファイルです。アシスタントから届いたプロジェクトのリンクを開き、そこからエクスポートします。

• Figma。 Figma ボタンをクリックし、任意の Figma ファイルに貼り付けます。画面はネイティブの、完全に編集可能な Figma レイヤーとして取り込まれます。プラグインは不要です。
• コード。 画面を HTML、または Tailwind CSS を使った React としてエクスポートします。

どちらも Free を含むすべてのプランで利用できます。作成したデザインもコードもすべてお客様の所有物であり、商用利用も可能です。

アシスタントは get_component を使って、生成された画面の HTML を会話に直接取り込むこともできます。チャットを離れずに、画面を独自のコードベースに合わせて調整したい場合に便利です。

料金

デザインの実行には、Sleek ワークスペースの AI クレジットを使用します。一覧表示、読み取り、レンダリングは無料です。

新しい画面の作成には約 30 クレジット、編集には変更量に応じて 5〜30 クレジットかかります。

無料アカウントには、デザインを約 1 回実行できる分のトライアルクレジットが一度だけ付与されます。継続的に利用するには、Pro プラン以上が必要です。料金は月額 $69、または年額 $360 の年払いで月額 $30 です。毎月 20,000 AI クレジットが付与され、約 650 画面を作成できます。現在のプランについては、sleek.design/pricing をご覧ください。

ツール

サーバーは 11 個のツールを公開しています。アシスタントが適切なツールを選ぶため、この表は参照用です。

ツールを直接操作する場合に重要な詳細は次のとおりです。

• design は、概要全体を 1 つの message として受け取ります。オプションで、既存の画面を編集するための screenId、スタイルを模倣するために list_references から取得する referenceId、視覚的な入力用の imageUrls、再試行時に 2 回目の料金を発生させず元の実行結果を返す idempotencyKey、および wait（デフォルトは true）を指定できます。待機時間の上限は 270 秒です。上限に達すると呼び出しは running を返し、その後 get_design_run をポーリングします。クライアントがそれより早くタイムアウトする場合は、最初からポーリングするために wait を false に設定してください。
• 画面には2 つの IDがあります。screenId はキャンバス上のフレームを指し、画面を編集する際に design が使用します。list_components が id として返すコンポーネント ID は、screenshot と get_component が使用します。デザイン実行では、対象となる各画面について両方の ID が返されます。また、list_components と get_component は、コンポーネントの id の隣に screenId を返します（コンポーネントがキャンバス上にない場合は null）。コンポーネント ID を screenId として渡さないでください。
• 1 つのプロジェクトで同時に実行できるデザイン実行は 1 つだけです。競合が発生した場合は、現在の実行が完了するまで get_design_run をポーリングするか、cancel_design_run を呼び出してから再試行してください。
• 失敗した実行には error.url が含まれる場合があります。通常、クレジットの追加またはプランのアップグレードによって問題を解決する場所です。クライアントはこの URL を引き渡してください。
• delete_project には confirm: true が必要です。削除するプロジェクトの名前を確認してから実行してください。
• screenshot は 1 回の呼び出しで最大 4 画面をレンダリングします。それ以上をレンダリングする場合は、複数回に分けてください。

トラブルシューティング

サインインする前に、Claude Code で sleek が接続済みと表示されます。 これは想定どおりです。Sleek では、どのクライアントでもログインせずにサーバー名とツールの一覧を読み取れるため、接続は成功し、認証はツールの実行時にのみ確認されます。サインインを省略すると、最初のツール呼び出しが拒否され、その後 Claude Code で sleek が認証を必要とする状態として表示されます。先にサインインしておけば、この往復を避けられます。

API キーが機能せず、OAuth のプロンプトも表示されません。 Authorization ヘッダーを設定すると、Claude Code は拒否されたキーをサインインする理由ではなく接続失敗として扱うため、OAuth にフォールバックしません。キーを確認するか、ヘッダーを削除して OAuth を使用してください。

URL をブラウザーで開くと 405 が返されます。 これは仕様です。このエンドポイントが受け付けるのは POST のみです。サーバーはステートレスで、呼び出しの間に接続を開いたままにしません。

claude.ai と Claude Code の両方で、すでに Sleek に接続しています。 Claude Code は同じ URL を参照するエントリーを重複排除し、/mcp では 1 つだけをアクティブにします。

クライアントを使わずにキーを確認するには：

curl -s -X POST https://sleek.design/api/mcp \
  -H "Authorization: Bearer $SLEEK_API_KEY" \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json, text/event-stream' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"list_projects","arguments":{}}}'

認証とプライバシー

このサーバーは、OAuth 2.1 による標準の MCP 認可を実装しています。認可コードと PKCE（S256）、動的クライアント登録、および openid email profile offline_access スコープに対応しています。アクセストークンの有効期間は 1 時間で、クライアントが自動的に更新します。Sleek の認可サーバーは Supabase Auth インスタンスであり、保護されたリソースのメタデータに記載されています。

許可する内容。 同意画面を承認すると、クライアントがお客様の Sleek ワークスペースでお客様に代わって操作できるようになります。プロジェクトの一覧表示、作成、削除、画面のデザインと編集、デザインの実行でワークスペースのクレジットを使用することができます。お客様のアカウントでできない操作はできません。

取り消し方法。 クライアント側では、コネクターを削除してください（claude.ai：カスタマイズ → コネクター → 削除、Claude Code：/mcp で 認証をクリア、または claude mcp logout sleek、あるいは保存済みトークンも削除する claude mcp remove sleek）。Sleek 側では、sleek.design のアカウントから許可または API キーを取り消すか、[email protected] にメールでお問い合わせください。

API キーは既定ではなく、代替手段です。 sleek.design/agents/setup で取得できるキーは、OAuth の許可と同じアクセス権を持つ秘密情報ですが、安全対策はありません。有効期限がなく、デバイスに紐付けられておらず、読み取った人は誰でも、取り消されるまでお客様のワークスペースにアクセスできます。OAuth を利用できない場合に限り使用してください。環境変数に保存し、コミットするファイルには決して含めず、漏えいしたらすぐに取り消してください。

ネットワーク。 接続先は sleek.design とその認可サーバーのみです。このリポジトリにはコード、フック、テレメトリーは含まれておらず、プラグインマニフェストにもサーバーの定義以外は追加されていません。Sleek が保存する情報とその保存期間については、プライバシーポリシーをご覧ください。

サポート

[email protected] にメールでお問い合わせいただくか、エージェント向けドキュメントをご覧ください。セキュリティに関する報告については、SECURITY.mdをご覧ください。メンテナーの方は、docs/publishing.mdをご覧ください。

MIT ライセンスの下でライセンスされています。LICENSEをご覧ください。