Agent Skill にアプリケーションを組み込む——逆瀬川氏が実践する Agent-App 共生モデル

Skill with App イメージ — Skill にアプリケーションを組み込んでみる - 逆瀬川ちゃんのブログ

2026 年 3 月、逆瀬川氏（@gyakuse）がAgent Skill にローカルで動く Web アプリケーションを同梱する実装を公開した。

Coding Agent と日常的に触れていると観察されるのは、みんながいろんなアプリケーションをそれぞれ自分向けに作るようになってきていることです。

Coding Agent を毎日使っていると、「Agent の側からアプリケーションを呼び出す方が自然」と感じるという。

本稿はこの実装の概要、アーキテクチャ、そして Agent-App 共生モデルについて解説する。

アプリケーションに Agent が載る時代

最近はアプリケーションに Agent の機能が追加されるものが増えている。

OpenAI Apps SDK - ChatGPT の中で動くサードパーティアプリケーション
Anthropic MCP Apps - Slack、Asana などの外部サービスをチャット内で操作
Claude Artifacts - コードを直接生成して実行

しかし、逆瀬川氏は逆のアプローチを提案する。

自分がやりたいことを Agent に伝えて、必要に応じて Agent がアプリを開いてくれる。そういう体験の方がしっくりきます。

仕様を考えてみる

Agent が UI を扱うための仕様は、業界でいくつか整備されつつある。

アプローチ	代表例	仕組み	セキュリティ
宣言的	A2UI, Flutter GenUI	JSON で UI コンポーネントを記述	信頼済みカタログのみ
コード実行型	Artifacts, Canvas	HTML/CSS/JS を生成して実行	サンドボックス分離
ストリーミング UI 型	Vercel AI SDK	React Server Components をストリーミング	フレームワーク依存
テンプレート型	Adaptive Cards	事前定義テンプレートにデータバインド	最も制限的

各仕様の進捗

A2UI - v0.8 が Stable、v1.0 を 2026 年 Q4 に予定
AG-UI - CopilotKit v1.50 でスレッド永続化やマルチエージェント調整
AWS/Oracle - AG-UI への対応を発表

このあたりは急速に動いている領域だ。

実装してみた

逆瀬川氏は Agent Skill にローカルで動く Web アプリケーションを同梱するパターンで作成した。

アーキテクチャ

全体の流れはシンプルだ。

Coding Agent → curl POST /api/app → API Server (SSE) → Frontend (React)
                { appId, data }   port 5191   port 5190

Agent がワークフローの中で curl コマンドを叩いてアプリの表示を指示し、API Server が SSE でフロントエンドにブロードキャストし、フロントエンドが該当する React コンポーネントを右パネルにスライドイン表示する。

self-contained なスキルパッケージ

各スキルはこういう構造で自己完結している。

skills/<skill-name>/
├── SKILL.md          # Agent Skill 定義 + アプリメタデータ
├── apps/<app>/       # React コンポーネント、hooks、型
├── data/             # 永続化 JSON（実行時自動生成）
└── references/       # 補助ドキュメント

SKILL.md の frontmatter にアプリ情報を載せる。

---
name: recipe-skill
description: >
 レシピの検索・追加・編集・削除を行うレシピ管理スキル。
 ユーザーが「レシピを探して」「今日の献立」「料理を追加」
 「材料から検索」「レシピ管理」と言ったときに使用する。
 apps/recipe-manager/ に埋め込み Web アプリを同梱。
metadata:
 has-app: true
 app-id: recipe-manager
 app-name: レシピ管理
 app-icon: "🍳"
 app-entry: apps/recipe-manager/RecipeApp.tsx
---

自動発見の仕組み

新しいスキルを追加したとき、ホスト側のコードを一切変更する必要がない。Vite の import.meta.glob で自動発見している。

// src/skill-registry.ts
// メタデータ：eager（同期、ヘッダーボタン用）
const metaModules = import.meta.glob<{ meta: SkillAppMeta }>(
  "../skills/*/apps/*/meta.ts",
  { eager: true },
);

// コンポーネント：lazy（コードスプリット）
const componentModules = import.meta.glob<{
  default: ComponentType<SkillAppProps>;
}>("../skills/*/apps/*/*App.tsx");

skills/ 配下にフォルダを追加して meta.ts と App.tsx を置けば、それだけで認識される。プラグインアーキテクチャとしてうまく機能している。

現在のスキル

実験として13 個ほどのスキルを作ってみた。並列でやったので10 分で completedしたという。

スキル	用途
recipe-skill	レシピ管理（検索、追加、食材マッチ、調理モード）
expense-skill	経費管理（レシート OCR、写真保存、ダッシュボード）
weather-skill	天気表示（Agent が取得したリアルデータ表示）
crm-skill	顧客管理、商談パイプライン
ats-skill	採用管理、候補者パイプライン
project-skill	プロジェクト管理、タスク管理
accounting-skill	会計、仕訳管理
invoice-skill	請求書、見積書管理
competitor-skill	競合分析、ポジショニングマップ
seo-skill	SEO 分析、キーワード調査
sns-skill	SNS 運用、投稿管理
lp-skill	LP 作成、AB テスト
contract-skill	契約書管理、リスク分析

Agent-App 共生モデル

これらのスキルは以下の分離の哲学に基づいている。

責務	Agent	App
データ取得・加工	Web 検索、API 呼び出し、ファイル I/O、推論	しない
インサイト生成	推奨、分析、スコアリング	しない
見せる	しない	一覧、グラフ、ダッシュボード
操作させる	しない	承認/却下、編集/削除、フィルタ

具体例

レシピスキル

Agent - web 検索でレシピを見つけてきて、材料や手順を RecipeDraft 形式に構造化して、POST /api/app でアプリに送信
App - 発見カードをきれいに表示して「保存する」ボタンを出す
人間 - それを見て判断する

経費管理

Agent - レシートの画像を読み取って OCR 処理し、金額や日付を抽出して App に渡す
App - ダッシュボードとして表示

天気

Agent - データを取得して服装アドバイスや傘の必要性を判断
App - ダッシュボードとして表示

Skill Apps のうれしみと限界

うれしいところ

ポータビリティ - スキルフォルダをコピーするだけで別の環境に持っていける。git リポジトリとして管理すれば、共有も簡単
使い捨てにならない - Claude Artifacts や ChatGPT Canvas はセッションの中では便利だが、後から再利用しにくい。Skill Apps はファイルシステム上に永続的に存在
ホスティング不要 - ローカルで完結
カスタマイズ自由 - Coding Agent に「この CRM のパイプラインのステージを変えて」と言えばすぐに変更可能

比較表

観点	Skill Apps	クラウド SaaS	Artifacts/Canvas
ホスティング	ローカル	クラウド	プラットフォーマー
ポータビリティ	フォルダコピー	アカウント依存	プラットフォーム依存
カスタマイズ	コード直接編集	設定画面	プロンプト再生成
永続化	JSON ファイル	DB 保証	プラットフォーマー管理
マルチデバイス	なし	あり	あり

限界

一方で、限界もある。

永続化の保証がない - JSON ファイルベースなので、バックアップもユーザー任せ
マルチデバイス同期がない - スマホからは使えない
チームユース - チームとデータ共有しづらい
オフライン体験 - 雑に作ると貧弱
テスト/CI/CD - 仕組みがまだない
非エンジニア向け - カスタマイズのハードルが高い

ただ、こうした限界をサポートするサービスや仕組みも出てくるんじゃないかという。

アプリケーションを作ることのつらみ

誰でもアプリケーションが作れるといっても、法的なつらみは消えない。

経費管理アプリ - 電子帳簿保存法に準拠しているか（タイムスタンプ、検索要件、改ざん防止）
CRM/ATS - 個人情報保護法
会計スキル - 金融関連法規

マーケットとセキュリティ

スキルを公共財として流通させるなら、マーケットとセキュリティの仕組みが必要だ。

現実の問題

ToxicSkills 研究（Snyk、2026 年 2 月） - ClawHub 上の無料スキルの約 36% に何らかのセキュリティ問題
悪意あるスキル - 6 日間で約 3,900 回実行された事例
学術研究 - 98,380 個のスキルを分析して 157 個の悪意あるスキルを特定

セキュアなマーケットの方向性

信頼済みコンポーネントのカタログ型 - A2UI が採用。表現力は制限されるが、セキュリティは高い
パッケージマネージャー型 - npm や Homebrew のように。コードの署名、レビュープロセス、スキャンの自動化

標準化の動き

**AAIF（Agentic AI Foundation）**が Linux Foundation 傘下で設立され、Anthropic、OpenAI、Block、AWS、Microsoft、Google 等が参加している。

2026 年 2 月には97 の新メンバーが加入して 146 組織に拡大した。

MCP や A2A といったプロトコルの標準化を通じて、エコシステム全体のセキュリティ基盤を整える方向に進んでいる。

その先の体験について

プロトコルスタック（MCP、A2A、AG-UI/A2UI、WebMCP）が成熟した先にはどんな体験があるだろうか。

A2UI - Agent がその人に最適な UI を都度生成
AR/VR 空間 - Agent が UI を配置
Meta Horizon OS - MCP サーバーを公開
DeepMind Genie 3 - テキストからリアルタイムで 3D 世界を生成
Meta V-JEPA 2 - ワールドモデルとして動画から学習して未知環境でのロボット制御

逆瀬川氏が描く未来：

AI アシスタントの層が一番上にあって、その下にアプリケーション群が並ぶ。そして発話、生体リズム、時間、などの任意のタイミングで Assistant が Agent を介して適切なアプリを呼び出してくれるみたいな世界ができたらいいなあと思っています。

まとめ

Agent がプラットフォームとなりアプリが組み込まれるパラダイム - Coding Agent の日常利用から自然に生まれた発想で、実装してみると意外と実用的
skill-with-app - 「SKILL.md + apps/ + data/」の self-contained パッケージで、ホスト側のコード変更なしにスキルを追加可能
現実的な課題 - 永続化・法規制・セキュリティという課題はあるが、プロトコルの標準化やエコシステムの整備が進んでいる

参考：