OpenSesame Cell

A beautiful, ready-to-use chat interface component for React and Next.js applications.

Quick Start

npm install @opensesameai/cell

That's it! The package automatically configures itself during installation. Now you can use it in your app:

import { Cell } from '@opensesameai/cell';

function App() {
  return (
    <Cell 
      config={{
        primaryColor: "#6366f1",
        theme: "system"
      }}
    />
  );
}

Next.js App Router

For Next.js apps, use the CellWrapper component which includes the necessary client directive:

import { CellWrapper } from '@opensesameai/cell';

export default function Page() {
  return (
    <CellWrapper
      config={{
        primaryColor: "#6366f1",
        theme: "system"
      }}
    />
  );
}

Advanced Usage

Need more control? Use our React hook:

import { useCell } from '@opensesameai/cell';

function ChatComponent() {
  const { props, updateConfig } = useCell({
    initialConfig: {
      primaryColor: "#6366f1",
      theme: "system"
    }
  });

  return <Cell {...props} />;
}

Configuration

The component accepts these configuration options:

{
  primaryColor?: string;   // Any valid CSS color
  theme?: 'light' | 'dark' | 'system'; // Default: 'system'
}

Need Help?

Visit our documentation or GitHub repository for detailed guides and examples.

License

MIT