@prefid/react

React hooks and components for PrefID - Identity-aware AI memory infrastructure.

Installation

npm install @prefid/react @prefid/sdk
# or
yarn add @prefid/react @prefid/sdk
# or
pnpm add @prefid/react @prefid/sdk

Quick Start

import { PrefIDProvider, usePreferences, LoginButton } from '@prefid/react';

function App() {
  return (
    <PrefIDProvider clientId="your-client-id">
      <LoginButton />
      <MyComponent />
    </PrefIDProvider>
  );
}

function MyComponent() {
  const { data: food, isLoading, update } = usePreferences('food_profile');
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <h2>Food Preferences</h2>
      <p>Cuisines: {food?.cuisines?.join(', ')}</p>
      <button onClick={() => update({ cuisines: ['Italian', 'Japanese'] })}>
        Update Preferences
      </button>
    </div>
  );
}

API Reference

PrefIDProvider

Wraps your app to provide PrefID context.

<PrefIDProvider
  clientId="your-client-id"
  baseUrl="https://prefid-production.up.railway.app" // optional
  redirectUri="https://yourapp.com/callback"         // optional
  scopes={['food_profile', 'music_preferences']}     // optional
>
  <App />
</PrefIDProvider>

usePrefID()

Access PrefID context and auth state.

function MyComponent() {
  const { prefid, user, isAuthenticated, isLoading, login, logout } = usePrefID();
  
  return (
    <div>
      {isAuthenticated ? (
        <p>Welcome, {user?.name}!</p>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </div>
  );
}

usePreferences(domain)

Fetch and update preferences for a domain.

function FoodPreferences() {
  const { data, isLoading, error, refetch, update } = usePreferences('food_profile');
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <p>Cuisines: {data?.cuisines?.join(', ')}</p>
      <button onClick={refetch}>Refresh</button>
      <button onClick={() => update({ 
        cuisines: ['Italian', 'Japanese'] 
      })}>
        Update
      </button>
    </div>
  );
}

LoginButton

Pre-built login/logout button.

<LoginButton 
  loginText="Sign in with PrefID"
  logoutText="Sign out"
  showUser={true}
  className="my-button-class"
/>

Available Domains

• general_profile - Basic user info
• music_preferences - Music taste
• food_profile - Food preferences
• travel_profile - Travel preferences
• coding_profile - Coding style
• career_profile - Career goals
• finance_profile - Finance preferences

TypeScript Support

Fully typed with TypeScript. All domain types are inferred automatically:

const { data: food } = usePreferences('food_profile');
// `food` is typed as FoodProfile automatically

food?.cuisines // string[] | undefined ✅

Links

• Documentation
• GitHub
• Core SDK

License

MIT © PrefID Team