Dendron SDK

The Zero-Liability Behavioral Intelligence SDK

Dendron makes any website intelligent about its visitors. It tracks in-session behavioral signals (scroll depth, reading time, cursor patterns, interaction focus), assembles structured intent data, and surfaces AI-generated Smart Cards through a chat-style widget overlay.

• Zero server infrastructure — runs entirely in the browser
• BYOK (Bring Your Own Key) — your backend, your LLM, your keys
• 13KB gzipped — Web Worker architecture, zero main-thread blocking
• Shadow DOM isolated — never leaks CSS into or out of the host page
• Privacy-first — no cookies, no central data store, no PII collection

Quick Start

npm install dendron-sdk

import { Dendron } from 'dendron-sdk';

Dendron.init({
  onQuery: async (payload) => {
    const res = await fetch('/api/ai-proxy', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    return res.json();
  },
  systemContext: 'Acme is a developer platform for edge deployments.',
});

That's it. Dendron handles tracking, intent scoring, prompt building, and card rendering. Your backend handles the LLM call.

CDN

<script src="https://cdn.dendron.dev/v1/dendron.min.js"
  integrity="sha384-{hash}"
  crossorigin="anonymous"></script>

<script>
  Dendron.init({
    onQuery: async (payload) => {
      const res = await fetch('/api/ai-proxy', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
      return res.json();
    }
  });
</script>

How It Works

Visitor scrolls/reads/clicks
    ↓  Main thread → Web Worker (postMessage)
Tracker captures behavioral signals
    ↓  Debounced, batched, off main thread
Context Engine scores intent (0-100)
    ↓  When threshold crossed (default: 55)
Prompt Builder assembles LLM-ready payload
    ↓  Passed to YOUR onQuery callback
Card Renderer shows Smart Card in Shadow DOM widget

Dendron never makes network requests. The only egress is your onQuery callback.

Smart Card Types

Type	When	What it shows
Greeting	First 10s, low intent	Welcome message, product summary
Feature	Deep engagement on feature section	Feature deep-dive, stats
Pricing	Extended reading on pricing	Plan comparison table
Engagement	High overall intent	Social proof, aggregated stats
Comparison	Back-and-forth between sections	Side-by-side comparison

Your Backend (the onQuery callback)

Dendron sends a DendronContextPayload to your callback. You forward it to your LLM and return a SmartCard JSON object.

// pages/api/dendron.ts (Next.js example)
import OpenAI from 'openai';

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export default async function handler(req, res) {
  const completion = await client.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: req.body.prompt }],
    response_format: { type: 'json_object' },
  });
  res.json(JSON.parse(completion.choices[0].message.content));
}

Works with any LLM provider: OpenAI, Anthropic, Groq, Ollama, etc.

Configuration

Dendron.init({
  onQuery: async (payload) => { /* required */ },

  tracking: {
    scrollDebounce: 200,       // ms
    cursorDebounce: 300,       // ms
    readingInterval: 1000,     // ms
    mutationFlushInterval: 500 // ms
  },

  intent: {
    triggerThreshold: 55,      // 0-100
    cooldownSeconds: 30,
    maxCardsPerSession: 5
  },

  storage: {
    maxStorageMB: 25,
    embeddingTTLDays: 7,
    cleanupIntervalMinutes: 5
  },

  ui: {
    position: 'bottom-right',  // or 'bottom-left'
    theme: 'auto',             // 'light' | 'dark' | 'auto'
    branding: true,
    zIndex: 999999
  },

  systemContext: 'Your product description here',
  webMCP: false,               // WebMCP agent-readiness plugin
  debug: false                 // devtools overlay
});

Event Hooks

Dendron.on('trigger', (payload) => {
  analytics.track('dendron_trigger', { score: payload.trigger.score });
});

Dendron.on('card:rendered', (card) => console.log('Card:', card.type));
Dendron.on('card:action', (action) => router.push(action.href));
Dendron.on('error', (err) => Sentry.captureException(err));

Framework Integration

React / Next.js

'use client';
import { useEffect } from 'react';
import { Dendron } from 'dendron-sdk';

export default function Layout({ children }) {
  useEffect(() => {
    Dendron.init({ onQuery: async (p) => (await fetch('/api/dendron', { method: 'POST', body: JSON.stringify(p) })).json() });
    return () => Dendron.destroy();
  }, []);
  return <>{children}</>;
}

Vue / Nuxt

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Dendron } from 'dendron-sdk'

onMounted(() => {
  Dendron.init({ onQuery: async (p) => (await $fetch('/api/dendron', { method: 'POST', body: p })) })
})
onUnmounted(() => Dendron.destroy())
</script>

Running the Demo

# Clone and install
git clone https://github.com/bitWise72/dendron.git
cd dendron && npm install

# Build the SDK
npm run build

# Start mock LLM backend
node demo/mock-backend.js

# In another terminal, serve the demo
npx vite demo

Open the demo page, scroll around, and watch Smart Cards appear based on your behavior.

Development

npm run build          # Production build (ESM + CJS + UMD + types)
npm run test           # Run test suite (67 tests)
npm run typecheck      # TypeScript strict check
npm run lint           # ESLint
npm run dev            # Dev server for demo

Architecture

Module	Runs In	Responsibility
Tracker	Web Worker + Main Thread listeners	DOM observation, scroll/cursor/click capture
Context Engine	Web Worker	Signal aggregation, intent scoring
Prompt Builder	Main Thread	Assembles LLM-ready prompts from context
Card Renderer	Main Thread (Shadow DOM)	Parses LLM response, renders Smart Cards
Micro-Embeddings	Web Worker (optional)	Behavioral pattern vectors via Transformers.js
WebMCP Plugin	Main Thread (optional)	Agent-readiness for agentic browsers

Security

• No API keys in browser — BYOK callback pattern eliminates exposure
• No innerHTML on user/LLM content — DOM API only (createElement/textContent)
• Shadow DOM isolation — closed shadow root, no CSS leakage
• Zero network requests — Dendron makes no calls; only your onQuery does
• CSP compatible — no eval(), no inline handlers
• 0 production vulnerabilities — npm audit --omit=dev clean

Bundle Size

Component	Size (gzipped)
Core SDK	13KB
Micro-Embeddings (lazy, optional)	~25MB (loaded on first trigger)
WebMCP Plugin (tree-shaken if unused)	~2KB

License

MIT