Experience Agentic AI by touching.Agentic AI を、触って体感する。 No prior knowledge needed知らなくても OK
AIs are shifting from "tools you talk to" into "teams that investigate, divide work, execute, and verify". This page lets you feel that shift with sliders and buttons — 7 top-level tabs, each with sub-topics where the behavior visibly changes as you interact.AI は「会話する道具」 から、「調べる・分担する・実行する・確認するチーム」 に変わりつつあります。 このページではその変化をスライダーやボタンで触って体感できます。 7 つの大項目それぞれに小項目があり、触ると挙動が変わります。
3 minutes to grasp the whole picture3 分で全体像をつかむ
- AI is not just chat — it can divide labor across agents and execute work.AI は会話だけではなく、複数のエージェントで分担して作業できる。
- Memory, permissions, and tooling design determine whether it ships value or causes accidents.ただし、記憶・権限・道具の設計を間違えると事故になる。
- So you need a shared language: Agent / Context / Skill / Guardrail. Touch the tabs to learn each.だから Agent / Context / Skill / Guardrail を理解する。 各タブを触って 1 つずつ。
「雰囲気で作って」 で動くのは入口だけ。 本番運用は、目的 → 制約 → 観測 → 差分 → 実行 → 検証 → 記録 の鎖で動かす。
触ってみる 小項目
下のチェーンの段階をクリックすると ON / OFF が切り替わります。 全部 ON が Agentic Engineering、上の Vibe トグルを ON にすると 1 段に潰れます (= Vibe Coding)。 段階を 1 つでも切ると下の「結果」 が劣化することを確認できます。
全段通過 → 動くコード + 記録あり
目的・制約・観測ログ・差分・実行結果・検証ログ・改善記録、すべて残っている状態。 後で「なぜこの判断だったか」 が追跡できる。 これが Agentic Engineering の理想形。
AI に作業させる単位は 3 つ。 1 人 (Agent)・別窓で調査する補助 (Subagent)・並列で動くチーム (Agent Team)。 役割が違うと使い分けが変わる。
Main Agent vs Subagent 小項目
Main の会話を汚さずに、別窓で「調査だけ」 「grep だけ」 やらせるのが Subagent。 委任ボタンを押すと、Subagent 側だけが膨らみ、Main は 結論 1 行 しか受け取らないことを確認できます。
Agent Team (チーム並列) 小項目
役割の違うエージェントを並べてタスクを渡すと並列で進みます。 ただし 同じファイルを編集する作業 を任せると衝突するので、タスクの性質を見て向き / 不向きを判断する必要があります。
「誰を、どの順で、どの条件で動かすか」 を制御する役割。 代表的な 5 つのパターンを 1 つずつ触って違いを見る。
パターンを切り替える 小項目
下のカードをクリックすると、その下のキャンバスで「タスクがどう流れるか」 が変わります。 流動するボールが タスク 1 単位。
AI に見せられる情報量は有限。 何を入れ、何を入れず、どこに残すかの設計が品質を左右する。
コンテキストウィンドウを膨らませてみる 小項目
下のボタンで「指示 / 過去ログ / ツール結果 / RAG」 を追加すると、窓が埋まっていきます。 100% を超えると 古い情報から圧縮 (Compaction) され、消えた情報は灰色になります。 トグルで圧縮の有無を切替えられます。
LLM に見せるもの / コード側だけで持つもの 小項目
アイテムをクリックして LLM が見る側 と コード側のみ を切替えると、右の「リスク評価」 がリアルタイムに更新されます。 安全な配置を試行錯誤して掴んでください。 AI を切り替えると、各 AI 特有のリスクも変わります。
LLM が見るもの
コード側だけが持つもの
⚠ 現在の配置のリスク評価
記憶の階層 ── 触って動かすと事故が見える 小項目
4 つの層 (会話 / 作業ログ / Skill / Memory) に置かれたアイテムをクリックすると、隣の層へ移動 します。 間違った層に置くと事故内容が下に表示されます。 AI を切替えると、それぞれの記憶機構の違いも分かります。
「再利用する手順」 (Skill) と「外部とつなぐ規格」 (Tool / MCP) は別の話。 5 つの小項目を順に触ると、「定義 → ロード → 呼び出し → 接続 → 防御」 の流れが体感できる。
5-1. SKILL.md の中身を解剖する 小項目
Skill は SKILL.md という 1 枚の md ファイルで定義される。 単なる「メモ」 ではなく、名前 / 発動条件 / 手順 / 例 という決まった項目で書く。 サンプルの各部分をクリックすると、それぞれの意味と AI 側の挙動を確認できる。
5-2. 全部ロード vs 遅延ロード 小項目
Skill が 20 個 登録された組織を想定。 「全部最初からロード」 (= 全部 CLAUDE.md に書き並べる) と「必要な時だけロード」 (= SKILL.md の遅延ロード) で、コンテキストの使い方がどう違うか並べて見る。 タスクボタンを切り替えると、遅延ロード側がどの Skill を選ぶかも変わる。
全部最初からロードCLAUDE.md 詰込み
本題に入る前から context の 68% が Skill 本文で埋まっている。 残り 32% で会話履歴・観測ログ・成果物を扱う必要がある。
遅延ロードSKILL.md 必要時のみ
タスクに該当する Skill だけが展開される。 残り 84% で会話履歴・観測ログ・成果物を余裕で扱える。
5-3. Tool / Function Calling 5 ステップ 小項目
AI が外部 Tool (関数) を呼ぶ流れは、決まった 5 ステップ。 「次のステップ」 ボタンを押して、AI が裏で何を判断しているか順に追える。 リセットで何度でもやり直し可能。
5-4. MCP がある世界 / ない世界 小項目
MCP (Model Context Protocol) は、AI と外部サービス (Git / DB / ファイル / n8n / Docker 等) をつなぐ 共通規格。 ない世界では「AI ごとに個別配線 (=毎回 N × M の組合せ)」、ある世界では「1 つの規格で全部つながる (=N + M)」 となり、保守コストが激減する。 トグルで切替・外側サービスをクリックすると経路が光る。
5-5. Tool Poisoning ── ツール定義そのものが攻撃される 小項目
MCP 連携は強力だが、ツール定義の description 欄に悪意ある指示文を混ぜると、AI が乗っ取られる。 これが Tool Poisoning。 タブで定義を切替え、ガード ON/OFF で挙動の違いを観察できる。
AI にどこまで実行を許すか。 危ない操作には承認を挟むのが定石。 失敗の半分はこの設計不足。
Permission のハシゴ + アクション判定クイズ 小項目
権限レベルを 1 つ選ぶと、下の「具体的アクション」 にそれぞれ OK / 承認待ち / 不可 が即時表示されます。 ハシゴを上げるたびに何が解放されるかを触って確認できます。
承認ゲート (Human-in-the-loop) を入れる/入れない 小項目
「DROP TABLE users」 という危険操作が来たとき、承認ゲートの有無で結末が違います。 ボタンで切り替えて挙動を比較してください。
⚠ HITL なしの結末
✓ HITL ありの結末
仕組みが分かっていても、ガードを入れないと必ず起きる事故。 1 つずつクリックして実例を確認。
↑ 30 種類の失敗パターン。 各 AI で「典型的な挙動」 と「対策可否」 が変わります。 ✗ がついたカードは現在の AI では再現しない (対象外) ので選択不可。 banner のチップをクリックでカードへ jump。