Documentation Index
Fetch the complete documentation index at: https://docs.chatblocks.ai/llms.txt
Use this file to discover all available pages before exploring further.
Code blocks are Vite + React 19 + TypeScript apps that bundle to a single dist/ folder and run inside a sandboxed iframe. The sandbox is strict (allow-scripts only — no allow-same-origin), so a small set of browser APIs behave differently than they would in a normal page.
This page is an opinionated list of what we’ve tested. If a library you want isn’t here, it likely works — try it and tell us how it went. If we move a library to Blocked, it’s because we’ve seen it fail.
Your agent can read this same data programmatically by calling the blocks.capabilities MCP tool. The tool returns the structured payload plus this prose in one call. We recommend calling it before picking a dependency.
Runtime
| |
|---|
| Node | 24 LTS |
| React | 19.0.0 |
| Vite | 7.3.1 |
| TypeScript | 5.7.3 |
Sandbox + CSP
Blocks render with sandbox="allow-scripts" (no allow-same-origin). The document has an opaque origin, so any API that depends on a real origin (cookies, storage, top-frame access) is unavailable.
The CSP defaults to 'none' for everything except:
| Directive | Allowed |
|---|
script-src | 'self' 'unsafe-inline' |
style-src | 'self' 'unsafe-inline' https://fonts.googleapis.com |
font-src | 'self' https://fonts.gstatic.com data: |
img-src | 'self' data: blob: |
connect-src | 'self' + any host you list in manifest.network.allowedOrigins (also requires 'network' in manifest.permissions) |
frame-ancestors | 'self' |
To fetch from a third-party API, declare it in chatblocks.json:{
"permissions": ["network"],
"network": { "allowedOrigins": ["https://api.example.com"] }
}
UI + styling
Supported. tailwindcss (via the Vite plugin), lucide-react (icons — import individually for tree-shaking), clsx + tailwind-merge.
Conditional. @fontsource/* to self-host Google Fonts (inlines as data: URLs).
Animation
Supported. framer-motion (~100 kB gz, declarative + gesture), @react-spring/web (~25 kB, spring physics), gsap (~70 kB, imperative timelines), lottie-web (~50 kB, After Effects JSON). CSS animations + the Web Animations API need no dependency and are often enough for hover/transition/keyframe work.
Charts + data viz
Supported. recharts (~95 kB), chart.js + react-chartjs-2 (~70 kB), @visx/* (~30 kB low-level d3 primitives), d3 (import sub-packages like d3-scale and d3-shape for ~20 kB).
3D + canvas
Supported. three (~150 kB) and @react-three/fiber + @react-three/drei (~60 kB).
State + data
Supported. zustand (~3 kB), jotai (~5 kB), @tanstack/react-query (~35 kB), swr (~10 kB).
Tables + lists
Supported. @tanstack/react-table (~15 kB headless), @tanstack/react-virtual (~5 kB virtualization).
Utilities
Supported. date-fns (import named functions), zod, embla-carousel-react.
Network
Supported. fetch, Request, Response — subject to the CSP connect-src allowlist above.
Conditional. WebSocket and EventSource — both gated by the same connect-src rules (use wss:// for WebSockets).
Blocked APIs
These won’t work and have clean alternatives:
| API | Why | Use instead |
|---|
localStorage / sessionStorage | Strict sandbox returns null. | blocks.setWidgetData via MCP for workspace-level state. |
IndexedDB | Same opaque-origin constraint. | Same as above. |
document.cookie | Opaque origin → no cookie scope. | Server-side via a data source. |
window.parent.* (direct access) | Blocked by sandbox. | window.parent.postMessage(...) is allowed; the canvas listens for a small protocol. |
Won’t bundle
| Package class | Why | Use instead |
|---|
Node-only (fs, child_process, native bindings) | Bundles target the browser. | Move server work to a Stripe / Postgres / Webhook / MCP data source. |
Next.js (next, next-auth, etc.) | Blocks are Vite apps, not Next.js. | react-router or hash-based routing. |
