Skip to content

Conversation

@Suhaib3100
Copy link

Summary

This PR adds an enabled prop to the useAgent hook, allowing for conditional agent connections. This is a feature that was requested in issue #533.

Problem

Currently, when using useAgent, the connection is always established immediately when the hook is called. This makes it difficult to implement patterns like:

  • Only connecting when a user is authenticated
  • Deferring connection until a component is visible (lazy loading)
  • Feature flag based conditional connections

Solution

Added an enabled optional boolean prop to UseAgentOptions that controls whether the agent connection should be established.

Implementation Details

  1. Type Definition: Added enabled?: boolean to UseAgentOptions with JSDoc documentation explaining the behavior
  2. Default Value: enabled defaults to true to maintain backward compatibility
  3. Initial State: Uses startClosed: !enabled to control the initial connection state via PartySocket
  4. State Transitions: Added a useEffect with a prevEnabledRef to handle dynamic changes:
    • When enabled transitions from false to true: calls agent.reconnect()
    • When enabled transitions from true to false: calls agent.close()

Usage Example

const [isAuthenticated, setIsAuthenticated] = useState(false);

// Connection is only established when isAuthenticated is true
const agent = useAgent({
  agent: MyAgent,
  enabled: isAuthenticated,
});

Changes

  • packages/agents/src/react.tsx: Added enabled prop to UseAgentOptions type and implementation in useAgent hook
  • packages/agents/src/react-tests/enabled-prop.test.ts: Added comprehensive test suite (14 tests) covering:
    • Type definitions
    • Connection lifecycle (startClosed logic)
    • State transition logic
    • Integration with other options
    • Common use cases (auth-based, feature flag, lazy loading)

Testing

All 14 new tests pass:

✓ useAgent enabled prop (issue #533) > Type definitions > should accept enabled as an optional boolean prop
✓ useAgent enabled prop (issue #533) > Type definitions > should default enabled to true when not specified
✓ useAgent enabled prop (issue #533) > Connection lifecycle > should start closed when enabled is false
... (11 more tests)

Checklist

  • Tests added
  • Types updated
  • Documentation (JSDoc) added
  • Changeset added
  • Backward compatible (defaults to true)

Closes #533

…ections

This adds an `enabled` optional prop to `useAgent` that allows conditionally
connecting to an Agent. When `enabled` is `false`, the connection will not
be established. When it transitions from `false` to `true`, the connection
is established via reconnect(). When it transitions from `true` to `false`,
the connection is closed.

Use cases:
- Auth-based conditional connections (only connect when authenticated)
- Feature flag based connections
- Lazy loading patterns (defer connection until component is visible)

Implementation:
- Added `enabled?: boolean` to UseAgentOptions type with JSDoc documentation
- Default value is `true` (maintains backward compatibility)
- Uses `startClosed: !enabled` for initial connection state
- Uses useEffect with prevEnabledRef to handle state transitions

Closes cloudflare#533
@changeset-bot
Copy link

changeset-bot bot commented Jan 26, 2026

🦋 Changeset detected

Latest commit: 6c09b80

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
agents Major
@cloudflare/ai-chat Major
@cloudflare/codemode Major
hono-agents Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature request: Conditional agent connection in react

1 participant