2. Configuration
Create an agenteract.config.js file in the root of your project. This file defines which applications Agenteract will manage.
Here is an example configuration for a monorepo containing an Expo and a Vite project:
// agenteract.config.js
export default {
/**
* The port for the central Agenteract server.
* The agent connects to this port.
*/
port: 8766,
/**
* An array of projects to manage.
*/
projects: [
{
// A unique identifier for this app. Used for targeting commands.
name: 'expo-app',
// The path to the app's root directory, relative to this config file.
path: './examples/expo-example',
// The type of project. Can be 'expo' or 'vite'.
type: 'expo',
// The port for this app's dev server PTY bridge.
ptyPort: 8790,
},
{
name: 'react-app',
path: './examples/react-example',
type: 'vite',
ptyPort: 8791,
},
],
};
Configuration Options
- port: The main port for the Agenteract server.
- projects: An array of project objects.
- name: A unique name for your app.
- path: The relative path to your app’s root directory.
- type: Supported types:
expo,vite. - ptyPort: Port for the PTY bridge that lets Agenteract interact with your app’s dev server.
3. Instrumenting Your Application
Add the AgentBridge component to your app’s entry point.
For React Native (Expo):
import { AgentBridge } from '@agenteract/expo';
import { View, Text } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1 }}>
{/* Your existing application */}
<Text>Welcome to my app!</Text>
{/* Add the AgentBridge */}
<AgentBridge />
</View>
);
}
For React (Vite):
import { AgentBridge } from '@agenteract/react';
function App() {
return (
<>
{/* Your existing application */}
<h1>Welcome to my app!</h1>
{/* Add the AgentBridge */}
<AgentBridge />
</>
);
}
export default App;
For Swift UI — see agenteract-swift.
4. Running Agenteract
With your configuration in place, you can now start the Agenteract server:
agenteract start
- Start the central Agenteract server on the configured port.
- Start a PTY bridge for each project on its configured ptyPort.
- Automatically start development servers (e.g. npm run dev or npx expo start).
AI agents can now connect to the Agenteract server using AGENTS.md and interact with your app’s component hierarchy.
Your agent is now ready to Agenteract!