МИР НЕ СТОИТ НА МЕСТЕ.RSS
BIG CHANGE.

Версия Markdown

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

# Проверьте одно действие Agent-Native через чат и страницу React

> Вызовите действие hello из шаблона Chat через чат агента и маршрут 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.

Шаблон Chat в Agent-Native содержит действие `hello`, которое может вызвать агент. Разработчик TypeScript может добавить небольшой маршрут React, вызывающий то же действие, изменить одно возвращаемое значение и сравнить результаты. Это руководство следует [документированному примеру Agent-Native](https://www.agent-native.com/docs/). BIG CHANGE изучил документацию и исходники шаблона, но не запускал приложение.

## Главное изменение

- **Что меняется:** одно действие может предоставлять одну типизированную операцию инструменту агента и запросу React. В этом примере код приветствия находится в одном файле.
- **Почему это важно:** разработчик может проверить, получают ли оба вызывающих компонента одинаковый результат после изменения кода. Это снижает вероятность поддержки раздельной логики приветствия для чата и страницы, но не доказывает совместное использование сохранённого состояния приложения.
- **Что проверить:** сравните реальный вызов действия и возвращаемое значение, если интерфейс чата их показывает. Правдоподобная фраза модели сама по себе не доказывает вызов `hello`. Перед применением такого подхода к важным операциям отдельно оцените авторизацию, проверку входных данных и запись состояния.

## Настройте документированный шаблон Chat

Нужны Node.js 22.22 или новее, `pnpm`, редактор кода и ключ OpenAI API для вызова из чата. Интерфейс можно подготовить до подключения модели. Изученный [пакет core](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) и реестр npm показывали версию `0.209.2` 18 октября 2026 года. Официальная команда создания использует меняющийся `@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
```

   Откройте локальный URL, выведенный `pnpm dev`, и выберите **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 и `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`, чтобы он обнаружил маршрут, затем добавьте `/hello` к выведенному локальному URL. При вводе `Alex` документированный результат — `Hello, Alex!`.

5. В существующей функции `run` файла `actions/hello.ts` замените только оператор возврата:

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

   Обновите `/hello` и снова попросите чат вызвать `hello` для Alex. Документированное ожидание — `Welcome, Alex.` в обоих местах. Сравните сообщение на странице с результатом действия в чате, включая детали инструмента, если они доступны. Страница хранит ввод в состоянии React; это действие приветствия не читает и не записывает общую запись.

| Проверка | До изменения возврата | После изменения возврата |
| --- | --- | --- |
| `/hello` с `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Результат действия в чате для `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Это ожидаемые значения из документации. Запишите собственные отображённые значения и доступные детали вызова, прежде чем считать эксперимент завершённым.

Если `pnpm` отсутствует, выполните `corepack enable` в созданном приложении. При ошибках peer dependencies официальное руководство предлагает `npx clear-npx-cache` перед повторной попыткой. Если чат показывает **Connect AI**, сначала завершите настройку провайдера. Если `/hello` отсутствует, перезапустите сервер разработки после создания маршрута. Это документированные способы восстановления, а не наблюдавшиеся нами результаты.

## Источники и дополнительное чтение

- [Начальное руководство Agent-Native](https://www.agent-native.com/docs/) описывает создание, запрос агенту, React hook, ожидаемые ответы и восстановление. В его фрагменте действия пропущено свойство зафиксированного шаблона, поэтому редактируйте созданное действие на месте.
- [Действие Chat `hello` зафиксированной ревизии](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, ожидаемые ответы и восстановление. В его фрагменте действия пропущено свойство зафиксированного шаблона, поэтому редактируйте созданное действие на месте.
- [Действие Chat hello зафиксированной ревизии](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [Действие Chat `hello` зафиксированной ревизии](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) подтверждает свойства исходника, включая `mcpTool: true`, в commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Этот снимок не доказывает, что установит более поздняя команда создания.
- [Пакет 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) — Справка об обработке данных провайдером; трафик этой задачи не наблюдался.