@agenteract/react
Advanced tools
React and React Native integration for the Agenteract agent interaction framework.
Agenteract React provides React/React Native bindings to make your web and mobile applications inspectable and controllable by AI agents.
npm install @agenteract/react
# or
yarn add @agenteract/react
# or
pnpm add @agenteract/react
For deep linking support on mobile, install these peer dependencies:
# For Expo
npx expo install @react-native-async-storage/async-storage expo-linking
# For React Native
npm install @react-native-async-storage/async-storage
import { AgentDebugBridge } from '@agenteract/react';
function App() {
return (
<>
<YourAppContent />
{/* Add AgentDebugBridge - invisible component */}
<AgentDebugBridge projectName="my-app" />
</>
);
}
import { useAgentBinding } from '@agenteract/react';
function MyComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<div>
{/* Button with tap handler */}
<button
{...useAgentBinding({
testID: 'increment-button',
onTap: () => setCount(count + 1)
})}
onClick={() => setCount(count + 1)}
>
Increment: {count}
</button>
{/* Text input */}
<input
{...useAgentBinding({
testID: 'text-input',
onChangeText: (value) => setText(value)
})}
value={text}
onChange={(e) => setText(e.target.value)}
/>
</div>
);
}
For Local Development (Automatic):
Web apps automatically connect to localhost:8765 - no setup needed!
Just start the dev server:
pnpm agenteract dev
Add to your app.json:
{
"expo": {
"scheme": "myapp",
"plugins": [
[
"expo-linking",
{
"schemes": ["myapp"]
}
]
]
}
}
iOS - Add to Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>myapp</string>
</array>
</dict>
</array>
Android - Add to AndroidManifest.xml:
<activity android:name=".MainActivity">
<!-- Existing intent filters... -->
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="myapp" />
</intent-filter>
</activity>
import { AgentDebugBridge } from '@agenteract/react';
export default function App() {
return (
<>
<YourAppContent />
{/* AgentDebugBridge handles deep linking automatically */}
<AgentDebugBridge projectName="my-app" />
</>
);
}
The AgentDebugBridge automatically:
import { useAgentBinding } from '@agenteract/react';
import { TouchableOpacity, TextInput, Text } from 'react-native';
function MyComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<View>
{/* Button with tap handler */}
<TouchableOpacity
{...useAgentBinding({
testID: 'increment-button',
onTap: () => setCount(count + 1)
})}
onPress={() => setCount(count + 1)}
>
<Text>Increment: {count}</Text>
</TouchableOpacity>
{/* Text input */}
<TextInput
{...useAgentBinding({
testID: 'text-input',
onChangeText: (value) => setText(value)
})}
value={text}
onChangeText={setText}
/>
</View>
);
}
For Simulators/Emulators (Automatic):
Simulators automatically connect to localhost:8765 - no setup needed!
For Physical Devices (Deep Link Pairing):
Configure your app in the CLI:
pnpm agenteract add-config . my-app native --scheme myapp
For Expo apps, use scheme exp:
pnpm agenteract add-config . my-app expo --scheme exp
Start the dev server:
pnpm agenteract dev
Connect your device:
pnpm agenteract connect
Scan the QR code with your device camera
The app will receive the deep link, save the configuration, and connect automatically!
CLI generates URL: When you run pnpm agenteract connect myapp:
myapp://agenteract/config?host=192.168.1.5&port=8765&token=abc123
For Expo Go:
exp://192.168.1.5:8081/--/agenteract/config?host=192.168.1.5&port=8765&token=abc123
Device receives link: Opens your app via QR code or simulator injection
App parses config: AgentDebugBridge extracts host, port, and token
Config persists: Saved to AsyncStorage automatically
Auto-reconnect: Future app launches use saved config
Your app must handle deep links in one of these formats:
Standard apps:
<scheme>://agenteract/config?host=<ip>&port=<port>&token=<token>
Expo Go:
exp://<ip>:8081/--/agenteract/config?host=<ip>&port=<port>&token=<token>
localhost or 127.0.0.1)interface AgentDebugBridgeProps {
projectName: string; // Required: matches agenteract.config.js
autoConnect?: boolean; // Optional: enable/disable automatic connection (default: true)
}
Props:
projectName (required): Must match the project name in your agenteract.config.jsautoConnect (optional, default: true): Controls connection behavior:
true: Automatically connects on simulators/emulators and when deep link config is savedfalse: Only connects after receiving a deep link configurationConnection Behavior:
agenteract connectExample - Disable Auto-Connect:
// Only connect after explicit deep link pairing
<AgentDebugBridge projectName="my-app" autoConnect={false} />
interface AgentBindingProps {
testID: string; // Required: unique identifier
onTap?: () => void; // Tap handler
onLongPress?: () => void; // Long press handler
onChangeText?: (text: string) => void; // Text input handler
onScroll?: (direction: string, amount: number) => void; // Scroll handler
onSwipe?: (direction: string, velocity: string) => void; // Swipe handler
}
// Returns props to spread onto your component
const props = useAgentBinding({ testID: 'my-button', onTap: handleTap });
import { logToAgent } from '@agenteract/react';
// Log messages visible to both console and agent
logToAgent('User logged in');
logToAgent('Error: Failed to fetch data', { userId: 123 });
scheme is set in app.jsonInfo.plist has correct CFBundleURLSchemesAndroidManifest.xml intent filteradd-config --scheme myapppnpm agenteract dev[Agenteract] Config saved in logs@react-native-async-storage/async-storage is installednpx expo install @react-native-async-storage/async-storagenpm install @react-native-async-storage/async-storage && cd ios && pod installexpo-linking is installed: npx expo install expo-linkingexp or expsEnsure:
testID set via useAgentBinding()AgentDebugBridge is rendered in your component treeSee the example apps:
MIT
See the main Agenteract repository for contribution guidelines.
FAQs
React and React Native bridge utilities for Agenteract
The npm package @agenteract/react receives a total of 6 weekly downloads. As such, @agenteract/react popularity was classified as not popular.
We found that @agenteract/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.