← カタログに戻る

使っているAIを
この手数カタログへ接続する

WazaScout は公開MCP（Model Context Protocol）サーバとして接続できます。Claudeデスクトップアプリ・claude.ai・Claude Code・Codex のいずれからでも、 同じ1本のURLで繋がります。ローカルのフォルダ指定やユーザー名は不要です。 接続後は、AIが240件のカタログを検索し、「ふわっと出して」のような抽象的な指示から候補と実装コードを取得できます。

STEP 1接続先はこの1本だけ

誰が使っても同じURLです。カタログは読み取り専用で、認証情報も個人フォルダの設定も要りません。

https://waza-scout.vercel.app/api/mcp

設定画面に貼るときはURLだけ

下に出てくる claude mcp add … や codex mcp add … はターミナルに打ち込む命令文です。 これをアプリの「カスタムコネクタ」のURL欄に貼ると、URLは'https'で始まる必要があります と怒られます。 設定画面には上の https://…/api/mcp だけを入れてください。

STEP 2使っているアプリで登録する

デスクトップアプリ / claude.ai設定画面にURLを入力（ターミナル不要） Claude Code / Codexターミナルでコマンドを1行実行

A. Claudeデスクトップアプリ・claude.ai

設定 → コネクタ → カスタムコネクタを追加 を開き、2つの欄をこう埋めます。詳細設定（OAuth）は空のままで構いません。

名前
WazaScout
URL
https://waza-scout.vercel.app/api/mcp
OAuth
空欄のまま（認証は不要です）

「追加」を押して一覧に WazaScout が並べば完了です。チャットで「waza-scout でスクロール演出を3つ探して」と頼めます。

B. Claude Code / Codex（ターミナル）

claude mcp add --scope user --transport http waza-scout https://waza-scout.vercel.app/api/mcp

--scope userにより、同じ端末のどのプロジェクトからでも使えます。

codex mcp add waza-scout --url https://waza-scout.vercel.app/api/mcp

STEP 3接続を確認する

ターミナルから登録した場合は、次で登録内容を確認できます。

# Claude Code
claude mcp get waza-scout

# Codex
codex mcp get waza-scout

どの経路で登録した場合も、AIにこう頼めば実際に動いているか分かります。

waza-scout の list_categories を使ってカテゴリ一覧を出し、
「読みやすいスクロール演出」を search_waza で3件探して。

STEP 4使うタイミングを常設化する（CLAUDE.md / AGENTS.md）

MCP接続だけでもツールとして使えますが、いつ使うかをプロジェクトの CLAUDE.md（Codexなら AGENTS.md）に 書いておくと、制作時に参照する条件が明確になります。以下をコピーして追記してください。 

## WazaScout（HTML表現の手数カタログ）

- スライド/LP/Webサイトの構成を作るとき → 各セクションの演出は waza-scout MCP の
  search_waza で候補を検索して選び、採用した技を W番号付き（例: W-042 スクロール吸着）で
  構成メモに記録する
- 「ふわっと」「ぬるっと」「高級感を出して」など抽象的な演出指示を受けたとき →
  その語をそのまま search_waza に渡し、get_waza で取得した code を実装の起点にする
- 実装後 → 使った技のW番号をコメントか納品メモに残す（後から差し替えやすくするため）

HELPつながらないとき

症状原因と対処
URLは'https'で
始まる必要があります		 コネクタのURL欄に claude mcp add … というコマンド全体を貼っています。URL欄には https://waza-scout.vercel.app/api/mcp だけを入れてください。
ツールが出てこない 登録後にアプリまたはセッションの再起動が必要です。Claude Codeは新しいセッションを開き直してください。
認証を求められる このサーバは認証不要です。OAuthの欄は空のままにしてください。

TOOLS提供ツール

ツール引数役割
list_categoriesなし カテゴリ一覧と件数。最初に全体像を掴む。
search_wazaquery, category?,
limit?, minSupport?		 技の検索。技名・プロパティ名のほか「ふわっと」「高級感」等の感覚語でも引ける。結果は軽量（SVGを含まない）。minSupport に「広く対応」を渡すと、主要ブラウザで確実に動く技だけに絞れる。
get_wazaid（または W番号） 技の全情報。実装コード code、動きの図解 svg、近い技 relatedIds を含む。
get_waza_manyids[], includeSvg? 複数の技をまとめて取得（最大20件）。スライド1本分の構成をまとめて実装するときに、何度も呼ばずに済む。
list_tagscategory?, feel?, limit? 実際に使われているタグを多い順に返す。検索が空振りしたとき、feel: true で「ふわっと」「高級感」のような実在の感覚語を確認して引き直せる。

USAGE活用パターン

パターンA — スライド構成時に技を自動で織り込む

構成づくりの段階でカタログを引かせ、演出込みの構成にします。

新サービス紹介スライド（10枚）の構成を作って。
各スライドの演出は waza-scout で検索して選び、
構成表に W番号と技名を併記して。決まったらそのままHTMLで実装して。

パターンB — 抽象的な演出指示を実装に変換する

感覚的な指示ほどWazaScoutが効きます。感覚語タグ（ふわっと・ぬるっと・パッと切替・高級感・没入感…）で検索されます。

このヒーローのキャッチコピー、もっとふわっと出るようにして。
→ AIが search_waza("ふわっと 出現") で候補を引き、
   get_waza の code を起点に実装します。

DATAデータについて