Skip to main content
The Jean Memory React SDK provides two powerful ways to integrate: a simple, out-of-the-box UI component for rapid development, and a flexible hook for building completely custom experiences.

​
Installation

npm install @jeanmemory/react

​
Three Integration Approaches

1

Level 1: Drop-in UI

The fastest way to get started. A complete, beautiful chat interface in 2 lines of code.
import { JeanProvider, JeanChatComplete } from '@jeanmemory/react';

export default function Home() {
  return (
    <JeanProvider apiKey={process.env.NEXT_PUBLIC_JEAN_API_KEY}>
      <JeanChatComplete />
    </JeanProvider>
  );
}
2

Level 2: Auth Guard + Custom UI

You build the chat UI, we handle the authentication complexity.
import { JeanProvider, JeanAuthGuard } from '@jeanmemory/react';

<JeanProvider apiKey="...">
  <JeanAuthGuard>
    <MyCustomChatApp />
  </JeanAuthGuard>
</JeanProvider>
3

Level 3: Full Control

Complete control over both UI and authentication flow using the useJean hook.

​
Core Concepts

​
Getting Context

The primary way to retrieve context is with the getContext function. 
const { getContext } = useJean();

// Fast: Direct memory search (0.5-1s)
const fast = await getContext("Query", { mode: 'fast' });

// Balanced: AI synthesis (Recommended)
const balanced = await getContext("Query", { mode: 'balanced' });

​
Authentication

The SDK handles Universal OAuth 2.1 PKCE automatically.
  • Zero Config: No client secrets or complex flows.
  • Universal Identity: Users keep the same identity across all apps.
  • Session Persistence: Stays logged in across refreshes.

​
The useJean Hook

For building custom interfaces, useJean exposes everything you need. 
const {
  isAuthenticated,
  user,
  messages,
  sendMessage,
  signOut
} = useJean();

const {
  // Authentication State
  isAuthenticated: boolean,
  isLoading: boolean,
  user: JeanUser | null,
  
  // Conversation State
  messages: JeanMessage[],
  error: string | null,
  
  // Core Methods
  sendMessage: (message: string, options?: MessageOptions) => Promise<void>,
  signOut: () => void,
  clearConversation: () => void,
  
  // Document Management
  storeDocument: (title: string, content: string) => Promise<void>,
  connect: (service: 'notion' | 'slack' | 'gdrive') => void,
  
  // Direct Tools
  tools: {
    add_memory: (content: string) => Promise<any>;
    search_memory: (query: string) => Promise<any>;
    deep_memory_query: (query: string) => Promise<any>;
  }
} = useJean();

​
Custom UI Example

function CustomChat() {
  const { messages, sendMessage, user } = useJean();

  return (
    <div>
      <h1>Hi {user.name}</h1>
      {messages.map(m => (
        <div key={m.id} className={m.role}>{m.content}</div>
      ))}
      <button onClick={() => sendMessage("Hello!")}>Send</button>
    </div>
  )
}