AI-translated from English; not yet reviewed by a fluent editor.

# チャットと React ページから同じ Agent-Native action を確認する

> Chat テンプレートの hello action をエージェントのチャットと React ルートから呼び出し、戻り値を一つ変更して、ツール呼び出しの証拠とともに文書上の結果を比較します。

By BIG CHANGE Editorial

Published: 2026-10-19T10:08:15.758Z
Updated: 2026-10-19T10:08:15.758Z
Canonical: https://bigchange.ai/blog/agent-native-chat-react-action-parity-guide

![Conceptual charcoal illustration of one laptop showing two blank side-by-side work areas: conversation shapes on the left and a plain input and output area on the right.](https://bigchange.ai/api/media/file/agent-native-chat-react-comparison-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual product interface, action invocation or test result is depicted.

Agent-Native の Chat テンプレートには、エージェントが呼び出せる `hello` action があります。TypeScript 開発者は、同じ action を呼ぶ小さな React ルートを追加し、戻り値を一つ変えて二つの結果を比較できます。本ガイドは [Agent-Native の公式例](https://www.agent-native.com/docs/)に沿っています。BIG CHANGE は文書とテンプレートのソースを確認しましたが、アプリは実行していません。

## 大きな変化

- **変わること：**一つの action から、エージェントのツールと React のクエリに同じ型付き操作を提供できます。この例では、あいさつのコードが一つのファイルにあります。
- **重要な理由：**コード変更後に、二つの呼び出し元が同じ結果を受け取るか確認できます。チャットとページで別々のあいさつ処理を維持する可能性を減らせますが、保存済みのアプリ状態を共有していることの証明にはなりません。
- **確認する点：**チャット画面に実際の action 呼び出しと戻り値が表示される場合は、それらを比較してください。モデルのもっともらしい文章だけでは `hello` を呼んだ証拠になりません。重要な操作に使う前に、認可、入力検証、状態の書き込みを別々に評価してください。

## 文書にある Chat テンプレートを設定する

Node.js 22.22 以降、`pnpm`、コードエディター、チャット呼び出し用の OpenAI API キーが必要です。モデル接続前でも UI の設定はできます。確認した [core パッケージ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json)と npm レジストリでは、2026年10月18日のバージョンは `0.209.2` でした。公式の生成コマンドは変動する `@latest` を使うため、作業前に再確認してください。

1. 新しいディレクトリに独立した Chat アプリを作成し、起動します。

```bash
   npx --yes @agent-native/core@latest create my-app --standalone --template chat
   cd my-app
   corepack enable
   pnpm install
   pnpm dev
```

   コマンド `pnpm dev` が表示するローカル URL を開き、**Continue as local dev** を選びます。8080 が使用中ならポート番号が増えることがあります。生成されたアプリには `actions/hello.ts` が含まれます。

2. 接続には **Custom keys** と自分の OpenAI API キーでチャットエージェントを接続し、Settings で利用可能なモデルを選びます。[環境変数ガイド](https://www.agent-native.com/docs/environment-variables/)によると、Custom keys はスコープ付きの認証情報を、アプリの暗号化されたデータベースベースの保管領域に保存します。キーをソース管理やブラウザー公開の `VITE_` 変数に入れないでください。モデルリクエストはキー所有者のプロバイダーアカウントを使います。機密情報を送る前に最新料金と[データ管理](https://developers.openai.com/api/docs/guides/your-data)を確認してください。ここではタスク費用もデータ保持の動作も測定していません。
3. Get started のチャットで `Call the hello action for Alex.` と入力します。[入門ガイド](https://www.agent-native.com/docs/)の期待される返信は `Hello, Alex!` です。ツールの詳細が表示される場合は、`hello` が `name: "Alex"` で呼ばれ、そのメッセージが返ったことを確認します。同じ文章だけで呼び出しの証拠がなければ、判断はできません。
4. ファイル `actions/hello.ts` を確認します。[固定した Chat テンプレート](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts)には Zod の `name` 入力、GET action、`mcpTool: true` があります。これらは残してください。次の小さなページを `app/routes/hello.tsx` に作ります。

```typescript
   import { useActionQuery } from "@agent-native/core/client/hooks";
   import { useState } from "react";

   export default function HelloRoute() {
     const [name, setName] = useState("Alex");
     const { data } = useActionQuery("hello", { name });

     return (
       <main>
         <label htmlFor="greeting-name">Name</label>
         <input
           id="greeting-name"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
         <p>{data?.message}</p>
       </main>
     );
   }
```

   新しいルートを認識させるため `pnpm dev` を再起動し、表示されたローカル URL の末尾に `/hello` を付けて開きます。入力が `Alex` なら、文書上の結果は `Hello, Alex!` です。

5. 既存の `run` 関数（`actions/hello.ts` 内）で、return 文だけを置き換えます。

```typescript
   return { message: `Welcome, ${name}.` };
```

   ページ `/hello` を更新し、チャットにも再度 Alex に対して `hello` を呼ぶよう依頼します。文書上は両方で `Welcome, Alex.` が期待されます。ページの表示とチャットの action 結果を、利用可能ならツール詳細も含めて比較してください。ページの入力は React の状態に保存されます。このあいさつ action は共有レコードを読み書きしません。

| 確認対象 | return 変更前 | return 変更後 |
| --- | --- | --- |
| `/hello` の入力が `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| チャット action 結果、入力は `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

これらは文書に示された期待値です。実験を完了したと判断する前に、自分の画面の値と、確認できる呼び出し詳細を記録してください。

コマンド `pnpm` がなければ、生成されたアプリで `corepack enable` を実行します。peer dependency エラーには、公式ガイドが再試行前の `npx clear-npx-cache` を提案しています。チャットに **Connect AI** が出る場合は、action の問題を調べる前にプロバイダー設定を終えます。`/hello` がなければルート作成後に開発サーバーを再起動してください。いずれも文書上の対処法で、私たちが観測した結果ではありません。

## 出典と参考資料

- [Agent-Native 入門ガイド](https://www.agent-native.com/docs/)は、生成手順、エージェントへの指示、React hook、期待される返信、対処法を説明しています。action の抜粋には固定テンプレートのプロパティが一つ省略されているため、生成済み action を直接編集してください。
- [固定した Chat の `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts)で、`mcpTool: true` などのソース属性を、commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` で確認できます。このスナップショットは、後日の生成処理が何をインストールするかを証明しません。
- [環境変数](https://www.agent-native.com/docs/environment-variables/)はキーのスコープ、モデル選択、公開される `VITE_` の境界を説明しています。プロバイダーの条件は別途確認してください。本ガイドは実際のチャットリクエストを調査していません。

## Sources

- [Agent-Native 入門ガイド](https://www.agent-native.com/docs/) — [Agent-Native 入門ガイド](https://www.agent-native.com/docs/) は、生成手順、エージェントへの指示、React hook、期待される返信、対処法を説明しています。action の抜粋には固定テンプレートのプロパティが一つ省略されているため、生成済み action を直接編集してください。
- [固定した Chat の hello action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [固定した Chat の `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) で、commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` の `mcpTool: true` などのソース属性を確認できます。このスナップショットは、後日の生成処理が何をインストールするかを証明しません。
- [固定した core パッケージ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — パッケージのバージョン、Node 要件、ライセンス。
- [Agent-Native の環境変数](https://www.agent-native.com/docs/environment-variables/) — [環境変数](https://www.agent-native.com/docs/environment-variables/) はキーのスコープ、モデル選択、公開される `VITE_` の境界を説明しています。プロバイダーの条件は別途確認してください。本ガイドは実際のチャットリクエストを調査していません。
- [OpenAI API のデータ管理](https://developers.openai.com/api/docs/guides/your-data) — プロバイダーのデータ処理に関する参考資料。タスク固有の通信は観測していません。