@opensesameai/cell

OpenSesame Cell

A React-based interactive chat widget with powerful tool integrations.

Framework Compatibility

• ✅ Next.js (13.0.0+)
• ✅ React (16.8.0+)
• ✅ Create React App
• ✅ Vite + React
• ✅ Remix
• ❌ Vue.js (Not supported)
• ❌ Angular (Not supported)
• ❌ Svelte (Not supported)

Quick Start

1. Install the package:

npm install @opensesameai/cell
# or
yarn add @opensesameai/cell

2. Add required styles:

For Next.js (in your root layout):

// app/layout.tsx or pages/_app.tsx
import '@opensesameai/cell/dist/index.css';

For Create React App (in your root component):

// src/App.tsx or src/index.tsx
import '@opensesameai/cell/dist/index.css';

For Vite (in your main file):

// src/main.tsx
import '@opensesameai/cell/dist/index.css';

3. Import and use:

For Next.js:

'use client';

import { NextCellProvider, createConfig } from '@opensesameai/cell';

export default function Page() {
  const config = createConfig({
    selectedEndpoints: ['GITHUB']
  });

  return <NextCellProvider config={config} />;
}

For other React frameworks:

import { CellProvider, createConfig } from '@opensesameai/cell';

function App() {
  const config = createConfig({
    selectedEndpoints: ['GITHUB']
  });

  return <CellProvider config={config} />;
}

Configuration

Basic Config

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

const config = createConfig({
  // Theme: 'light' | 'dark' | 'system'
  theme: 'system',      // Optional, defaults to 'system'
  
  // Any valid CSS color
  primaryColor: '#0066FF',  // Optional, defaults to '#0066FF'
  
  // Enable specific tools
  selectedEndpoints: ['GITHUB', 'NOTION']  // Required
});

Advanced Config with Preset Scenario

const config = createConfig({
  theme: 'light',
  primaryColor: '#0066FF',
  selectedEndpoints: ['GITHUB', 'NOTION', 'SLACK'],
  presetScenario: {
    title: "GitHub PR Review",
    description: "Automated PR review workflow",
    initialMessage: "I'll help you review this PR",
    steps: [
      {
        id: 'step-1',
        content: "Analyzing PR changes",
        timestamp: "Now",
        status: 'pending',
        tool: 'GITHUB'
      },
      {
        id: 'step-2',
        content: "Updating documentation",
        timestamp: "Now",
        status: 'pending',
        tool: 'NOTION'
      },
      {
        id: 'step-3',
        content: "Notifying team",
        timestamp: "Now",
        status: 'pending',
        tool: 'SLACK'
      }
    ]
  }
});

Available Tools

• 'GITHUB' - GitHub integration
• 'NOTION' - Notion integration
• 'SLACK' - Slack integration
• 'GOOGLEDOCS' - Google Docs integration
• 'AIRTABLE' - Airtable integration

Props

Prop	Type	Required	Default
config	ReturnType	No	{}
className	string	No	-

Troubleshooting

Common Issues

1. Styles Not Loading

   • Make sure you've imported the CSS file in your root layout/component
   • For Next.js, import in app/layout.tsx or pages/_app.tsx
   • For other frameworks, import in your root component
   • If using CSS Modules, add @opensesameai/cell/dist/index.css to your global styles

2. Component Not Rendering

   • Check that all peer dependencies are installed
   • Verify the component is wrapped in 'use client' if using Next.js

For more detailed documentation and advanced usage, visit our full documentation.

Support

Need help? Join our Discord community or open an issue on GitHub.

License

MIT © OpenSesame AI