skip to content
日替わり OSS
Table of Contents

リポジトリ

Agent-Native とは

「BuilderIO/agent-native」は、自律的なエージェント（ソフトウェアが人間のように判断・行動する機能）と、そのエージェントに特化したユーザーインターフェース（UI）を組み合わせたアプリケーションを開発するための、TypeScript製オープンソースフレームワークです。このプロジェクトは、単にテキストベースで対話するエージェントの限界を超え、視覚的なフィードバックや人間による直感的な操作、介入が可能な「エージェント型アプリケーション」の構築を目指しています。

近年、大規模言語モデル（LLM）の発展により、タスクを自律的に実行するエージェントの概念が注目されています。しかし、多くの場合、エージェントの活動はテキストの入出力に限定され、その進捗や結果、判断プロセスが不透明になりがちです。Agent-Nativeは、このような課題に対し、エージェントとUIが密接に連携することで、より透過的で、人間がコントロールしやすい強力なアプリケーションを開発する道筋を示しています。

なぜUIを持つエージェントなのか？

プログラミングにおけるエージェントは、単なるテキストボックス以上の環境で機能します。コード、ファイル、テスト、プレビューといった要素が、その能力と結果を可視化し、作業にコンテキストを与えます。

「知識労働」も同様です。複雑な情報処理や創造的なタスクにおいて、エージェントの能力を最大限に引き出し、かつ人間がその作業を効果的に管理するには、専用のUIが不可欠です。UIは以下の価値を提供します。

  • 可視化と理解: エージェントが何を実行しているか、どのような状態にあるかを明確に示します。
  • 人間による介入と制御: エージェントの作業を検査、編集、承認、または一時停止するといった、人間が慣れ親しんだ方法での介入を可能にします。
  • 協調作業: エージェントと人間が役割分担し、互いの強みを活かしながら協力してタスクを完遂する新しいワークフローを促進します。
  • 共有とコラボレーション: エージェントによって生成された成果物や、そのプロセスをチームメンバーと容易に共有できます。

Agent-Nativeは、これらのニーズに応え、エージェントが単なるバックエンドのロジックに留まらず、ユーザーにとって使いやすく、信頼できるアプリケーションとして機能するための土台を提供します。

Agent-Native の仕組み

Agent-Nativeの核となるのは、エージェントとUIが共通のレイヤーを通じて連携する設計思想です。エージェントがUIをクリックするような擬似的な操作ではなく、両者が共通のプログラトコルで「アクション」を実行することで、シームレスな統合を実現します。

1. 共通のアクション層 (Shared actions)

エージェントが外部ツールとして利用する機能と、UIがコードから呼び出す機能が、全く同じ「アクション」として定義されます。これにより、バリデーション、権限管理、および実装が一度で済み、一貫性が保たれます。例えば、ユーザー管理やデータ操作など、エージェントとUIの双方から必要となる機能をdefineActionを使って記述します。

import { defineAction } from "@agent-native/core/action";
import { z } from "zod";


export default defineAction({
  description: "Return a friendly greeting.",
  schema: z.object({
    name: z.string().default("world").describe("Name to greet")
  }),
  http: { method: "GET" },
  run: async ({ name }) => {
    return { message: `Hello, ${name}!` };
  },
});

上記のアクションは、エージェントにとっては利用可能な「ツール」として認識され、ReactコンポーネントからはuseActionQuery("hello", { name: "Alex" })のようなフックを通じて直接呼び出すことができます。さらに、HTTPエンドポイントとしても自動的に公開されるため、多様なアプリケーションサーフェスからの利用が可能です。

2. 共通のデータ層 (Shared data)

エージェントが生成したデータや作業結果は、リアルタイムでUIに反映されます。また、UI上でのユーザー操作による変更もエージェントに利用可能となります。これにより、エージェントと人間が常に最新の情報を共有しながら作業を進めることができます。

3. 共通のアプリケーション状態 (Shared application state)

エージェントは、UIの現在のコンテキスト（例えば、開いているページ、選択中のレコード、アクティブなビューなど）に関する関連情報を受け取ることができます。これにより、エージェントはより状況に応じた、賢明な判断を下し、適切なアクションを選択できるようになります。

主要な機能とコンポーネント

Agent-Nativeは、エージェント型アプリケーションの構築を支援するために、以下のような豊富な機能を提供します。

  • エージェントチャット: ユーザーがUI上でエージェントに作業を委任したり、質問したり、結果を確認したりするための機能。
  • 認証と権限: 共有された作業やデータへのアクセスを制御し、セキュリティを確保するためのメカニズム。
  • スキルとメモリ: エージェントに再利用可能な専門知識（スキル）と、永続的な記憶（メモリ）を持たせることで、学習と状況に応じた行動を可能にします。
  • 自動化: スケジュールや特定のイベントに基づいて、エージェントのタスクを自動実行する機能。
  • エージェントチーム: 複数の専門エージェントを連携させ、より複雑なタスクを分担して実行させるための仕組み。異なるエージェント間で作業を委任することも可能です。
  • PostgreSQLバックエンド: 本番環境でのデータ永続化にPostgreSQLを利用し、ローカル開発ではPGliteを使用することで、開発からデプロイまでをスムーズに行えます。

また、Agent-Nativeは特定のLLM、SQLデータベース、ツール、インフラに依存せず、開発者が自由に選択・連携できるオープンな設計思想を持っています。これにより、既存のシステムとの統合も容易になります。

活用シナリオと応用例

Agent-Nativeを活用することで、様々な分野で革新的なアプリケーションを構築できます。GitHubリポジトリで紹介されているオープンソースのエージェントからも、具体的な活用イメージが湧きます。

  • Clips: 会議の議事録作成、画面録画の要約、音声メモの解析など、情報キャプチャと理解を自動化します。
  • Design: ユーザーの指示に基づいてインタラクティブなデザインを生成し、人間がそれを修正・洗練させるプロセスを支援します。
  • Slides: 企業のブランドガイドラインに沿ったプレゼンテーション資料の作成や編集をエージェントに任せることができます。
  • Analytics: データに対して質問を投げかけ、自動的に分析を実行し、ダッシュボードを構築することで、データ駆動型の意思決定を加速します。
  • Calendar: 会議時間の調整、イベントのスケジュール設定、予約管理など、カレンダー関連のタスクを効率化します。
  • Mail: 大量のメールの中から優先順位付けを行い、返信のドラフトを作成し、フォローアップを自動化することで、メール対応の負担を軽減します。
  • Assets: ブランドイメージに合ったメディアコンテンツの作成と管理を支援します。
  • Content: ブログ記事やレポートなど、様々なコンテンツの生成と管理を行います。

これらの例からわかるように、Agent-Nativeは、単に情報を提供するだけでなく、実際の業務プロセスに深く関与し、人間との協調作業を通じて、生産性と創造性を飛躍的に向上させる可能性を秘めています。

まとめ

Agent-Nativeは、自律的なエージェントの能力を最大限に引き出し、それを人間にとって使いやすいUIと組み合わせることで、次世代のアプリケーション開発を可能にする画期的なフレームワークです。TypeScriptベースであるため、多くのWeb開発者にとって親しみやすく、既存のツールやインフラとの柔軟な連携が可能です。

エージェントが単なる裏方のロジックではなく、ユーザー体験の中心に位置する「エージェント型アプリケーション」の概念は、様々なビジネスシーンに大きな変革をもたらすでしょう。開発者はAgent-Nativeを利用することで、これまで不可能だった、あるいは非常に手間がかかっていたタスクを、より効率的かつインタラクティブに解決するソリューションを構築できるようになります。このフレームワークの今後の進化と、それによって生み出される多様なアプリケーションに注目が集まります。