Agentuity Docs

Wrap your app in AgentuityProvider to connect React hooks to your agents.

Basic Setup

import { AgentuityProvider } from '@agentuity/react';
 
export default function App() {
  return (
    <AgentuityProvider>
      <YourApp />
    </AgentuityProvider>
  );
}

In development, the provider automatically connects to http://localhost:3500 where your agents run.

Production Configuration

For deployed applications, set the baseUrl to your Agentuity deployment:

import { AgentuityProvider } from '@agentuity/react';
 
export default function App() {
  return (
    <AgentuityProvider baseUrl="https://your-project.agentuity.cloud">
      <YourApp />
    </AgentuityProvider>
  );
}

Environment-Based Configuration

Use environment variables to switch between development and production:

import { AgentuityProvider } from '@agentuity/react';
 
const baseUrl = process.env.NODE_ENV === 'production'
  ? 'https://your-project.agentuity.cloud'
  : undefined; // Falls back to localhost:3500
 
export default function App() {
  return (
    <AgentuityProvider baseUrl={baseUrl}>
      <YourApp />
    </AgentuityProvider>
  );
}

For production, set your deployment URL via your framework's environment variable pattern.

Provider Props

Prop	Type	Default	Description
`baseUrl`	`string`	`http://localhost:3500`	Base URL for agent requests
`children`	`ReactNode`	—	Your app components

Authentication Integration

For apps with user authentication, wrap AgentuityProvider with AuthProvider from @agentuity/auth/react:

import { AgentuityProvider } from '@agentuity/react';
import { AuthProvider, createAuthClient } from '@agentuity/auth/react';
 
const authClient = createAuthClient();
 
export default function App() {
  return (
    <AgentuityProvider>
      <AuthProvider authClient={authClient}>
        <YourApp />
      </AuthProvider>
    </AgentuityProvider>
  );
}

Once configured, useAPI and useWebsocket automatically include auth tokens in requests. See Adding Authentication for full setup.

When you run bun dev or agentuity dev, the CLI generates TypeScript types for your agents at .agentuity/types.d.ts. This enables autocomplete and type checking for agent names and their input/output schemas.

// TypeScript knows which routes exist and their types
const { invoke } = useAPI('POST /api/chat'); // Autocomplete for routes
await invoke({ message: 'Hello' });  // Type-checked input

Type Generation

Types are regenerated automatically when you add or modify agents. If types seem stale, restart the dev server.

Next Steps

React Hooks: Learn about useAPI, useWebsocket, and useEventStream
Deployment Scenarios: Choose where your frontend lives

Need Help?

Join our Community for assistance or just to hang with other humans building agents.

Send us an email at hi@agentuity.com if you'd like to get in touch.

Please Follow us on

If you haven't already, please Signup for your free account now and start building your first agent!

Provider Setup