Official Developer Portal

B A C Applet Architecture & SDK Guide

B A C Applets are sandboxed, modular micro-applications that run seamlessly within the B A C Cloud Client Dashboard. Using the official @officialbac.in/applet-sdk and zero-trust build tools, developers can build database managers, system health widgets, webhook studios, and utilities that publish directly to the B A C Applet Store.

Zero Cookie Access

Applets operate in strict sandboxed iframes without access to client cookies, tokens, or parent DOM.

Zero-Trust Signed

Every bundle is encrypted with AES-256-GCM and signed with a server-issued cryptographic build ticket.

Shield AI Audited

Google Gemini and static AST rules scan and verify your code before it reaches production.

Quickstart (Build Your First Applet in 2 Minutes)

Create a new folder and add your manifest (applet.json) and UI (index.html):

// Project Folder Structure

my-applet/

├── applet.json # Required: Metadata & permissions

├── index.html # Required: UI entrypoint

├── app.js # SDK Bridge logic

└── style.css # Styling

Zero-Trust Security & Container Protocol v2

Unlike standard ZIP files, modern B A C Applets are compiled into proprietary .bacapp (Protocol v2) binary containers. This ensures third-party AI scripts cannot bypass the official build process or reverse engineer intellectual property:

Field	Size	Description
Magic Header	8 Bytes	Strict ASCII `BACAPP\x02\x00` (Protocol v2)
Build Ticket	Variable	Server-signed cryptographic authorization ticket issued in real-time
AES-256-GCM	Variable	Encrypted archive payload derived via PBKDF2 with 25,000 rounds
HMAC Signature	32 Bytes	SHA-256 integrity seal trailer validating container body

Developer CLI Reference (npx bac-applet)

The official compiler is distributed via npm as @officialbac.in/applet-sdk. It provides zero-configuration compilation commands:

1. Authenticate Developer Session (One-Time) ~/.bac/config.json

npx bac-applet login --key bac_dev_live_YOUR_KEY

Contacts B A C Cloud Matrix and stores your authenticated session locally.

2. Inspect Active Session

npx bac-applet whoami

3. Compile & Encrypt .bacapp Package

npx bac-applet build
# Or build with custom output path:
npx bac-applet build ./my-applet -o dist/bundle.bacapp

Manifest Specification (applet.json)

The applet.json file declares your Applet identity and security permissions:

{
  "id": "officialbac.counter-widget",
  "name": "Cloud Counter & Scratchpad",
  "version": "1.0.0",
  "author": "Official B A C",
  "description": "Demonstrates persistent isolated storage and native dashboard toasts.",
  "category": "Utilities",
  "icon": "fa-solid fa-calculator",
  "scope": "widget",
  "entrypoint": "index.html",
  "permissions": [
    "storage:kv",
    "ui:toast"
  ],
  "supportUrl": "https://clientdash.officialbac.in/client/support"
}

Sample Code: Cloud Counter Widget

A complete, working beginner applet using persistent KV storage and UI toasts.

import BAC from 'https://clientdash.officialbac.in/sdk/bac-applet.v1.js';

let count = 0;
const countEl = document.getElementById('count');

// 1. Initialize Bridge
await BAC.init({
  onReady: async (context) => {
    // 2. Load persistent storage
    const saved = await BAC.storage.get('saved_count');
    if (saved !== null) {
      count = parseInt(saved, 10) || 0;
      countEl.textContent = count;
    }
  }
});

// 3. Counter interactions
document.getElementById('btn-inc').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('btn-dec').onclick = () => { count--; countEl.textContent = count; };

document.getElementById('btn-save').onclick = async () => {
  // 4. Save to Cloud KV store & trigger native toast
  await BAC.storage.set('saved_count', count);
  BAC.ui.toast(`Saved counter (${count}) to B A C Cloud!`, 'success');
};

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Counter Applet</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white p-6 flex flex-col items-center justify-center min-h-screen">
  <div class="bg-slate-800/80 p-6 rounded-2xl border border-slate-700 w-full max-w-sm text-center space-y-4">
    <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider">Cloud Counter</h2>
    <div class="text-5xl font-black text-emerald-400 font-mono" id="count">0</div>
    <div class="flex items-center justify-center gap-2">
      <button id="btn-dec" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-xl font-bold">-1</button>
      <button id="btn-inc" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-xl font-bold">+1</button>
      <button id="btn-save" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-xl font-bold">Save</button>
    </div>
  </div>
  <script type="module" src="app.js"></script>
</body>
</html>

{
  "id": "myusername.counter-widget",
  "name": "Cloud Counter Widget",
  "version": "1.0.0",
  "author": "Developer Name",
  "description": "Counter widget using persistent KV storage and toasts.",
  "category": "Utilities",
  "icon": "fa-solid fa-calculator",
  "scope": "widget",
  "entrypoint": "index.html",
  "permissions": [
    "storage:kv",
    "ui:toast"
  ]
}

Free Pre-Flight Sandbox 100% Server Vault Protected

Test Your .bacapp in B A C Shield AI

Don't publish blindly! Upload your package to our non-destructive Shield AI sandbox to get an instant safety score (0-100), Gemini code audit, and publication readiness checklist.

Launch Shield AI Sandbox