Opensesame-cell NPM

OpenSesame Cell

An embeddable AI cell component for React applications with seamless Next.js integration.

Installation

npm install opensesame-cell
# or
yarn add opensesame-cell

Usage with Next.js

When using OpenSesameCell in a Next.js application, it's critical to follow these guidelines to avoid hydration mismatches:

Always use the 'use client' directive at the top of any file that imports and uses the OpenSesameCell component.
Never render the component conditionally during initial render, as this can cause hydration mismatches.
Keep the component isolated in its own client component file when possible.

Example Usage

'use client'
import { OpenSesameCell } from 'opensesame-cell'

export default function AIAssistantPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">AI Assistant</h1>
      
      <OpenSesameCell 
        config={{
          primaryColor: "#7C3AED",
          theme: "light",
          formFactor: "node",
          userId: 'user-123',
        }}
      />
    </div>
  )
}

Troubleshooting Hydration Errors

If you encounter hydration errors like:

Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

Make sure you:

Have the 'use client' directive at the top of your file
Are not conditionally rendering the component during initial render
Are not using the component in a server component
Have not wrapped the component in a way that causes it to render differently on server vs client

Configuration Options

The OpenSesameCell component accepts a config prop with the following options:

type CellConfig = {
  /** Primary color used for accents and highlights (in hex or rgb format) */
  primaryColor: string;
  
  /** UI theme preference */
  theme: 'light' | 'dark' | 'system';
  
  /** How the cell should be displayed */
  formFactor: 'node' | 'sidebar' | 'screen';
  
  /** Optional logo URL to display in the cell */
  logo?: string;
  
  /** Optional list of enabled tools */
  tools?: string[];
  
  /** Optional background fill color */
  fill?: string;
  
  /** Optional custom styling overrides */
  customizations?: any;
  
  /** Optional unique identifier for the cell (for persistence) */
  cellId?: string;
  
  /** Optional user identifier (for persistence) */
  userId?: string;
};