BYOLLM - Bring Your Own LLM context injection for static sites
-green){kind=icon}
π€ 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.
- 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.
collapseindex.org - Real-world example of CollapseDrop in action
π examples/vanilla.html - See all features: tabs, custom colors, branding, themes & more
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*
| 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 |
| 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.
| 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.
<!-- 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.
npm install collapsedropimport CollapseDrop from 'collapsedrop';
import 'collapsedrop/dist/collapsedrop.css';
CollapseDrop.init('#my-context', {
title: 'Ask AI About Our Product',
theme: 'dark'
});Download collapsedrop.js and collapsedrop.css from the dist folder.
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>| 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 |
<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><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><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"><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">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- 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
| 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 | Version |
|---|---|
| Chrome | 66+ |
| Firefox | 63+ |
| Safari | 13.1+ |
| Edge | 79+ |
Graceful fallback for clipboard API on older browsers.
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! β
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.
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.
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.
