Agent-Native Plan

Agent-Native

Agent-Native は、自律的な作業と専用 UI を組み合わせたエージェントを構築するためのオープンソース TypeScript フレームワークです。各機能を アクション として一度定義すれば、エージェントはそれをツールとして使い、UI はコードから呼び出せます。

クイックスタート

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

フレームワークの全体像については、スタートガイドをご覧ください。

UI を備えたエージェントを構築する理由

コーディングエージェントが扱うのはテキストボックスだけではありません。環境にはコンテキスト、ツール、ファイル、テスト、プレビューが用意されており、エージェントの機能と結果を可視化できます。

ナレッジワークにも同じような環境が必要です。UI はエージェントにできることを示し、作業内容の確認、編集、承認、共有を人々が慣れた方法で行えるようにします。

Agent-Native の仕組み

• 共有アクション。 エージェントは各機能をツールとして呼び出し、UI はコードから呼び出します。どちらの方法でも、同じ検証、権限、実装が使われます。
• 共有データ。 エージェントが行った作業は UI に表示され、UI で行った作業はエージェントから利用できます。
• 共有アプリケーション状態。 エージェントは、現在のページ、選択中のレコード、アクティブなビューなど、関連する UI の状態を受け取ります。

エージェントは UI をクリックして操作するのではありません。UI と同じアクションレイヤーを通じて作業します。

例：共有アクション

actions/hello.ts を作成します。

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

// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
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}!` };
  },
});

エージェントは hello をツールとして受け取ります。React は useActionQuery("hello", { name: "Alex" }) を使って同じ関数を呼び出します。Agent-Native は HTTP、MCP、A2A、CLI 経由でも公開します。

含まれる機能

• エージェントチャット： 同じ UI で、作業の委任、質問、結果の確認を行えます。
• 認証と権限： 共有作業へのアクセスや変更を許可するユーザーを管理できます。
• スキルとメモリ： エージェントに再利用可能な専門知識と永続的なコンテキストを与えます。
• 自動化： スケジュールやイベントに応じてエージェントの作業を実行します。
• エージェントチーム： 同じワークスペース内、または接続されたエージェント間で、専門エージェントに作業を委任します。
• PostgreSQL バックエンド： 本番環境では PostgreSQL を、Nitro 互換の任意のホストでのローカル開発には PGlite を使用できます。

例：実行中のアプリを視覚的に編集する

Claude Code で /visual-edit を使うと、小さな UI の調整を一つずつプロンプトで指示する代わりに、キャンバス上で実行中のアプリを編集できます。実際のページを並べて比較し、選んだ編集内容をソースに適用するよう Claude に依頼できます。例：

/visual-edit the onboarding flow, plus home at every breakpoint

デスクトップ、タブレット、モバイルの各サイズで、ホームと並べてオンボーディング画面を確認します。ボタンの色や余白を直接調整し、保留中の編集内容をソースに適用するよう Claude に依頼します。詳しい手順と共有方法については、ビジュアル編集ガイドをご覧ください。

LLM、SQL データベース、ツール、インフラストラクチャをお持ち込みください。構築したものはすべて、ご自身のものです。

Agent-Native の動作をご覧ください：

https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c

オープンソースのエージェント

以下のエージェントから始めるか、ご自身のエージェントを作成する際の例としてお使いください。

Clips 会議、画面、音声メモを記録して、内容を把握します。	Design インタラクティブなデザインを生成し、ブラッシュアップします。	Slides ブランドイメージに合ったプレゼンテーションを作成、編集します。
Analytics データについて質問し、ダッシュボードを作成します。	Calendar 空き時間を見つけ、予定を組み、予約を管理します。	メール メールを優先順位付けし、返信を下書きし、フォローアップします。
アセット ブランドに沿ったメディアを作成し、整理します。	コンテンツ コンテンツを下書きし、整理し、公開します。	プラン 図、ワイヤーフレーム、プロトタイプを使ってビジュアルプランを作成し、レビューします。

アプリの全ギャラリーを見るか、フレームワークガイドから始めてください。

ドキュメントとコミュニティ

• ドキュメントをお読みください。
• Discordに参加して、質問したり、作っているものを共有したり、助けを得たりしましょう。

コントリビュート

このリポジトリ自体で作業しますか？ローカルセットアップ、ワークスペース構成、ガードスクリプトについては DEVELOPMENT.md を参照してください。

ライセンス

MIT