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

Шаблон Chat в Agent-Native содержит действие hello, которое может вызвать агент. Разработчик TypeScript может добавить небольшой маршрут React, вызывающий то же действие, изменить одно возвращаемое значение и сравнить результаты. Это руководство следует документированному примеру Agent-Native. BIG CHANGE изучил документацию и исходники шаблона, но не запускал приложение.

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

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

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

Нужны Node.js 22.22 или новее, pnpm, редактор кода и ключ OpenAI API для вызова из чата. Интерфейс можно подготовить до подключения модели. Изученный пакет core и реестр npm показывали версию 0.209.2 18 октября 2026 года. Официальная команда создания использует меняющийся @latest; перед выполнением снова проверьте версию.

1. В новом каталоге создайте и запустите самостоятельное приложение Chat:

   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. Согласно руководству по переменным окружения, Custom keys сохраняет учётные данные с ограниченной областью действия в зашифрованном хранилище приложения на базе данных. Не помещайте ключи в систему контроля версий или доступные браузеру переменные VITE_. Запросы используют аккаунт владельца ключа у провайдера; перед отправкой чувствительных материалов проверьте актуальные цены и управление данными. Стоимость задачи и фактическое хранение данных здесь не измерялись.
3. В чате Get started попросите: Call the hello action for Alex. В начальном руководстве ожидаемый ответ — Hello, Alex!. Если интерфейс показывает детали инструментов, подтвердите вызов hello с name: "Alex" и возврат этого сообщения. Совпадающая фраза без свидетельства вызова не даёт определённого вывода.
4. Изучите actions/hello.ts. Шаблон Chat зафиксированной ревизии определяет вход Zod name, действие GET и mcpTool: true. Сохраните эти свойства. Создайте app/routes/hello.tsx с этой небольшой страницей:

   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 замените только оператор возврата:

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

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

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

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

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

• Начальное руководство Agent-Native описывает создание, запрос агенту, React hook, ожидаемые ответы и восстановление. В его фрагменте действия пропущено свойство зафиксированного шаблона, поэтому редактируйте созданное действие на месте.
• Действие Chat hello зафиксированной ревизии подтверждает свойства исходника, включая mcpTool: true, в commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. Этот снимок не доказывает, что установит более поздняя команда создания.
• Переменные окружения объясняют область действия ключей, выбор модели и публичную границу VITE_. Условия провайдера проверяйте отдельно: руководство не исследовало реальный запрос чата.