React Agentic

react-agentic

react-agentic

Loading Stars

Loading Contributors

The Basis Theory @basis-theory/react-agentic package provides React components and hooks for building agentic commerce flows. It handles enrollment verification (OTP + passkey creation) and instruction approval (passkey authentication) with pre-built UI components.

HTTPS Required

The card network SDKs used for verification (Visa and Mastercard) require your application to be served over HTTPS, even in development. Verification will fail on plain HTTP.

For local development, we recommend Cloudflare Quick Tunnels to expose your local server over HTTPS with zero configuration:

# Install cloudflared
brew install cloudflared

# Start a quick tunnel pointing to your local dev server
cloudflared tunnel --url http://localhost:3000

This gives you a temporary https://*.trycloudflare.com URL you can use for testing.

Installation

npm

npm install @basis-theory/react-agentic

yarn

yarn add @basis-theory/react-agentic

Setup

Wrap your application with the BtAiProvider to authenticate requests using your Public API key:

import { BtAiProvider } from '@basis-theory/react-agentic';

function App() {
  return (
    <BtAiProvider apiKey="<PUBLIC_API_KEY>">
      <YourApp />
    </BtAiProvider>
  );
}

Hooks

useBtAi

The useBtAi hook provides methods for enrollment verification and instruction approval. It must be used within a BtAiProvider.

import { useBtAi } from '@basis-theory/react-agentic';

function MyComponent() {
  const { verifyEnrollment, verifyInstruction } = useBtAi();

  // ...
}

verifyEnrollment

Renders a modal that guides the consumer through OTP verification and passkey creation to verify card enrollment.

const result = await verifyEnrollment(enrollmentId);

Parameter	Type	Description
enrollmentId	string	The enrollment ID to verify

See the Agentic Credentials guide for a complete usage example.

verifyInstruction

Renders a modal for passkey authentication to approve a spending instruction.

const result = await verifyInstruction(agentId, instructionId);

Parameter	Type	Description
agentId	string	The agent ID
instructionId	string	The instruction ID to verify

See the Agentic Credentials guide for a complete usage example.