React on KnightLiブログ

CopilotKitの使い方は? AI Copilot と Generative UI をフロントエンドアプリケーションに接続する

Sat, 06 Jun 2026 22:26:00 +0800

CopilotKit/CopilotKit は、フロントエンドアプリケーション用の AI Copilot フレームワークです。その位置付けは、「別のチャットボックスを作成する」ことではなく、エージェント、生成 UI、および React、Angular、モバイル、Slack およびその他のアプリケーションのコンテキスト認識型インタラクションへのアクセスを提供することです。

FAQ ロボットを製品に組み込むだけの場合、CopilotKit は少し重いかもしれません。 AI に現在のページのステータスを真に理解し、ビジネスオブジェクトを操作し、UI を生成し、ユーザーがワークフローを完了できるように支援することを望むのであれば、それはより価値があります。

それはどのような問題を解決しますか?

多くの製品で AI を統合するための最初のステップはチャットボックスを追加することですが、多くの場合、チャットボックスとアプリケーション自体は分離されています。

AI はユーザーの現在のページを知りません。
フォーム、リスト、選択した項目、ビジネスステータスがわからない;
質問に答えることのみができ、操作には参加できません。
生成されたコンテンツを実際の UI に変換するのは困難です。
フロントエンドとエージェントのバックエンドプロトコルは統一されていません。

CopilotKit が実現したいのは、AI をフロントエンドの状態、コンポーネント、アクションにより自然に接続するための「エージェントネイティブフロントエンドスタック」です。

どのシナリオが適していますか?

以下に適しています。

SaaS 製品のインテリジェントアシスタント。
フォーム記入とビジネスプロセスのガイダンス;
データダッシュボードでの自然言語分析;
複雑なバックエンドシステムの運用支援。
生成的な UI コンポーネントの生成。
フロントエンドアプリケーションとエージェントバックエンド間の連携。
AG-UIプロトコルを勉強したいチーム。

境界を使用する

CopilotKit は、AI がアプリケーションを自由に制御できるようにするものではありません。実装に関しては、権限の設計が非常に重要です。

どのアクションを自動的に実行できるか。
どのアクションを 2 回確認する必要があるか。
AI がどのページデータを参照できるか。
誤った操作をロールバックする方法。
ユーザーのプライバシーと監査ログを処理する方法。

フロントエンド Copilot の鍵は、「モデルの答えがどれほど賢いか」ではなく、「ユーザーが正しいコンテキストで作業を行うのに安全に役立つかどうか」です。

まとめ

CopilotKit は、製品のフロントエンドに AI を深く埋め込みたい開発者に適しています。通常のチャットコンポーネントよりも一歩進んで、エージェント、生成 UI、アプリケーション状態のリンクに重点を置いています。

AI ネイティブの製品インターフェイスを作成している場合は、それを真剣に検討してください。単なる顧客サービスの Q&A であれば、軽量のチャットコンポーネントを使用するだけで十分かもしれません。

参考ソース

CopilotKit/CopilotKit - GitHub

Remotion：React で動画をプログラムから生成する

Wed, 27 May 2026 14:39:22 +0800

remotion-dev/remotion は、React で動画をプログラムから作成するためのフレームワークです。動画制作を従来のタイムラインツールから切り出し、コンポーネント、状態、データ、API、CSS、Canvas、SVG、WebGL、アルゴリズムで制御できるフロントエンドエンジニアリングの問題に変えます。

プロジェクト URL：remotion-dev/remotion

この種のツールは、現在の AI コーディングワークフローととても相性が良いです。agent が Web ページ、グラフ、データビューを生成できるなら、その延長で動画スクリプト、アニメーションコンポーネント、レンダリング可能な短編動画も生成できます。

Remotion は何を解決するのか

従来の動画ツールは手作業の編集に強い一方で、スケール、パラメータ化、自動化は得意ではありません。

たとえば次のようなタスクです。

ユーザーごとにパーソナライズされた年間振り返り動画を生成する
データベースに基づいて製品デモ動画を自動生成する
グラフ、コード片、解説字幕を組み合わせて技術系の短編動画にする
マーケティング素材、SNS 向け短編動画、講座クリップを一括生成する
CI/CD やバックエンドサービスでオンデマンドに動画をレンダリングする

従来の編集ソフトを使う場合、これらのタスクを完全に自動化するのは難しくなります。Remotion の考え方は、動画を React アプリとして書くことです。各フレームは、ある時点におけるコンポーネントとデータの結果になります。

なぜ React なのか

Remotion README に書かれている理由は明快です。React は Web 技術とコンポーネント化の能力を再利用できます。

これにより、次のものを使えます。

CSS でレイアウトとアニメーションを作る
SVG でベクターグラフィックを作る
Canvas と WebGL で複雑な描画を行う
JavaScript / TypeScript で変数、関数、API 呼び出し、数学、アルゴリズムを扱う
React コンポーネントで再利用、合成、高速な反復を行う

つまり、フロントエンド開発者はまったく未知の動画 DSL を一から学び直す必要がありません。既存の UI、グラフ、デザインシステム、データロジックの多くを、動画生成の場面へ移せます。

クイックスタート

Node.js がすでにインストールされている場合、README に示されている入口コマンドは次のとおりです。

`1`	`npx create-video@latest`

プロジェクトを作成した後は、通常 React コンポーネントで画面を記述し、Remotion にフレーム単位で動画をレンダリングさせます。

より詳しいドキュメントはこちらです。

ドキュメント：remotion.dev/docs
API Reference：remotion.dev/api

どのような場面に向いているか

Remotion は「動画コンテンツがデータまたはコードで駆動される」場面に最も向いています。

パーソナライズ動画

たとえば年間振り返り、ユーザー実績、注文サマリー、学習レポートなどです。ユーザーごとにデータは異なりますが、視覚構造は同じです。React コンポーネントとデータ駆動を組み合わせるほうが、手作業の編集より自然です。

技術デモ動画

動画の中にコード、グラフ、製品画面、手順アニメーション、説明テキストが含まれる場合、Remotion はそれらの要素を繰り返しレンダリングできるテンプレートとして整理するのに向いています。

データ動画とグラフアニメーション

データ可視化はもともとフロントエンドの得意分野です。Remotion を使うと、グラフを Web ページ上に表示するだけでなく、タイムラインに沿って動画へ組み込めます。

AI 生成動画ワークフロー

AI agent はまずスクリプトと素材構造を生成し、次に Remotion コンポーネントを生成し、最後に動画をレンダリングできます。これはモデルに最終動画を直接生成させるより制御しやすい方法です。中間成果物がコードなので、確認、修正、バージョン管理、再利用ができます。

AI コーディングツールにとっての意味

Remotion は Codex、Claude Code、Cursor、Gemini CLI のような AI コーディングツールにとって特に面白い存在です。

理由は、動画生成が開発タスクへ分解されるからです。

React コンポーネントを生成する。
スタイルとレイアウトを調整する。
データを接続する。
画面をプレビューする。
フィードバックに基づいて修正する。
レンダリングして出力する。

この流れは agent に非常に向いています。各ステップにファイル、コード、プレビュー、明確なフィードバックがあります。「動画ファイルを直接生成する」場合と比べて、コード化された動画はレビューと反復がしやすくなります。

さらにブラウザーのサイドバー、スクリーンショット確認、自動レンダリング、コメントによるフィードバックと組み合わせれば、Remotion は AI ワークフローにおける動画成果物レイヤーになり得ます。

使う前にライセンスを確認する

Remotion README は、Remotion には特殊なライセンスがあり、一部の会社利用シナリオでは company license が必要になると明記しています。

そのため、単なる MIT の小さなツールとして扱うべきではありません。個人プロジェクト、オープンソースプロジェクト、商用プロジェクト、企業内ツールでは、ライセンス要件が異なる可能性があります。会社の本番用途で正式に使う前に、LICENSE ページと公式のライセンス説明を確認する必要があります。

これは特に、Remotion を自動コンテンツ生成、マーケティング素材生成、企業内の動画パイプラインへ組み込む場合に重要です。

私の見方

Remotion の価値は「React で動画を作る」ことだけではありません。動画を、プログラム可能で、再利用可能で、自動化可能な成果物に変えることです。

一般的なフロントエンドチームにとっては、データ駆動の動画テンプレートに向いています。AI ツールにとっては、安定した出力先に近い存在です。モデルはブラックボックスの動画を一度に生成する必要がなく、読みやすく、変更でき、レンダリング可能な React コードを生成できます。

コンテンツを一括生成したい、パーソナライズしたい、データに基づいて更新したい、あるいは agent に視覚的な細部を何度も調整させたいなら、Remotion はツールボックスに入れる価値があります。これは従来の編集ソフトの代替品ではなく、動画制作をソフトウェアエンジニアリングの流れへ接続する方法です。

web-video-presentation：記事を録画可能な Web 動画にする Agent Skill

Fri, 15 May 2026 09:02:15 +0800

web-video-presentation は ConardLi/garden-skills に含まれる agent skill だ。目的は明確で、記事やナレーション原稿を、録画して動画にできる Web プレゼンへ変換することだ。

プロジェクト：https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation

これは普通のスライドテンプレートでも React コンポーネント集でもない。 AI agent 向けの動画プレゼン制作 workflow であり、内容を script にし、outline に分け、theme を選び、Vite + React + TypeScript で 16:9 のクリック駆動 Web 画面を作る。

スライドではなく動画制作面

README では、生成物を slide deck ではなく “video production surface” と呼んでいる。

各クリックはナレーションのひと区切りを進める。各 step は 1920×1080 の舞台を持ち、画面は語りに合わせて変わる。進捗 UI は通常隠れ、録画画面を邪魔しない。

ブログ記事の動画化、ナレーション稿のビジュアル化、製品 demo、チュートリアル、keynote 風の発表に向く。

価値は動画編集ソフトを置き換えることではなく、ブラウザを制御可能で反復可能な動画キャンバスにすることだ。

設計原則

固定 16:9 ステージを使い、1920×1080 の座標系で設計して viewport に合わせて縮小する。これにより録画時のレイアウトずれを防ぐ。

グローバル step cursor により、クリックやキーボードで (chapter, step) を進め、ローカルに進捗を保存する。

ひとつの step はひとつの考えだけを扱う。bullet を積むのではなく、各 beat が独立した画面になるべきだ。

構造は script のリズムで決まる。script がテンポを決め、outline が章と step を決め、画面が物語に従う。

各 scene には動く視覚的アンカーが必要だ。静的テキストだけなら、まだ動画言語になっていない。

theme は色替えではなく、タイポグラフィ、色、カード、背景、区切り、装飾、雰囲気を semantic token で制御する。

四段階の workflow

第一段階は内容作成。記事が渡されたら script.md に書き換え、outline.md を作る。すでにナレーション稿があれば、それを script.md に保存して outline を作る。

第二段階は Web 開発。 Vite / React / TypeScript プロジェクトを作り、章ごとに画面を実装する。第 1 章は必ずメインスレッドで完成させ、ユーザー確認を受ける。これが後続章のスタイル基準になる。

第三段階は任意の音声合成。各章の narrations.ts からナレーション定義を抽出し、音声合成へ渡せる。

第四段階は録画と後処理。Web アプリ自体が録画用の舞台になる。

script、outline、theme、素材計画、開発モード、第 1 章の確認、音声合成の有無にはチェックポイントがある。 agent が最初から最後まで勝手に進まないためだ。

outline にアニメーションを書かない理由

outline.md はリズムと情報密度を計画するが、具体的なアニメーションは書かない。章分け、step 数、画面内容、素材、推定時間は書けるが、CSS animation、clip-path、filter の実装は書かない。

outline でアニメーションを固定すると、後の実装が機械的になる。動画らしさは、章の内容関係に応じて実装時に設計する方がよい。

narrations.ts を真実のソースにする

各章には narrations.ts があり、step 数と対応するナレーション文を保存する。章の .tsx で使われる最大 step は narrations.length と一致しなければならない。

これにより、script.md、outline.md、章コード、chapters.ts、音声ファイルのずれを防げる。動画制作では、ナレーション、画面、音声、step 数の同期が非常に重要だ。

Theme は単なるスキンではない

内蔵 theme には paper-press、warm-keynote、midnight-press、blueprint、chalk-garden、terminal-green、bauhaus-bold、sunset-zine、newsroom、monochrome-print がある。

これは単なる色違いではなく、印刷、keynote、設計図、端末、newsroom など異なる視覚言語を表す。

agent は計画段階で内容と語調に合う theme を 2〜3 個提案する。カスタム theme も作れる。

開発モード

第 1 章は必ずメインスレッドで作って確認する。その後は、章ごとに確認する Mode A、順番に実装して最後に確認する Mode B、subagent で並列に進める Mode C がある。

Mode C は速いが、章ごとの表情に差が出る可能性がある。theme token が全体の統一感を支える。

向いている人

記事、脚本、製品紹介、チュートリアル、技術解説など、すでに内容がある人に向いている。単に動画テーマを考えるツールではなく、内容を動画化する制作 workflow だ。

まとめ

web-video-presentation の価値は、美しい React ページではなく、記事、ナレーション、outline、theme、章実装、音声、録画を、確認可能な制作フローとしてつなぐ点にある。

直接使わなくても、「1 step 1 idea」「第 1 章をスタイル基準にする」「narrations.ts を真実のソースにする」「outline で動きを固定しない」という考え方は、自分の AI コンテンツ制作に応用できる。

小さく始める方法

最初から全記事を多言語化する必要はありません。

まず検索流入や収益価値の高い記事を選び、英語版を一つ丁寧に作ります。

次に、その記事でタイトル、description、内部リンク、カテゴリ、タグ、画像 alt、構造化データを確認します。

問題がなければ、同じ型を繁体字、日本語、スペイン語へ広げます。

各言語で検索クエリ、クリック率、滞在時間、直帰率を見ると、どの市場に追加投資すべきか判断しやすくなります。

多言語 SEO は翻訳作業ではなく、公開後の観測まで含めた継続運用です。

品質確認の観点

翻訳後は、単語の正しさだけでなく、見出し、内部リンク、コード、画像説明、カテゴリ、タグが自然か確認します。

特に技術記事では、製品名、CLI、ファイル名、API 名を勝手に訳さないことが重要です。