Paseoでは、プラグインで作業パネルやサイドバー、コマンドなどを追加できる。自分用のAI作業環境を作るなら、最初は「動画の公開前チェックを1画面に並べる」のように、既存の仕事の一部分だけを形にすると作りやすい。
初回からメール・分析・投稿まで全部をつなぐと、動かない原因を探しにくい。この記事では公式の雛形を起動し、用途を決め、型チェックと再読み込みで確認する流れを示す。コード完成品の実機レビューではなく、自作を始めるための手順と仕様テンプレートだ。
プラグイン・Skills・MCPは何が違うか
| 方法 | 変えるもの | 動画制作の例 |
|---|---|---|
| Paseoプラグイン | 作業画面や操作、host側の処理 | 素材と確認状況を一覧にするパネル |
| Skills | AIが繰り返す作業の手順 | 概要欄を作る確認手順 |
| MCP | 外部ツールとの接続 | デザインや資料の検索 |
| 固定プロンプト | 今回の依頼内容 | タイトル案を6つ作る |
画面が要らない作業なら、最初はプロンプトや手順書だけで足りる。プラグイン化する理由は「毎回同じ情報を探す」「人の確認待ちが埋もれる」など、具体的な手間から決める。
公式の雛形から始める5ステップ
- daemonが動くPC上で、プラグイン専用の絶対パスを決める。既存の作業フォルダーと混ぜない。
- paseo plugin initで雛形を作る。初期化後、作成されたディレクトリで依存関係を用意する。
- npm run typecheckで型チェックを行う。エラーが残る状態で機能追加を始めない。
- 対象hostのSettings → Pluginsで、コードと依存関係を確認してプラグイン機能を有効にし、作成したディレクトリを導入する。
- paseo plugin lsでrunningを確認する。雛形の画面を開き、ボタンから応答が返るか確かめる。
paseo plugin init /absolute/path/to/editorial-panel
cd /absolute/path/to/editorial-panel
npm install
npm run typecheck
paseo plugin install /absolute/path/to/editorial-panel
paseo plugin lsパスは自分の環境へ置き換える。導入手順の根拠は公式Plugin quickstart。プラグインはサンドボックス化された無害な画面部品とは限らず、hostの権限で動くコードを含む。配布元と依存関係を確認して導入する。
どのファイルを担当するか
| 場所 | 役割 | 注意点 |
|---|---|---|
| paseo-plugin.json | 識別子・対応バージョン | 表示名と内部IDを混同しない |
| index.client.tsx / client/ | 画面とUI側の処理 | モバイルでも動くことを想定する |
| index.server.ts / server/ | daemon側の処理 | 必要なファイルだけを扱う |
| shared/ | 両側で使う型や契約 | 秘密情報の置き場にしない |
詳細な拡張箇所は公式Plugin referenceを確認する。ブラウザ固有のAPIやNode.jsの機能を、場所を問わず使えると考えない。UIとサーバー処理を分けると、スマホだけ壊れる問題も調べやすい。
最初の自作UIに使う仕様テンプレート
名称：動画公開前チェックパネル
対象：現在のワークスペース1件
表示：原稿、タイトル候補、サムネイル指示、確認事項
状態：未着手／作成中／確認待ち／完了
初回の入力：ダミーデータだけ
初回の操作：項目を選ぶ、詳細を見る
初回では実装しない：外部ログイン、メール送信、自動公開
後から追加：ファイルの読み込み、確認状態の保存
成功条件：PCとスマホで同じ項目が読め、別案件の内容が混ざらないAIに実装を頼む6段階の指示
1. 雛形の把握
このプラグイン雛形を読み、画面、サーバー処理、共有型の役割を説明する。変更はまだ行わず、現在のplugin IDと型チェック用スクリプトを確認する。2. ダミー画面
上の仕様に沿い、4項目のダミーデータだけを表示する最小UIを作る。外部接続とファイル書き込みは追加しない。変更するファイルを先に説明する。3. 読み取り
現在のワークスペースで明示したoutputフォルダーだけを読む設計にする。存在しないファイルは空欄ではなく「未作成」と表示する。4. 状態の設計
確認状態を保存する場合の保存先とデータ形式を提案する。入力原稿を状態管理のために書き換えない。同時更新が起きたときの扱いも示す。5. 不具合確認
フォルダーなし、ファイルなし、読み込み権限なし、内容が空、長い日本語タイトルの5条件で期待する表示を整理する。未実行のテストは未実行と明記する。6. 配布前点検
共有用ファイルに個人の絶対パス、メールアドレス、トークン、顧客原稿が含まれないか点検する。検出内容は値を伏せて場所だけ報告する。変更を反映する順番
ソースを書き換えたら型チェックを行い、実際のplugin IDでreloadする。ディレクトリ名とIDが違う場合は、manifestの値を使う。
npm run typecheck
paseo plugin reload YOUR_PLUGIN_ID
paseo plugin ls| 症状 | 確認すること |
|---|---|
| 画面に出ない | host、プラグインの有効状態、running表示 |
| 以前の表示のまま | ソース変更後にreloadしたか |
| reloadに失敗 | エラーを直してから再読み込み。成功したと思い込まない |
| PCだけ動く | ブラウザ固有の処理がモバイルへ漏れていないか |
| 別案件の内容が出る | ワークスペースIDと保存先の対応 |
よくある質問
プログラミング未経験でも作れる？
AIへ実装を依頼できるが、表示・保存・権限の確認は必要だ。雛形とダミーデータから始める。
便利なパネルを全部一度に作る？
まず確認待ち一覧など1つの手間を減らす。使わない画面を増やさない。
変更すれば自動で反映される？
公式手順ではreloadが必要だ。型チェック後に反映する。
スマホにも使える？
クライアント側はモバイルも対象になるため、画面幅や利用APIを確認する。PC表示だけで完成としない。
作ったものを配ってよい？
秘密情報と個人環境への依存を除き、ライセンスと対応バージョンを確認してから共有する。
小さく始めて運用に移す
- 今日：公式雛形の起動と型チェックを確認する。
- 今週：ダミーデータの1画面だけを作り、PCとスマホで読む。
- 来月：実際に使った操作だけを残し、必要なファイル連携を加える。
関連する使い方
Claude Codeの導入 ／ MCPとの接続 ／ 動画制作の工程
LIFRELLへの相談
制作や調査で毎回発生する確認作業を洗い出し、AIと人が使う作業パネルや手順書へ整理する。
公式資料と確認日
企画の参考：monograph「【続】僕達のAIの使い方、全部見せます。」。本記事の設定例・プロンプト・確認表はLIF Tech編集部が独自に構成した。出演者の実践結果を本記事の検証結果として扱っていない。
公式情報の確認日：2026年10月31日。実機での導入・生成・性能測定は本記事では未実施。手順は公式資料に基づき、作例は実施用の設計例として掲載している。画面、料金、利用条件は変更される場合がある。
