@byorouter/react

React hooks for BYORouter - let your users bring their own AI API keys.

Installation

npm install @byorouter/react

Peer Dependencies

• react >= 18.0.0
• swr >= 2.0.0

Usage

useModels

Fetch available models and providers from the user's connected AI accounts.

import { useModels } from '@byorouter/react';

function ModelSelector() {
  const { models, providers, connected, isLoading } = useModels();

  if (isLoading) return <div>Loading...</div>;
  if (!connected) return <div>No AI provider connected</div>;

  return (
    <select>
      {models.map((model) => (
        <option key={model.id} value={model.id}>
          {model.name} ({model.provider})
        </option>
      ))}
    </select>
  );
}

Options

const { models, providers, connected, isLoading, error, mutate } = useModels({
  // Filter models by provider ID
  provider: 'openai',
  // Custom API base path (default: '/api/byorouter')
  basePath: '/api/byorouter',
});

useConnect

Manage the BYORouter connection flow.

import { useConnect, useModels } from '@byorouter/react';

function ConnectButton() {
  const { connectUrl, disconnect, isDisconnecting } = useConnect();
  const { connected, mutate } = useModels();

  if (connected) {
    return (
      <button onClick={() => disconnect().then(mutate)} disabled={isDisconnecting}>
        {isDisconnecting ? 'Disconnecting...' : 'Disconnect'}
      </button>
    );
  }

  return <a href={connectUrl}>Connect AI Provider</a>;
}

Options

const { connectUrl, disconnect, isDisconnecting } = useConnect({
  // Custom API base path (default: '/api/byorouter')
  basePath: '/api/byorouter',
  // Callback when disconnect completes
  onDisconnect: () => console.log('Disconnected'),
});

API Reference

useModels

| Return Value | Type | Description | |--------------|------|-------------| | connected | boolean | Whether the user has a connection | | models | Model[] | List of available models | | providers | ProviderInfo[] | List of connected providers | | isLoading | boolean | Whether data is being fetched | | error | Error \| undefined | Error if fetch failed | | mutate | () => void | Revalidate the data |

useConnect

| Return Value | Type | Description | |--------------|------|-------------| | connectUrl | string | URL to redirect users for connecting | | disconnect | () => Promise<void> | Disconnect the current connection | | isDisconnecting | boolean | Whether disconnect is in progress |

License

MIT