sidebarai-sdk

v1.0.16

Published

2 months ago

A lightweight, easy-to-use sidebar SDK that can be loaded via script tag or npm package. The SidebarAI SDK provides a powerful, customizable sidebar interface for AI chat interactions that seamlessly integrates into any web application.

0High
0Medium
0Low

dananai

SidebarAI SDK

Installation

Important Note About React: The SidebarAI SDK uses React internally to render the sidebar UI. However, your application does not need to use React - you just need to ensure React and ReactDOM are loaded (either via CDN or npm). The SDK will work with any framework (Vue, Angular, Svelte, vanilla JavaScript, etc.) as long as React is available on the page.

Option 1: NPM Package (Recommended)

Install the package using npm, yarn, or pnpm:

# Using npm
npm install sidebarai-sdk

# Using yarn
yarn add sidebarai-sdk

# Using pnpm
pnpm add sidebarai-sdk

Note: React and ReactDOM are peer dependencies. Make sure you have React 18 or 19 installed:

npm install react@^18 react-dom@^18
# or
npm install react@^19 react-dom@^19

For Non-React Apps: If your app doesn't use React, you still need to install React as a dependency (it won't interfere with your app). The SDK uses React internally but doesn't require your app to use React.

Option 2: CDN (ES Modules)

Load the SDK directly from a CDN using ES modules:

Note: Replace @latest with a specific version (e.g., @1.0.14) for production use. See Version Management & Updates for details.

<!DOCTYPE html>
<html>
<head>
  <!-- Load React and ReactDOM first (required peer dependencies) -->
  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>

  <!-- Load the SDK CSS (use specific version for production) -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/sidebarai-sdk.css">
</head>
<body>
  <h1>My Website</h1>

  <!-- Load and initialize the SDK -->
  <script type="module">
    import { initSidebar, toggleSidebar } from 'https://unpkg.com/[email protected]/dist/sidebarai-sdk.es.js';

    // Initialize the sidebar
    initSidebar({
      position: 'right',
      width: '45vw',
      defaultOpen: false
    });

    // Make toggleSidebar available globally (optional)
    window.toggleSidebar = toggleSidebar;
  </script>

  <!-- Add a button to toggle the sidebar -->
  <button onclick="toggleSidebar()">Toggle Sidebar</button>
</body>
</html>

Option 3: UMD Bundle (Script Tag)

For browsers that don't support ES modules, use the UMD bundle:

Note: Replace @latest with a specific version (e.g., @1.0.14) for production use. See Version Management & Updates for details.

<!DOCTYPE html>
<html>
<head>
  <!-- Load React and ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>

  <!-- Load the SDK CSS (use specific version for production) -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/sidebarai-sdk.css">
</head>
<body>
  <h1>My Website</h1>

  <!-- Load the SDK UMD bundle (use specific version for production) -->
  <script src="https://unpkg.com/[email protected]/dist/sidebarai-sdk.umd.js"></script>

  <script>
    // Access the SDK from the global SidebarAI object
    const { initSidebar, toggleSidebar } = SidebarAI;

    // Initialize the sidebar
    initSidebar({
      position: 'right',
      width: '45vw',
      defaultOpen: false
    });

    // Make toggleSidebar available globally
    window.toggleSidebar = toggleSidebar;
  </script>

  <button onclick="toggleSidebar()">Toggle Sidebar</button>
</body>
</html>

Version Management & Updates

When you publish a new version of the SDK, host applications need to update to receive the changes. Here's how version management works:

Semantic Versioning

The SDK follows Semantic Versioning (semver):

Major version (e.g., 1.0.0 → 2.0.0): Breaking changes
Minor version (e.g., 1.0.0 → 1.1.0): New features, backward compatible
Patch version (e.g., 1.0.0 → 1.0.1): Bug fixes, backward compatible

Updating with NPM

Automatic Updates (Recommended for Development)

Use version ranges in your package.json to automatically receive compatible updates:

{
  "dependencies": {
    "sidebarai-sdk": "^1.0.14"  // Receives all 1.x.x updates (patches and minor)
  }
}

Version Range Options:

^1.0.14 - Receives patches and minor updates (1.0.14 → 1.1.0, but not 2.0.0)
~1.0.14 - Receives only patch updates (1.0.14 → 1.0.15, but not 1.1.0)
1.0.14 - Fixed version (no automatic updates)

To update manually:

# Update to latest compatible version
npm update sidebarai-sdk

# Or install a specific version
npm install [email protected]

# Check for outdated packages
npm outdated sidebarai-sdk

Production Best Practices

For production applications, use fixed versions to prevent unexpected updates:

{
  "dependencies": {
    "sidebarai-sdk": "1.0.14"  // Fixed version - no automatic updates
  }
}

Then manually test and update when new versions are released:

# Check what's available
npm view sidebarai-sdk versions

# Install a specific new version
npm install [email protected]

# Test your application thoroughly
# Then commit the updated package.json

Updating with CDN

Using `@latest` (Automatic Updates)

When using @latest, your application will automatically receive new versions as they're published:

<!-- Automatically updates to newest version -->
<script src="https://unpkg.com/sidebarai-sdk@latest/dist/sidebarai-sdk.umd.js"></script>

⚠️ Warning: Using @latest in production can cause unexpected breaking changes. Use with caution.

Using Specific Versions (Recommended for Production)

Pin to a specific version for production stability:

<!-- Fixed version - won't update automatically -->
<script src="https://unpkg.com/[email protected]/dist/sidebarai-sdk.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/sidebarai-sdk.css">

To update manually:

Check the npm registry for new versions

Update the version number in your HTML:

<!-- Update from 1.0.14 to 1.1.0 -->
<script src="https://unpkg.com/[email protected]/dist/sidebarai-sdk.umd.js"></script>

Test your application thoroughly
Deploy the updated version

Version Strategy Recommendations

| Environment | Strategy | Version Format | |------------|----------|----------------| | Development | Auto-update patches/minor | ^1.0.14 or @latest | | Staging | Manual updates, test first | 1.0.14 (fixed) | | Production | Fixed version, manual updates | 1.0.14 (fixed) |

Checking for Updates

NPM Users:

# Check current version
npm list sidebarai-sdk

# Check for updates
npm outdated sidebarai-sdk

# View all available versions
npm view sidebarai-sdk versions

# View latest version
npm view sidebarai-sdk version

CDN Users:

Visit https://www.npmjs.com/package/sidebarai-sdk to see the latest version
Check the changelog (if available) for breaking changes

Migration Guide

When updating to a new major version (e.g., 1.x.x → 2.x.x), check for:

Breaking changes in the API
Configuration option changes
Required dependency updates
Deprecated features

Always test in a development environment before updating production.

Example: Update Workflow

Scenario: New version 1.1.0 is published

For NPM users with version ranges:

# 1. Check what will be updated
npm outdated

# 2. Update (if using ^ version range, this happens automatically)
npm update sidebarai-sdk

# 3. Test your application
npm test

# 4. If everything works, commit the updated package.json
git add package.json package-lock.json
git commit -m "Update sidebarai-sdk to 1.1.0"

For CDN users:

<!-- 1. Update the version number in your HTML -->
<script src="https://unpkg.com/[email protected]/dist/sidebarai-sdk.umd.js"></script>

<!-- 2. Test thoroughly -->
<!-- 3. Deploy -->

Using with Non-React Apps

The SidebarAI SDK works perfectly with applications that don't use React. Here's how:

For Vanilla HTML/JavaScript Apps

If your app is just plain HTML and JavaScript, load React via CDN (as shown in the CDN installation options above). React will only be used by the SDK internally - your app code can continue using vanilla JavaScript.

For Vue.js Apps

// In your Vue app (e.g., main.js or a component)
import { initSidebar, toggleSidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize when your Vue app mounts
export default {
  mounted() {
    initSidebar({
      position: 'right',
      width: '45vw',
      defaultOpen: false
    });
  },
  methods: {
    toggleSidebar() {
      toggleSidebar();
    }
  }
}

Make sure React is installed:

npm install react@^18 react-dom@^18

For Angular Apps

// In your Angular component (e.g., app.component.ts)
import { Component, OnInit } from '@angular/core';
import { initSidebar, toggleSidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    initSidebar({
      position: 'right',
      width: '45vw',
      defaultOpen: false
    });
  }

  toggleSidebar() {
    toggleSidebar();
  }
}

Make sure React is installed:

npm install react@^18 react-dom@^18

For Svelte Apps

// In your Svelte component (e.g., App.svelte)
<script>
  import { onMount } from 'svelte';
  import { initSidebar, toggleSidebar } from 'sidebarai-sdk';
  import 'sidebarai-sdk/dist/sidebarai-sdk.css';

  onMount(() => {
    initSidebar({
      position: 'right',
      width: '45vw',
      defaultOpen: false
    });
  });

  function handleToggle() {
    toggleSidebar();
  }
</script>

<button on:click={handleToggle}>Toggle Sidebar</button>

Make sure React is installed:

npm install react@^18 react-dom@^18

Key Points

React is only used internally by the SDK - your app can use any framework or no framework
No conflicts - React loaded by the SDK won't interfere with your app's framework
CDN option - For vanilla HTML/JS apps, you can load React via CDN (no npm needed)
NPM option - For apps using build tools, install React as a dependency

Quick Start

Basic Usage with NPM

// Import the SDK functions and styles
import { initSidebar, toggleSidebar, destroySidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize the sidebar with default settings
initSidebar();

// Or with custom configuration
initSidebar({
  position: 'right',      // 'left' or 'right'
  width: '45vw',          // Width in px or vw (e.g., '500px' or '45vw')
  userId: 'user-123',     // Optional: User identifier
  projectId: 'project-456', // Optional: Project identifier
  defaultOpen: false      // Whether sidebar starts open (default: true)
});

// Toggle sidebar visibility
toggleSidebar();

// Clean up when done
destroySidebar();

API Reference

`initSidebar(options?)`

Initializes the sidebar on the page. This function creates and mounts the sidebar component. It should be called once when your application loads.

Parameters:

options (optional): Configuration object with the following properties:
- position (optional): 'left' or 'right' - Sidebar position on the page. Default: 'right'
- width (optional): string - Sidebar width with unit (e.g., '500px' or '45vw'). Default: '45vw'
- userId (optional): string - User identifier for the chat session
- projectId (optional): string - Project identifier for the chat session
- defaultOpen (optional): boolean - Whether the sidebar should be open by default. Default: true

Returns: void

Example:

import { initSidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize with default settings (right side, 45vw width, open by default)
initSidebar();

// Initialize with custom settings
initSidebar({
  position: 'left',
  width: '400px',
  userId: 'user-123',
  projectId: 'project-456',
  defaultOpen: false
});

Note: Calling initSidebar() multiple times will result in a warning and will not reinitialize the sidebar. Use destroySidebar() first if you need to reinitialize.

`toggleSidebar()`

Toggles the sidebar visibility (show/hide). If the sidebar is currently visible, it will be hidden, and vice versa. The function automatically adjusts the page body margins to accommodate the sidebar when visible.

Parameters: None

Returns: void

Example:

import { toggleSidebar } from 'sidebarai-sdk';

// Toggle sidebar visibility
toggleSidebar();

// You can also attach it to a button
document.getElementById('sidebar-toggle-btn').addEventListener('click', toggleSidebar);

`destroySidebar()`

Completely removes the sidebar from the page and cleans up all associated resources. This function unmounts the React component, removes the container element, and restores the original body styles.

Parameters: None

Returns: void

Example:

import { destroySidebar } from 'sidebarai-sdk';

// Remove the sidebar when navigating away or closing the app
destroySidebar();

`updateSidebarConfig(options)`

Updates the sidebar configuration dynamically without reinitializing. This is useful when you need to change the sidebar settings after initialization (e.g., changing width, position, or user/project IDs).

Parameters:

options: Configuration object with the following properties:
- width (optional): string - New width with unit (e.g., '600px' or '50vw')
- position (optional): 'left' or 'right' - New sidebar position
- userId (optional): string - Updated user identifier
- projectId (optional): string - Updated project identifier
- defaultOpen (optional): boolean - Updated default open state

Returns: void

Example:

import { initSidebar, updateSidebarConfig } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize the sidebar
initSidebar({
  width: '400px',
  position: 'right'
});

// Later, update the width dynamically
updateSidebarConfig({
  width: '600px'
});

// Update position
updateSidebarConfig({
  position: 'left'
});

// Update user/project IDs
updateSidebarConfig({
  userId: 'new-user-123',
  projectId: 'new-project-456'
});

Note: The sidebar must be initialized with initSidebar() before calling this function.

`refreshDatabaseStyles()`

Refreshes the sidebar styles from the database without reinitializing. This function is useful when you've updated styling configuration in your backend and want to apply those changes to an already-initialized sidebar.

Parameters: None

Returns: void

Example:

import { initSidebar, refreshDatabaseStyles } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize the sidebar
initSidebar();

// Later, when database styles are updated, refresh them
refreshDatabaseStyles();

Note: The sidebar must be initialized with initSidebar() before calling this function.

`refreshScrollbarDetection()`

Refreshes the scrollbar positioning calculation. Call this function if the host page's scrollbar properties change (e.g., scrollbar visibility changes) to ensure the sidebar is positioned correctly.

Parameters: None

Returns: void

Example:

import { initSidebar, refreshScrollbarDetection } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize the sidebar
initSidebar();

// Later, if the page scrollbar changes, refresh detection
refreshScrollbarDetection();

Note: The sidebar must be initialized with initSidebar() before calling this function.

`Sidebar` Component (React)

For advanced usage in React applications, you can import and use the Sidebar component directly. This gives you more control over the component lifecycle and integration with your React app.

Props:

config: Configuration object
- position (optional): 'left' or 'right' - Default: 'right'
- width (optional): string - Width with unit (e.g., '500px' or '45vw')
- userId (optional): string - User identifier
- projectId (optional): string - Project identifier
- defaultOpen (optional): boolean - Whether sidebar starts open
onWidthChange (optional): (newWidth: string) => void - Callback when width changes

Example:

import React from 'react';
import { Sidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

function MyApp() {
  const handleWidthChange = (newWidth) => {
    console.log('Sidebar width changed to:', newWidth);
  };

  return (
    <div>
      <h1>My Application</h1>
      <Sidebar
        config={{
          position: 'right',
          width: '45vw',
          userId: 'user-123',
          projectId: 'project-456',
          defaultOpen: false
        }}
        onWidthChange={handleWidthChange}
      />
    </div>
  );
}

export default MyApp;

Configuration Options

The initSidebar() function accepts a configuration object with the following options:

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | 'left' \| 'right' | 'right' | Sidebar position on the page | | width | string | '45vw' | Sidebar width with unit (px or vw). Examples: '500px', '45vw', '50%' | | userId | string | undefined | Optional user identifier for chat sessions | | projectId | string | undefined | Optional project identifier for chat sessions | | defaultOpen | boolean | true | Whether the sidebar should be open when initialized |

Width Units

The width option accepts values with the following units:

px: Fixed pixel width (e.g., '500px')
vw: Viewport width percentage (e.g., '45vw' means 45% of viewport width)

Examples:

// Fixed width in pixels
initSidebar({ width: '500px' });

// Responsive width based on viewport
initSidebar({ width: '45vw' });

// Default width (45vw)
initSidebar();

Usage Examples

Example 1: Basic Integration

import { initSidebar, toggleSidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize sidebar on page load
initSidebar({
  position: 'right',
  defaultOpen: false
});

// Add a toggle button
document.getElementById('chat-button').addEventListener('click', toggleSidebar);

Example 2: Dynamic Configuration Updates

import { initSidebar, updateSidebarConfig } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize with default settings
initSidebar();

// Update configuration based on user preferences
function updateUserPreferences(userId, projectId) {
  updateSidebarConfig({
    userId: userId,
    projectId: projectId,
    width: '50vw'
  });
}

// Update based on screen size
function handleResize() {
  const width = window.innerWidth < 768 ? '100vw' : '45vw';
  updateSidebarConfig({ width });
}

window.addEventListener('resize', handleResize);

Example 3: React Integration

import React, { useEffect } from 'react';
import { initSidebar, destroySidebar, toggleSidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

function App() {
  useEffect(() => {
    // Initialize sidebar when component mounts
    initSidebar({
      position: 'right',
      width: '45vw',
      userId: 'user-123',
      projectId: 'project-456',
      defaultOpen: false
    });

    // Cleanup when component unmounts
    return () => {
      destroySidebar();
    };
  }, []);

  return (
    <div>
      <h1>My Application</h1>
      <button onClick={toggleSidebar}>Toggle Chat</button>
    </div>
  );
}

export default App;

Example 4: Vanilla JavaScript with Event Handling

import { initSidebar, toggleSidebar, updateSidebarConfig } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize sidebar
initSidebar({
  position: 'right',
  width: '45vw',
  defaultOpen: false
});

// Make functions globally available
window.toggleSidebar = toggleSidebar;

// Handle keyboard shortcuts
document.addEventListener('keydown', (e) => {
  // Toggle sidebar with Ctrl/Cmd + B
  if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
    e.preventDefault();
    toggleSidebar();
  }
});

// Update sidebar when user logs in
function onUserLogin(userId, projectId) {
  updateSidebarConfig({
    userId: userId,
    projectId: projectId
  });
}

Example 5: Responsive Width Changes

import { initSidebar, updateSidebarConfig } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// Initialize with responsive width
let currentWidth = window.innerWidth < 768 ? '100vw' : '45vw';
initSidebar({
  width: currentWidth,
  defaultOpen: false
});

// Update width on window resize
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    const newWidth = window.innerWidth < 768 ? '100vw' : '45vw';
    updateSidebarConfig({ width: newWidth });
  }, 250); // Debounce resize events
});

React Component Usage

For React applications where you want more control over the component lifecycle, you can import and use the Sidebar component directly:

import React, { useState } from 'react';
import { Sidebar } from 'sidebarai-sdk';
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

function App() {
  const [sidebarConfig, setSidebarConfig] = useState({
    position: 'right' as const,
    width: '45vw',
    userId: 'user-123',
    projectId: 'project-456',
    defaultOpen: false
  });

  const handleWidthChange = (newWidth: string) => {
    console.log('Sidebar width changed:', newWidth);
    setSidebarConfig(prev => ({ ...prev, width: newWidth }));
  };

  return (
    <div className="app">
      <header>
        <h1>My Application</h1>
      </header>
      <main>
        {/* Your main content */}
      </main>
      <Sidebar
        config={sidebarConfig}
        onWidthChange={handleWidthChange}
      />
    </div>
  );
}

export default App;

Customization

CSS Import

The SDK requires its CSS file to be imported. Make sure to include it in your application:

// ES Modules / NPM
import 'sidebarai-sdk/dist/sidebarai-sdk.css';

// CDN
<link rel="stylesheet" href="https://unpkg.com/sidebarai-sdk@latest/dist/sidebarai-sdk.css">

CSS Variables

The sidebar uses CSS custom properties (variables) that can be overridden for customization. The container ID is fixed as sidebarai-container.

Available CSS Variables:

--sidebar-bg-color: Background color of the sidebar
--sidebar-text-color: Text color in the sidebar
--sidebar-border-color: Border color
--sidebar-border-radius: Border radius
--sidebar-font-size: Font size
--sidebar-font-family: Font family
--sidebar-box-shadow: Box shadow
--sidebar-button-bg: Button background color
--sidebar-button-hover: Button hover color

Example Customization:

/* Override sidebar styles */
#sidebarai-container {
  --sidebar-bg-color: #1a1a1a;
  --sidebar-text-color: #ffffff;
  --sidebar-border-radius: 12px;
  --sidebar-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Or override directly */
#sidebarai-container {
  width: 500px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-radius: 12px !important;
}

Container ID

The sidebar container uses a fixed ID: sidebarai-container. This ID cannot be changed, but you can style it using CSS:

#sidebarai-container {
  /* Your custom styles */
}

Package Contents

The package includes the following files:

ES Module: dist/sidebarai-sdk.es.js - For modern bundlers and ES module imports
UMD Bundle: dist/sidebarai-sdk.umd.js - For script tag usage and older bundlers
CSS Styles: dist/sidebarai-sdk.css - Required stylesheet
TypeScript Types: Included automatically (TypeScript support)

Development

Prerequisites

Node.js 18+
pnpm (recommended) or npm/yarn

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Run linter
pnpm lint

Project Structure

sidebarai-sdk/
├── src/
│   ├── components/     # React components
│   ├── api/           # API integration
│   ├── lib/           # Utilities and types
│   ├── hooks/         # React hooks
│   ├── sdk.tsx        # Core SDK implementation
│   └── sdk-entry.ts   # SDK entry point
├── dist/              # Built files (generated)
└── package.json

TypeScript Support

The package includes full TypeScript definitions. Import types as needed:

import { initSidebar, type SidebarOptions } from 'sidebarai-sdk';

const options: SidebarOptions = {
  position: 'right',
  width: '45vw',
  userId: 'user-123',
  projectId: 'project-456',
  defaultOpen: false
};

initSidebar(options);

Browser Support

The SDK supports all modern browsers that support:

ES6+ JavaScript features
React 18 or 19
CSS Custom Properties (CSS Variables)

Minimum Browser Versions:

Chrome/Edge: 90+
Firefox: 88+
Safari: 14+

Troubleshooting

Sidebar not appearing

Make sure you've imported the CSS file: import 'sidebarai-sdk/dist/sidebarai-sdk.css'
Check that React and ReactDOM are loaded before initializing the SDK
Verify that initSidebar() is being called after the DOM is ready

Styles not applying

Ensure the CSS file is imported
Check for CSS conflicts with your existing styles
Verify that CSS custom properties are supported in your target browsers

Multiple initialization warnings

If you see warnings about the sidebar being already initialized:

Call destroySidebar() before reinitializing
Or restructure your code to only call initSidebar() once

React not found errors

If you're using a non-React app and see errors about React not being found:

For NPM projects: Install React as a dependency: npm install react@^18 react-dom@^18
For CDN usage: Ensure React and ReactDOM scripts are loaded before the SDK
For build tools: Make sure React is included in your bundle (it won't conflict with other frameworks)
React is only used internally by the SDK - your app doesn't need to use React

License

MIT License - feel free to use in your projects!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or feature requests, please open an issue on the GitHub repository.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SidebarAI SDK

Table of Contents

Installation

Option 1: NPM Package (Recommended)

Option 2: CDN (ES Modules)

Option 3: UMD Bundle (Script Tag)

Version Management & Updates

Semantic Versioning

Updating with NPM

Automatic Updates (Recommended for Development)

Production Best Practices

Updating with CDN

Using @latest (Automatic Updates)

Using Specific Versions (Recommended for Production)

Version Strategy Recommendations

Checking for Updates

Migration Guide

Example: Update Workflow

Using with Non-React Apps

For Vanilla HTML/JavaScript Apps

For Vue.js Apps

For Angular Apps

For Svelte Apps

Key Points

Quick Start

Basic Usage with NPM

API Reference

initSidebar(options?)

toggleSidebar()

destroySidebar()

updateSidebarConfig(options)

refreshDatabaseStyles()

refreshScrollbarDetection()

Sidebar Component (React)

Configuration Options

Width Units

Usage Examples

Example 1: Basic Integration

Example 2: Dynamic Configuration Updates

Example 3: React Integration

Example 4: Vanilla JavaScript with Event Handling

Example 5: Responsive Width Changes

React Component Usage

Customization

CSS Import

CSS Variables

Container ID

Package Contents

Development

Prerequisites

Setup

Project Structure

TypeScript Support

Browser Support

Troubleshooting

Sidebar not appearing

Styles not applying

Multiple initialization warnings

React not found errors

License

Contributing

Support

Using `@latest` (Automatic Updates)

`initSidebar(options?)`

`toggleSidebar()`

`destroySidebar()`

`updateSidebarConfig(options)`

`refreshDatabaseStyles()`

`refreshScrollbarDetection()`

`Sidebar` Component (React)