ui-chan-mcp 0.5.0

package/docs/SETUP.html

@@ -0,0 +1,684 @@
+<title>ういを動かすまで</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap">
+
+<style>
+  :root {
+    --ground: #eaeef5;
+    --card: #f7f9fc;
+    --ink: #1b2230;
+    --ink-soft: #55607a;
+    --ink-faint: #8b94a8;
+    --rule: #ccd4e4;
+    --accent: #4f5fc9;
+    --accent-soft: #dfe3fa;
+    --warm: #d1804f;
+    --warm-soft: #f6e4d8;
+    --drop: #a8b6dd;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --ground: #12151d;
+      --card: #1a1f2b;
+      --ink: #e6eaf3;
+      --ink-soft: #a3adc2;
+      --ink-faint: #6d7791;
+      --rule: #2c3444;
+      --accent: #97a4f2;
+      --accent-soft: #262e4d;
+      --warm: #e4a071;
+      --warm-soft: #3a2a1e;
+      --drop: #3d4966;
+    }
+  }
+
+  :root[data-theme="dark"] {
+    --ground: #12151d;
+    --card: #1a1f2b;
+    --ink: #e6eaf3;
+    --ink-soft: #a3adc2;
+    --ink-faint: #6d7791;
+    --rule: #2c3444;
+    --accent: #97a4f2;
+    --accent-soft: #262e4d;
+    --warm: #e4a071;
+    --warm-soft: #3a2a1e;
+    --drop: #3d4966;
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    margin: 0;
+    background: var(--ground);
+    color: var(--ink);
+    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
+    font-size: 16px;
+    line-height: 1.85;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .wrap {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 0 24px 96px;
+    display: flex;
+    flex-direction: column;
+    gap: 72px;
+  }
+
+  h1, h2, .display {
+    font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", system-ui, sans-serif;
+    font-weight: 700;
+    text-wrap: balance;
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .label {
+    font-family: "Roboto Mono", ui-monospace, monospace;
+    font-size: 12px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ink-faint);
+    margin: 0;
+  }
+
+  p { margin: 0; }
+  .lede { color: var(--ink-soft); }
+
+  /* ---- hero ---- */
+  header {
+    position: relative;
+    padding: 88px 0 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  h1 { font-size: clamp(34px, 7vw, 52px); }
+  h1 .ruby { display: block; font-size: 14px; letter-spacing: 0.3em; color: var(--accent); font-weight: 500; }
+
+  .hero-note {
+    color: var(--ink-soft);
+    max-width: 34em;
+  }
+
+  /* ---- sections ---- */
+  section { display: flex; flex-direction: column; gap: 18px; }
+  h2 { font-size: clamp(21px, 3.4vw, 26px); }
+  h2 .n { color: var(--accent); font-family: "Roboto Mono", monospace; font-size: 0.62em; margin-right: 0.6em; }
+
+  .fig {
+    background: var(--card);
+    border: 1px solid var(--rule);
+    border-radius: 14px;
+    padding: 22px;
+    overflow-x: auto;
+  }
+  .fig svg { display: block; width: 100%; height: auto; min-width: 380px; }
+
+  .cap { color: var(--ink-faint); font-size: 14px; }
+
+  /* ---- profile ---- */
+  .profile {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
+    border-radius: 14px;
+    overflow: hidden;
+  }
+  .profile div {
+    background: var(--card);
+    padding: 14px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .profile dt {
+    font-family: "Roboto Mono", monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    color: var(--ink-faint);
+    margin: 0;
+  }
+  .profile dd {
+    margin: 0;
+    font-family: "Zen Maru Gothic", sans-serif;
+    font-size: 19px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ---- band strip ---- */
+  .bands { display: flex; flex-direction: column; gap: 10px; }
+  .band {
+    display: grid;
+    grid-template-columns: 88px 1fr;
+    gap: 14px;
+    align-items: baseline;
+    padding: 12px 16px;
+    border-radius: 12px;
+    background: var(--card);
+    border: 1px solid var(--rule);
+  }
+  .band b {
+    font-family: "Zen Maru Gothic", sans-serif;
+    color: var(--accent);
+    font-size: 15px;
+  }
+  .band.warm b { color: var(--warm); }
+  .band span { color: var(--ink-soft); font-size: 15px; }
+
+  .callout {
+    border-left: 3px solid var(--warm);
+    background: var(--warm-soft);
+    padding: 14px 18px;
+    border-radius: 0 12px 12px 0;
+    color: var(--ink);
+  }
+
+  code {
+    font-family: "Roboto Mono", ui-monospace, monospace;
+    font-size: 0.88em;
+    background: var(--accent-soft);
+    color: var(--ink);
+    padding: 1px 6px;
+    border-radius: 5px;
+  }
+
+  .steps { display: flex; flex-direction: column; gap: 12px; }
+  .step {
+    display: grid;
+    grid-template-columns: 34px 1fr;
+    gap: 14px;
+    background: var(--card);
+    border: 1px solid var(--rule);
+    border-radius: 12px;
+    padding: 14px 16px;
+  }
+  .step .no {
+    font-family: "Roboto Mono", monospace;
+    font-size: 13px;
+    color: var(--accent);
+    padding-top: 3px;
+  }
+  .step h3 {
+    margin: 0;
+    font-family: "Zen Maru Gothic", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .step p { color: var(--ink-soft); font-size: 14.5px; }
+  .step pre,
+  .fig > pre {
+    margin: 8px 0 0;
+    background: var(--ground);
+    border: 1px solid var(--rule);
+    border-radius: 8px;
+    padding: 10px 12px;
+    overflow-x: auto;
+    font-family: "Roboto Mono", monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--ink);
+  }
+  .step .body { display: flex; flex-direction: column; gap: 4px; }
+  .fig > pre { margin: 0; min-width: 380px; }
+
+  /* 雨：スクロールしても付いてくる全面レイヤー。常にコンテンツの後ろ */
+  .rain {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .rain i {
+    position: absolute;
+    top: -12vh;
+    width: 2px;
+    height: 16px;
+    border-radius: 1px;
+    background: var(--drop);
+    opacity: 0.5;
+  }
+  .wrap { position: relative; z-index: 1; }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rain i { animation: fall linear infinite; }
+    @keyframes fall {
+      from { transform: translateY(0); opacity: 0; }
+      8%   { opacity: 0.5; }
+      92%  { opacity: 0.5; }
+      to   { transform: translateY(118vh); opacity: 0; }
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .rain { display: none; }
+  }
+
+  /* ---- テーマ切り替え ---- */
+  .theme-toggle {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 7px 13px 7px 11px;
+    border: 1px solid var(--rule);
+    border-radius: 999px;
+    background: var(--card);
+    color: var(--ink-soft);
+    font-family: "Roboto Mono", ui-monospace, monospace;
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    transition: color 120ms ease, border-color 120ms ease;
+  }
+  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
+  .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .theme-toggle svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
+  .theme-toggle .sun { display: none; }
+  .theme-toggle[data-mode="dark"] .sun { display: block; }
+  .theme-toggle[data-mode="dark"] .moon { display: none; }
+  .theme-toggle .now::after { content: "DARK"; }
+  .theme-toggle[data-mode="dark"] .now::after { content: "LIGHT"; }
+
+  @media (max-width: 600px) {
+    .theme-toggle .now { display: none; }
+    .theme-toggle { padding: 8px; }
+  }
+
+  footer {
+    border-top: 1px solid var(--rule);
+    padding-top: 22px;
+    color: var(--ink-faint);
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  footer a { color: var(--accent); }
+
+</style>
+
+<button class="theme-toggle" type="button" aria-live="polite">
+  <svg class="moon" viewBox="0 0 20 20" aria-hidden="true"><path d="M16 12.2A6.6 6.6 0 0 1 7.8 4a6.6 6.6 0 1 0 8.2 8.2z"></path></svg>
+  <svg class="sun" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="3.6"></circle><path d="M10 2.2v1.6M10 16.2v1.6M2.2 10h1.6M16.2 10h1.6M4.5 4.5l1.1 1.1M14.4 14.4l1.1 1.1M15.5 4.5l-1.1 1.1M5.6 14.4l-1.1 1.1"></path></svg>
+  <span class="now"></span>
+</button>
+
+<div class="rain" aria-hidden="true">
+    <i style="left: 4%; height: 14px; animation-duration: 5.2s; animation-delay: -0.4s;"></i>
+    <i style="left: 11%; height: 18px; animation-duration: 6.6s; animation-delay: -2.9s;"></i>
+    <i style="left: 19%; height: 12px; animation-duration: 4.6s; animation-delay: -1.7s;"></i>
+    <i style="left: 27%; height: 16px; animation-duration: 7.2s; animation-delay: -4.1s;"></i>
+    <i style="left: 34%; height: 20px; animation-duration: 5.8s; animation-delay: -0.9s;"></i>
+    <i style="left: 42%; height: 13px; animation-duration: 6.1s; animation-delay: -3.3s;"></i>
+    <i style="left: 49%; height: 17px; animation-duration: 4.9s; animation-delay: -2.2s;"></i>
+    <i style="left: 57%; height: 15px; animation-duration: 7.6s; animation-delay: -5.0s;"></i>
+    <i style="left: 64%; height: 19px; animation-duration: 5.5s; animation-delay: -1.1s;"></i>
+    <i style="left: 71%; height: 12px; animation-duration: 6.9s; animation-delay: -3.8s;"></i>
+    <i style="left: 79%; height: 16px; animation-duration: 5.0s; animation-delay: -2.6s;"></i>
+    <i style="left: 86%; height: 18px; animation-duration: 7.0s; animation-delay: -0.2s;"></i>
+    <i style="left: 93%; height: 14px; animation-duration: 6.3s; animation-delay: -4.4s;"></i>
+    <i style="left: 97%; height: 17px; animation-duration: 5.4s; animation-delay: -1.9s;"></i>
+</div>
+
+<div class="wrap">
+
+  <header>
+    <p class="label">ELI14 — セットアップ</p>
+    <h1><span class="ruby">S E T U P</span>ういを動かすまで</h1>
+    <p class="hero-note">
+      クローンしてきてから、画面のすみっこにういが出てくるまで。
+      Claude Code と Claude Desktop、どっちでも動く。ただし入れるものが少し違う。
+    </p>
+  </header>
+
+  <section>
+    <h2><span class="n">01</span>まず、3つ用意する</h2>
+    <p class="lede">
+      ここが一番つまづくとこ。<b>ういの絵はリポジトリに入ってない。</b>
+      権利のある素材だから、別で持ってくる必要がある。
+    </p>
+    <div class="fig">
+      <svg viewBox="0 0 620 200" role="img" aria-label="必要な3つのもの：Node、立ち絵PSD、音声合成アプリ">
+        <g fill="var(--card)" stroke="var(--rule)" stroke-width="1.5">
+          <rect x="14" y="30" width="186" height="140" rx="12"></rect>
+          <rect x="420" y="30" width="186" height="140" rx="12"></rect>
+        </g>
+        <rect x="217" y="30" width="186" height="140" rx="12" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="2"></rect>
+        <g font-family="Zen Maru Gothic, sans-serif" font-size="16" fill="var(--ink)" text-anchor="middle">
+          <text x="107" y="72">Node.js</text>
+          <text x="310" y="72">立ち絵の PSD</text>
+          <text x="513" y="72">VoiSona Talk</text>
+        </g>
+        <g font-family="Zen Kaku Gothic New, sans-serif" font-size="13" fill="var(--ink-soft)" text-anchor="middle">
+          <text x="107" y="100">これが土台</text>
+          <text x="310" y="100">ういの体</text>
+          <text x="513" y="100">ういの声</text>
+        </g>
+        <g font-family="Roboto Mono, monospace" font-size="11" fill="var(--ink-faint)" text-anchor="middle">
+          <text x="107" y="132">npm が使えれば OK</text>
+          <text x="310" y="132">BOOTH で入手 → ういが取り込む</text>
+          <text x="513" y="132">voisona.com で入手（任意）</text>
+        </g>
+        <text x="310" y="156" text-anchor="middle" font-family="Zen Kaku Gothic New, sans-serif" font-size="12" fill="var(--accent)">ここだけ自分で用意</text>
+      </svg>
+    </div>
+    <p class="cap">
+      PSD は <a href="https://ui-roid.booth.pm/items/8593427" target="_blank" rel="noopener">BOOTH の配布ページ</a>
+      から入手する（<a href="https://www.ui-roid.com/guidelines" target="_blank" rel="noopener">キャラクターガイドライン</a>の範囲で利用）。
+      声を出すなら <a href="https://voisona.com/talk/download/" target="_blank" rel="noopener">VoiSona Talk</a>
+      （テクノスピーチ・無料）を入れて、ボイスライブラリを1つ以上ダウンロードしておく。
+      Electron（ういの窓）は <code>npm install</code> で一緒に入る。VoiSona Talk が無くても
+      吹き出しは出るし口もパクパクする。声が出ないだけ。
+    </p>
+  </section>
+
+  <section>
+    <h2><span class="n">02</span>コマンドは4つ</h2>
+    <div class="steps">
+      <div class="step">
+        <div class="no">01</div>
+        <div class="body">
+          <h3>持ってくる</h3>
+          <p>リポジトリを好きな場所に置く。パスは後で使うから覚えとく。</p>
+          <pre>git clone https://github.com/Uncle-Peke/ui-chan-mcp.git
+cd ui-chan-mcp</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">02</div>
+        <div class="body">
+          <h3>材料をそろえる</h3>
+          <p>これ1回でビルドまで終わる。<code>npm run build</code> は打たなくていい。</p>
+          <pre>npm install</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">03</div>
+        <div class="body">
+          <h3>セットアップに答える</h3>
+          <p>
+            対話形式。<b>PSD のパスと、声のカギを聞かれるだけ</b>。どっちも Enter で飛ばせる
+            （あとから <code>npx ui-chan</code> をもう一度打てばいい）。PSD は
+            <a href="https://ui-roid.booth.pm/items/8593427" target="_blank" rel="noopener">ui-roid.booth.pm</a>
+            から。声を使うなら
+            <a href="https://voisona.com/talk/download/" target="_blank" rel="noopener">VoiSona Talk</a>
+            の「編集 &gt; 環境設定 &gt; API」で REST API を有効にして、そこで決めたパスワードを答える。
+            最後に、どのアプリに入れるかを ↑↓ と Space で選ぶ。
+          </p>
+          <pre>npx ui-chan</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">04</div>
+        <div class="body">
+          <h3>足りてるか見る</h3>
+          <p>まとめて確認してくれる。⚠️ は「無くても動く」って意味。</p>
+          <pre>npx ui-chan doctor</pre>
+        </div>
+      </div>
+    </div>
+    <p class="cap">
+      答えた内容は<b>クローンの外</b>、<code>~/.ui-chan/</code> に入る（PSD・声のカギ・自分で足した表情）。
+      だから<b>アップデートしても消えない</b>し、クローンごと捨ててもここは残る。
+      シェルに <code>export</code> してもよくて、その場合は<b>環境変数のほうが勝つ</b>。
+    </p>
+  </section>
+
+  <section>
+    <h2><span class="n">03</span>入れ方は2つ。Desktop は両方いる</h2>
+    <p class="lede">
+      入れ方は「プラグイン」と「コネクタ」の2つ。<b>プラグインは道具箱、コネクタは電源コード</b>って
+      思っとくといい。<b>電源コードはどのアプリでもいる。</b>道具箱（<code>/talk</code> などのコマンド）は
+      Claude Code 専用。上の <code>npx ui-chan</code> は、選んだぶんを両方やってくれる。
+    </p>
+    <div class="fig">
+      <svg viewBox="0 0 620 240" role="img" aria-label="Claude Code と Claude Desktop で、プラグインとコネクタのどちらが必要かの表">
+        <g font-family="Zen Maru Gothic, sans-serif" font-size="15" fill="var(--ink)" text-anchor="middle">
+          <text x="330" y="34">Claude Code</text>
+          <text x="500" y="34">Claude Desktop</text>
+        </g>
+
+        <rect x="14" y="48" width="592" height="84" rx="12" fill="var(--card)" stroke="var(--rule)" stroke-width="1.5"></rect>
+        <rect x="14" y="142" width="592" height="84" rx="12" fill="var(--card)" stroke="var(--rule)" stroke-width="1.5"></rect>
+
+        <rect x="256" y="56" width="148" height="68" rx="9" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="2"></rect>
+        <rect x="426" y="56" width="148" height="68" rx="9" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="2"></rect>
+        <rect x="426" y="150" width="148" height="68" rx="9" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="2"></rect>
+
+        <g font-family="Zen Maru Gothic, sans-serif" font-size="15" fill="var(--ink)">
+          <text x="34" y="82">プラグイン</text>
+          <text x="34" y="176">コネクタ</text>
+        </g>
+        <g font-family="Zen Kaku Gothic New, sans-serif" font-size="12" fill="var(--ink-faint)">
+          <text x="34" y="102">/talk などのコマンド</text>
+          <text x="34" y="118">失敗への自動リアクション</text>
+          <text x="34" y="196">画面に出る・喋る</text>
+          <text x="34" y="212">ういの性格</text>
+        </g>
+
+        <g font-family="Zen Maru Gothic, sans-serif" font-size="15" fill="var(--accent)" text-anchor="middle">
+          <text x="330" y="86">いる</text>
+          <text x="500" y="86">いる</text>
+          <text x="500" y="180">いる</text>
+        </g>
+        <g font-family="Zen Kaku Gothic New, sans-serif" font-size="11" fill="var(--ink-faint)" text-anchor="middle">
+          <text x="330" y="106">これ1つでぜんぶ</text>
+          <text x="500" y="106">コマンドは使える</text>
+          <text x="500" y="200">これが無いと喋らない</text>
+        </g>
+        <text x="330" y="180" text-anchor="middle" font-family="Zen Maru Gothic, sans-serif" font-size="15" fill="var(--accent)">いる</text>
+        <text x="330" y="200" text-anchor="middle" font-family="Zen Kaku Gothic New, sans-serif" font-size="11" fill="var(--ink-faint)">これが無いと喋らない</text>
+      </svg>
+    </div>
+    <div class="callout">
+      <b>プラグインは MCP サーバを持っていない。</b>昔は持たせていたけど、プラグインの外
+      （Claude Desktop、OpenCode、ほかのエージェント）では設定の中の
+      <code>${CLAUDE_PLUGIN_ROOT}</code> が展開されず<b>必ず起動に失敗する</b>ので、役割を分けた。
+      コネクタの登録は全部 <code>ui-chan install</code> がやる。
+    </div>
+  </section>
+
+  <section>
+    <h2><span class="n">04</span>プラグインを入れる（Code / Desktop 共通）</h2>
+    <p class="lede">
+      <code>npx ui-chan</code> で <b>claude-code-plugin</b> を選んでいれば、もう終わってる。
+      あとから足すならこの1行。<b>入れた内容は Claude Desktop にも共有される。</b>
+    </p>
+    <div class="steps">
+      <div class="step">
+        <div class="no">01</div>
+        <div class="body">
+          <h3>入れる</h3>
+          <p>
+            置き場所の登録・インストール・クローンとの紐づけまで、これ1行。
+            <b>紐づけまでやるから、あとでリポジトリを直しても Claude Code が古いままにならない。</b>
+          </p>
+          <pre>npx ui-chan install claude-code-plugin</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">02</div>
+        <div class="body">
+          <h3>開き直す</h3>
+          <p>
+            Claude Code は一度終了してもう一度開く。Claude Desktop も使うなら、そっちは
+            <b>完全に終了</b>してから起動（Mac は ⌘ + Q。ウィンドウを閉じるだけだと終わってない）。
+            設定 → プラグイン に「ういちゃんデスクトップマスコット」が出ていればOK。
+          </p>
+        </div>
+      </div>
+    </div>
+    <p class="cap">
+      Claude Code のプラグイン機能は、リポジトリを <code>~/.claude/plugins/cache/</code> に
+      <b>コピー</b>して使う。つまりコピーが増えて、直す場所が2つになる。
+      <code>ui-chan install claude-code-plugin</code> はそのコピーを消して、クローンへの
+      ショートカット（symlink）に置き換える。これで<b>本物はクローンだけ</b>になる。
+      Desktop 側の追加ボタンは GitHub からの追加しかできないので、登録は Claude Code 側からやる。
+    </p>
+  </section>
+
+  <section>
+    <h2><span class="n">05</span>コネクタを入れる（どのアプリでも必要）</h2>
+    <p class="lede">
+      喋らせるにはこれが必要。<b>アプリの名前を書くだけ。</b>設定ファイルの場所も書式も、
+      ういが知ってる。対応してるのは <code>claude-code</code> / <code>claude-desktop</code> /
+      <code>opencode</code> / <code>cursor</code> / <code>vscode</code> / <code>hermes</code>。
+    </p>
+    <div class="steps">
+      <div class="step">
+        <div class="no">01</div>
+        <div class="body">
+          <h3>登録する</h3>
+          <p>元の設定は <code>.bak</code> に残る。いくつでも並べて書ける。</p>
+          <pre>npx ui-chan install claude-desktop opencode</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">02</div>
+        <div class="body">
+          <h3>アプリを開き直す</h3>
+          <p>
+            ⌘ + Q で<b>完全に終了</b>してから起動。<code>+</code> メニューの <b>コネクタ</b> に
+            ui-chan が出ていれば繋がってる（プラグインの棚とは別のところ）。
+          </p>
+        </div>
+      </div>
+    </div>
+    <p class="cap">
+      手で書きたいなら、<b>設定</b>（⌘ + カンマ）→ <b>開発者</b> → <b>設定を編集</b> で
+      <code>claude_desktop_config.json</code> を開いて、<code>"mcpServers"</code> の中にこれを足す。
+      外すのは <code>npx ui-chan uninstall claude-desktop</code>（<code>--all</code> で全部、
+      <code>--purge</code> を足すと <code>~/.ui-chan</code> ごと消える）。一覧にないアプリには
+      <code>npx ui-chan print</code> が貼り付け用の設定を出す。
+    </p>
+    <div class="fig">
+      <pre>{
+  "mcpServers": {
+    "ui-chan": {
+      "command": "&lt;ui-chan-mcp を置いた場所&gt;/bin/ui-chan-node",
+      "args": ["&lt;ui-chan-mcp を置いた場所&gt;/dist/mcp-server.js"]
+    }
+  }
+}</pre>
+    </div>
+    <div class="callout">
+      ここで <code>"command": "node"</code> と書くと動かない。アプリから起動された Claude Desktop は
+      ターミナルとは別の環境で動いていて、<b>そこからは node が見えない</b>から。
+      <code>bin/ui-chan-node</code> は node を自分で探してくれる係。
+    </div>
+  </section>
+
+  <section>
+    <h2><span class="n">06</span>動いたかどうか</h2>
+    <p class="lede">
+      新しいセッションを開けば、勝手にういの窓が出てくる。出てこないなら、
+      先に単体で起動してみると原因が切り分けられる。
+    </p>
+    <div class="fig">
+      <svg viewBox="0 0 620 150" role="img" aria-label="セッション開始で自動起動、または手動起動">
+        <defs>
+          <marker id="s1" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto">
+            <path d="M0 0 L8 4 L0 8 z" fill="var(--accent)"></path>
+          </marker>
+        </defs>
+        <rect x="14" y="24" width="220" height="46" rx="10" fill="var(--card)" stroke="var(--rule)" stroke-width="1.5"></rect>
+        <rect x="14" y="90" width="220" height="46" rx="10" fill="var(--card)" stroke="var(--rule)" stroke-width="1.5"></rect>
+        <rect x="386" y="57" width="220" height="46" rx="10" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="2"></rect>
+        <g stroke="var(--accent)" stroke-width="2" fill="none" marker-end="url(#s1)">
+          <path d="M238 47 C 320 47, 320 74, 382 78"></path>
+          <path d="M238 113 C 320 113, 320 86, 382 82"></path>
+        </g>
+        <g font-family="Zen Kaku Gothic New, sans-serif" font-size="14" fill="var(--ink)" text-anchor="middle">
+          <text x="124" y="52">セッションを開く</text>
+          <text x="124" y="118">単体で起動</text>
+          <text x="496" y="85">画面のすみに出る</text>
+        </g>
+        <g font-family="Roboto Mono, monospace" font-size="11" fill="var(--ink-faint)" text-anchor="middle">
+          <text x="124" y="68">自動</text>
+          <text x="124" y="134">npx ui-chan start</text>
+        </g>
+      </svg>
+    </div>
+    <div class="callout">
+      うんともすんとも言わないときは <code>npx ui-chan doctor</code> に戻る。
+      ❌ が出るのは「ビルドされてない」ときだけで、それ以外は動くはず。
+    </div>
+  </section>
+
+  <section>
+    <h2><span class="n">07</span>あとで直したとき</h2>
+    <p class="lede">
+      コードや台詞をいじったら、これだけ。<b>プラグインもコネクタも同じクローンを見てる</b>から、
+      片方だけ古い、みたいなことは起きない。
+    </p>
+    <div class="steps">
+      <div class="step">
+        <div class="no">01</div>
+        <div class="body">
+          <h3>作り直す</h3>
+          <p>次のセッションから反映される。Cue（表情）の <code>.json</code> だけなら保存した瞬間に反映されるので、これも要らない。</p>
+          <pre>npm run build</pre>
+        </div>
+      </div>
+      <div class="step">
+        <div class="no">02</div>
+        <div class="body">
+          <h3>もし <code>/plugin install</code> を手で打ち直したら</h3>
+          <p>コピーが復活してつながりが切れるので、もう一度これを打つ。</p>
+          <pre>npx ui-chan install claude-code-plugin</pre>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <p>立ち絵素材：雨衣（うい）／坂本アヒル様</p>
+    <p>利用は<a href="https://www.ui-roid.com/guidelines" target="_blank" rel="noopener">雨衣キャラクターガイドライン</a>の範囲で。</p>
+  </footer>
+
+<script>
+  (function () {
+    var root = document.documentElement;
+    var btn = document.querySelector('.theme-toggle');
+    var KEY = 'ui-chan-setup-theme';
+    var dark = window.matchMedia('(prefers-color-scheme: dark)');
+
+    var saved = null;
+    try { saved = localStorage.getItem(KEY); } catch (e) { /* プライベートウィンドウなど */ }
+    if (saved === 'light' || saved === 'dark') root.dataset.theme = saved;
+
+    function current() {
+      return root.dataset.theme || (dark.matches ? 'dark' : 'light');
+    }
+    function sync() {
+      var now = current();
+      btn.dataset.mode = now;
+      btn.setAttribute(
+        'aria-label',
+        now === 'dark' ? 'ライトテーマに切り替える' : 'ダークテーマに切り替える'
+      );
+    }
+
+    btn.addEventListener('click', function () {
+      var next = current() === 'dark' ? 'light' : 'dark';
+      root.dataset.theme = next;
+      root.style.colorScheme = next;
+      try { localStorage.setItem(KEY, next); } catch (e) { /* 保存できなくても切り替えは効く */ }
+      sync();
+    });
+    dark.addEventListener('change', sync);
+    sync();
+  })();
+</script>
+</div>