CapsuleHub SDK

Integrate CapsuleHub directly into your web application. Allow your users to create and manage capsules without leaving your UI.

Installation

npm install capsule-hub

Usage

1. Initialize CapsuleHub

import CapsuleHub from 'capsule-hub';

// Initialize with a button selector to open the library
CapsuleHub.initButton('#capsule-btn');

2. Custom Context Extraction

By default, the SDK tries to find text on your page. For better results, tell the SDK exactly what to "capture" from your UI:

CapsuleHub.onExtract(() => {
  const chatHistory = myApp.getMessages(); // Your internal state
  return {
    messages: chatHistory.map(m => ({ 
      role: m.user ? 'user' : 'assistant', 
      content: m.text 
    }))
  };
});

3. Drag and Drop Support

Users can drag capsules from the library onto your UI. You can handle the "drop" to inject context or share a link:

// Turn your chat input into a drop zone
CapsuleHub.initDropZone('#chat-input', (capsule) => {
  console.log('User dropped capsule:', capsule.tag);
  
  // Example: Insert the capsule summary into the input
  myChatInput.value += `[Capsule: ${capsule.tag}] ${capsule.summary}`;
});

4. Styling

CapsuleHub uses CSS variables for easy customization:

:root {
  --ch-primary: #6366f1; /* Your brand color */
  --ch-radius-lg: 12px;
}

Features

• Drag & Drop: Seamlessly move capsules between the library and your app.
• Smart Extraction: Plug in your app's state for perfect context capture.
• Team-Ready: Full support for shared team workspaces.
• Lightweight: Zero-dependency UI (bundles its own CSS).

License

MIT © Tilantra