CollapseDrop v1.1.0 - README

BYOLLM - Bring Your Own LLM context injection for static sites

🤔 Stop AI making up stuff about your site. Start real conversations!

Users will ask AI about your product anyway. Give them the source of truth instead of letting them get garbage from random web scrapes.

Browser AI assistants can't actually understand your site fully. Screenshots miss details. Scraping gets messy. Give YOUR users/customers curated text context - it's the only thing that actually works.

Perfect for complex content:

Technical documentation — Let AI explain your API/SDK to newcomers
Research papers & whitepapers — Make dense content accessible
Legal/compliance docs — Help users understand terms without a lawyer
Academic writing — Students/readers can ask questions about your work
Open source projects — Help devs understand your codebase
Internal wikis — Onboard new team members faster

If someone unfamiliar with your work needs to understand it, CollapseDrop bridges the gap.

✅ See It Live

collapseindex.org - Real-world example of CollapseDrop in action

📁 examples/vanilla.html - See all features: tabs, custom colors, branding, themes & more

⚡ Why CollapseDrop?

The problem:

User: "Hey ChatGPT, what does [your product] do?"
ChatGPT: *hallucinates confidently from 2-year-old blog posts*

The solution:

User: *clicks Copy* → *pastes into ChatGPT* → "What does this do?"
ChatGPT: *actually accurate because YOU provided the context*

BYOLLM vs Traditional Chatbots

Traditional Chatbot	CollapseDrop (BYOLLM)
💸 Pay for API calls	✅ Free forever
🖥️ Maintain backend	✅ Zero infrastructure
🔒 Locked to one LLM	✅ Works with ANY LLM
😬 Users don't trust it	✅ Users trust their own AI
📊 You process user data	✅ Zero data processing
📋 GDPR compliance needed	✅ No data = no GDPR
💀 Breaks when API changes	✅ Works forever

One-Click vs Select-Drag

Manual Copy (Select + Drag)	CollapseDrop (One Click)
🖱️ Click, hold, drag to select	✅ One tap/click
😤 Miss a line? Start over	✅ Always gets everything
📱 Nightmare on mobile	✅ Works perfectly on mobile
🎯 Hope you got it all	✅ Pre-formatted, ready to paste
❓ What do I even copy?	✅ Context is curated for AI
🔄 Repeat for every section	✅ Tabs organize everything

Your users shouldn't fight their browser to copy text.

Why Not Browser AI Assistants? (Leo, Aria, etc.)

Browser AI (Leo, Aria, etc.)	CollapseDrop
🤷 Grabs whatever it wants from page	✅ YOU curate the context
🔀 Weird formatting breaks context	✅ Clean, pre-formatted text
📄 Forgets context between pages	✅ User pastes exactly what they need
🎰 Hit or miss on complex layouts	✅ Works on any page structure
🔒 Locked to that browser's AI	✅ Works with ChatGPT, Claude, Grok, anything
😵 Struggles with SPAs/dynamic content	✅ Static text, always reliable

Browser AI assistants scrape pages blindly. You know your content better! Curate it.

🚀 Quick Start

Option 1: CDN (Easiest)

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/collapsedrop/dist/collapsedrop.css">
<script src="https://cdn.jsdelivr.net/npm/collapsedrop/dist/collapsedrop.js"></script>

<!-- Add anywhere in your page -->
<div data-collapsedrop 
     data-title="Ask AI About Us"
     data-subtitle="Copy and paste into ChatGPT, Claude, or any LLM">
[CONTEXT: You are explaining our product to a potential customer.]

PRODUCT OVERVIEW
================
We help teams collaborate better with real-time tools.

PRICING
• Free: Up to 3 users
• Pro: $10/user/month  
• Enterprise: Contact us

--- ASK ABOUT ---
• Features & integrations
• Pricing & billing
• Technical requirements
</div>

That's it. Widget auto-initializes. Zero config required.

Option 2: npm

npm install collapsedrop

import CollapseDrop from 'collapsedrop';
import 'collapsedrop/dist/collapsedrop.css';

CollapseDrop.init('#my-context', {
  title: 'Ask AI About Our Product',
  theme: 'dark'
});

Option 3: Self-Host

Download collapsedrop.js and collapsedrop.css from the dist folder.

🔌 Integrations

CollapseDrop is vanilla JS — it works everywhere HTML works.

Platform	How to Use
React / Next.js	Use `useEffect` to call `CollapseDrop.init()` after mount
Vue / Nuxt	Call `CollapseDrop.init()` in `onMounted()`
Svelte	Call in `onMount()` or use action
Astro	Add script with `is:inline`, or use in client component
WordPress	Enqueue scripts, add shortcode or Gutenberg block
Webflow	Paste into page `<head>` embed + HTML embed for widget
Framer	Use Code Override or HTML embed component
Squarespace	Code Injection (header) + Code Block
Wix	Velo custom code or HTML iframe
Notion Sites	Super.so / Potion — custom code injection
Docusaurus	Add to `scripts` in config, use in MDX
GitBook	Custom HTML blocks
Hugo / Jekyll / 11ty	Include in templates, auto-init handles the rest
Shopify	Theme liquid + asset files

React Example:

import { useEffect, useRef } from 'react';

function AIContext({ content }) {
  const ref = useRef();
  
  useEffect(() => {
    if (ref.current) {
      new CollapseDrop(ref.current, {
        title: 'Ask AI',
        theme: 'dark'
      });
    }
  }, []);
  
  return <div ref={ref}>{content}</div>;
}

Vue Example:

<script setup>
import { onMounted, ref } from 'vue';

const el = ref(null);

onMounted(() => {
  new CollapseDrop(el.value, { title: 'Ask AI' });
});
</script>

<template>
  <div ref="el">Your context here...</div>
</template>

✨ Features

Feature	Description
Zero Dependencies	Single vanilla JS file, works anywhere
Auto-Init	Just add `data-collapsedrop` attribute
Token Counter	Shows estimated tokens & characters
Copy Button	One-click copy with visual feedback
Share Button	Native mobile share or clipboard fallback
Dark/Light Themes	Built-in themes + full CSS customization
Multi-Tab Support	Organize content into switchable tabs
Custom Branding	Add your logo + background images
Multi-Language	Token estimation for EN, KO, CN, JP
Accessible	Keyboard navigation, ARIA labels
Mobile Responsive	Works on all screen sizes
XSS Protected	All inputs sanitized

🎨 Customization

Basic Options (Data Attributes)

<div data-collapsedrop
     data-title="Your Title"
     data-subtitle="Your subtitle"
     data-theme="dark"
     data-language="english"
     data-collapsed="false"
     data-show-tokens="true"
     data-show-share="true">
  Your content here...
</div>

Multi-Tab Mode

<div data-collapsedrop data-title="Documentation">
  <div data-tab="Overview">Overview content...</div>
  <div data-tab="Pricing">Pricing content...</div>
  <div data-tab="API">API docs...</div>
</div>

Custom Branding

<div data-collapsedrop
     data-logo="https://yoursite.com/logo.png"
     data-logo-size="40px"
     data-background-image="https://yoursite.com/hero.jpg"
     data-background-overlay="0.85">

Custom Colors

<div data-collapsedrop
     data-color-bg="#1a1025"
     data-color-border="#6b21a8"
     data-color-text="#e9d5ff"
     data-color-title="#c084fc"
     data-color-btn-bg="#9333ea"
     data-color-btn-hover="#7c3aed">

JavaScript API

const widget = CollapseDrop.init('#my-context', {
  title: 'Ask AI',
  subtitle: 'Copy and paste into any LLM',
  theme: 'dark',
  language: 'english',
  collapsed: false,
  showTokens: true,
  showChars: true,
  showShare: true,
  maxHeight: '500px',
  // Branding
  logo: '/images/logo.svg',
  logoSize: '32px',
  backgroundImage: '/images/bg.jpg',
  backgroundOverlay: 0.85,
  // Multi-tab
  tabs: [
    { label: 'Overview', content: '...' },
    { label: 'Pricing', content: '...' }
  ],
  activeTab: 0,
  // Callbacks
  onCopy: (content) => console.log('Copied!'),
  onShare: (content) => console.log('Shared!'),
  onExpand: () => {},
  onCollapse: () => {},
  onTabChange: (index, tab) => {}
});

// Methods
widget.copy();           // Trigger copy
widget.share();          // Trigger share
widget.toggle();         // Toggle collapse
widget.expand();         // Expand
widget.collapse();       // Collapse
widget.setContent(text); // Update content
widget.getContent();     // Get current content
widget.switchTab(1);     // Switch to tab index
widget.destroy();        // Remove widget

🎯 Use Cases

Product Landing Pages — Let visitors ask AI about your product
Documentation Sites — AI-ready context for complex docs
SaaS Apps — Onboarding help without building a chatbot
Company FAQs — Support without a support team
Open Source Projects — Help users understand your code
Personal Portfolios — Let recruiters ask AI about you
E-commerce — Product info that AI can actually use

📊 Token Estimation

Language	Chars/Token	Example
English	~4	"Hello world" ≈ 3 tokens
Korean	~2	"안녕하세요" ≈ 3 tokens
Chinese	~1.5	"你好世界" ≈ 3 tokens
Japanese	~2	"こんにちは" ≈ 3 tokens
Mixed	~3	Multilingual content

Estimates for UI display. Actual tokenization varies by model.

🌐 Browser Support

Browser	Version
Chrome	66+
Firefox	63+
Safari	13.1+
Edge	79+

Graceful fallback for clipboard API on older browsers.

☕ Support the Project

CollapseDrop is 100% free and open source - no paywalls, no premium tiers, no BS.

If it saved you time, helped your project, or you just think it's cool:

Way to Support	Link
☕ Buy me a coffee	ko-fi.com/collapseindex
⭐ Star on GitHub	Hit that star button above!
📢 Share it	Tweet it, post it, tell a friend

Built solo on an 8GB Ideapad 3. Every coffee helps fuel more open source! ☕

� Security

CollapseDrop is built with security in mind:

Protection	Status
XSS Prevention	✅ All inputs escaped/sanitized
Runtime Dependencies	✅ Zero (no supply chain risk)
External Requests	✅ None (no tracking, no analytics)
Data Collection	✅ None (100% client-side)
eval() / dangerous patterns	✅ None

Audited: January 2026 — All XSS vectors patched

See SECURITY.md for full security policy and vulnerability reporting.

�📄 License

Free to use, modify, and share. Just don't sell it.

✅ Use on any website (commercial or personal)
✅ Modify and customize freely
✅ Include in free/open source projects
❌ Don't sell it or include in paid templates/products

See LICENSE for full details.

🙏 Attribution

Not required, but appreciated:

<!-- Powered by CollapseDrop - https://github.com/collapseindex/collapsedrop -->

Or link to collapseindex.org 💙

Built by Collapse Index Labs - Alex Kwon
_{One person. 8GB Ideapad 3. Making AI interactions better.}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CollapseDrop v1.1.0 - README

Perfect for complex content:

✅ See It Live

⚡ Why CollapseDrop?

BYOLLM vs Traditional Chatbots

One-Click vs Select-Drag

Why Not Browser AI Assistants? (Leo, Aria, etc.)

🚀 Quick Start

Option 1: CDN (Easiest)

Option 2: npm

Option 3: Self-Host

🔌 Integrations

✨ Features

🎨 Customization

Basic Options (Data Attributes)

Multi-Tab Mode

Custom Branding

Custom Colors

JavaScript API

🎯 Use Cases

📊 Token Estimation

🌐 Browser Support

☕ Support the Project

� Security

�📄 License

🙏 Attribution

Uh oh!

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

CollapseDrop v1.1.0 - README

Perfect for complex content:

✅ See It Live

⚡ Why CollapseDrop?

BYOLLM vs Traditional Chatbots

One-Click vs Select-Drag

Why Not Browser AI Assistants? (Leo, Aria, etc.)

🚀 Quick Start

Option 1: CDN (Easiest)

Option 2: npm

Option 3: Self-Host

🔌 Integrations

✨ Features

🎨 Customization

Basic Options (Data Attributes)

Multi-Tab Mode

Custom Branding

Custom Colors

JavaScript API

🎯 Use Cases

📊 Token Estimation

🌐 Browser Support

☕ Support the Project

� Security

�📄 License

🙏 Attribution