Addon Development
Scaffolding an Addon
Generate a certified JChat addon in seconds using the official CLI generator.
Using @jchat/create-addon
Scaffold a fully configured TypeScript addon with Vite build configs, diagnostics, and 20-language internationalization templates:
# Generate a certified addon with devkit and Docker sandbox:
bunx @jchat/create-addon my-addon --template=fullstack --mount-points=chat-toolbar,chat-plus-menu
cd my-addon
bun install
bun run devExact Addon Structure
Every certified JChat addon follows this exact directory structure matching our official production extensions:
addons/my-addon/
├── package.json # Package manifest, jchat-addon CLI scripts & dependencies
├── tsconfig.json # TypeScript configuration targeting @jchat/addon-sdk
├── README.md # Addon overview, features, and RBAC permissions table
├── CHANGELOG.md # Semantic release and version history
├── migrations/ # SQL migrations executed in isolated "addons" schema (fullstack)
│ └── 001_initial.sql
└── src/
├── manifest.ts # AddonManifest contract (id, name, version, mountPoints, permissions)
├── ui.tsx # Frontend React entrypoint receiving AddonProps (mountPoint, siteId, roomId)
├── tailwind.css # Addon styling entrypoint (@import "tailwindcss";)
├── locales/ # 20 host language JSON translation dictionaries
│ ├── index.ts # Bundles and exports typed locales map
│ ├── ar.json # Arabic
│ ├── bg.json # Bulgarian
│ ├── de.json # German
│ ├── el.json # Greek
│ ├── en.json # English (default source)
│ ├── es.json # Spanish
│ ├── fr.json # French
│ ├── he.json # Hebrew
│ ├── hi.json # Hindi
│ ├── hr.json # Croatian
│ ├── kn.json # Kannada
│ ├── ml.json # Malayalam
│ ├── nl.json # Dutch
│ ├── pt.json # Portuguese
│ ├── ro.json # Romanian
│ ├── ru.json # Russian
│ ├── ta.json # Tamil
│ ├── te.json # Telugu
│ ├── tr.json # Turkish
│ └── ur.json # Urdu
├── locales.test.ts # Automated translation parity check (validateAddonLocales)
├── api.ts # (Fullstack) Elysia backend API router with db, cache, and emit
├── api.test.ts # (Fullstack) Integration test suite for Elysia endpoints
└── db.ts # (Fullstack) Kysely schema table interfaces{
"name": "@jchat/my-addon",
"version": "1.0.0",
"private": true,
"description": "Custom extension for JChat",
"type": "module",
"scripts": {
"dev": "jchat-addon dev",
"build": "tsc --noEmit && jchat-addon build",
"lint": "oxlint .",
"format": "oxfmt . --write",
"typecheck": "tsc --noEmit",
"test": "bun test"
},
"dependencies": {
"@jchat/addon-sdk": "^1.0.0",
"elysia": "^1.2.0",
"jotai": "^2.11.0",
"kysely": "^0.27.0"
},
"devDependencies": {
"@tailwindcss/vite": "^4.0.0",
"@types/bun": "^1.2.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"vite": "^6.0.0"
},
"peerDependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
}