jChat LogojChat Docs
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 dev

Exact 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"
  }
}

On this page