{"id":10652,"library":"commandbar","title":"CommandBar JavaScript SDK","description":"CommandBar is a JavaScript/TypeScript SDK designed to embed an AI-powered command bar and user assistance platform into web and mobile applications. It allows developers to add contextual help, searchable commands, in-app guides, checklists, nudges, and product tours, acting as a dynamic, embedded wiki for application functionality and support. The current stable npm package version is 1.14.0. While the npm package itself was last published two years ago, the underlying CommandBar service and its features, such as the AI Copilot and mobile support, are actively developed. Key differentiators include its AI capabilities for user assistance, robust mobile application support via dedicated SDKs (iOS, Android, React Native), and a comprehensive suite of tools for digital adoption and user engagement, contrasting with simpler command palettes or generic UI libraries.","status":"active","version":"1.14.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install commandbar","lang":"bash","label":"npm"},{"cmd":"yarn add commandbar","lang":"bash","label":"yarn"},{"cmd":"pnpm add commandbar","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `init` function must be called once with your organization ID before `window.CommandBar.boot` or any other SDK methods are used.","wrong":"const init = require('commandbar').init;","symbol":"init","correct":"import { init } from 'commandbar';"},{"note":"After `init` is called, the core CommandBar instance is exposed globally on `window.CommandBar`. The `boot` method is accessed via this global object and is crucial for identifying the user and making CommandBar available.","wrong":"import { boot } from 'commandbar';\nboot(userId);","symbol":"boot","correct":"window.CommandBar.boot(userId);"},{"note":"Like `boot`, `addCommands` is a method on the global `window.CommandBar` object, used to programmatically add custom commands to the bar.","wrong":"import { addCommands } from 'commandbar';","symbol":"addCommands","correct":"window.CommandBar.addCommands([/* commands */]);"},{"note":"The library ships with built-in TypeScript types, which are beneficial for development in TypeScript projects.","symbol":"Types","correct":"import type { CommandBarOptions, Command } from 'commandbar';"}],"quickstart":{"code":"import { init } from 'commandbar';\n\n// Initialize CommandBar with your organization ID.\n// This should typically run once when your application starts.\nconst MY_ORG_ID = process.env.COMMANDBAR_ORG_ID ?? 'YOUR_ORGANIZATION_ID'; // Replace with your actual ID\ninit(MY_ORG_ID);\n\n// Simulate a user authentication flow and boot CommandBar for the identified user.\nfunction initializeUserCommandBar(userID: string) {\n  if (typeof window.CommandBar !== 'undefined' && window.CommandBar.boot) {\n    window.CommandBar.boot(userID, { \n      // Optional user properties for analytics and targeting\n      plan: 'pro', \n      signedUpDate: new Date().toISOString() \n    });\n    console.log(`CommandBar booted for user: ${userID}`);\n\n    // Example of adding a custom command\n    window.CommandBar.addCommands([\n      {\n        id: 'navigate-dashboard',\n        name: 'Go to Dashboard',\n        description: 'Navigates to the main user dashboard.',\n        handler: () => {\n          alert('Navigating to dashboard...');\n          // In a real app, you'd use your router here: e.g., router.push('/dashboard');\n        },\n        // You can add additional metadata for filtering, etc.\n        category: 'Navigation'\n      }\n    ]);\n    console.log('Custom command added: Go to Dashboard');\n  } else {\n    console.error('CommandBar is not initialized or available globally.');\n  }\n}\n\n// Example usage: Call this function after a user logs in or is identified.\nconst authenticatedUserID = 'user_12345'; // Replace with actual authenticated user ID\ninitializeUserCommandBar(authenticatedUserID);\n\n// You can also boot for anonymous users if needed (pass null or an empty string for userID)\n// initializeUserCommandBar(null);","lang":"typescript","description":"This quickstart demonstrates how to initialize the CommandBar SDK with an organization ID and then 'boot' it for a specific user, including how to add a custom command. This sequence is essential for the CommandBar UI to appear and function correctly in your application."},"warnings":[{"fix":"Monitor CommandBar's official documentation for announcements regarding new versions or updates to their web SDK, and consider the implications of a less frequently updated npm package for new feature adoption.","message":"The `commandbar` npm package has a last publish date of 2 years ago (version 1.14.0). While the core library is stable, the CommandBar service itself is actively developed with newer features like AI Copilot and mobile support, which may involve server-side updates or separate mobile SDKs rather than new npm package versions. Ensure your expectations align with this release cadence for the JavaScript SDK.","severity":"gotcha","affected_versions":"<=1.14.0"},{"fix":"Ensure `init(ORG_ID)` is executed once at the earliest possible stage in your application's lifecycle, typically before any UI components that might interact with CommandBar are mounted or rendered.","message":"Initialization order is critical. The `init` function must be called first with your `orgId` before `window.CommandBar.boot` or any other SDK methods are invoked. Calling other methods before `init` will result in errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always interact with the SDK methods via `window.CommandBar.methodName(...)` after `init` has successfully run. If `window.CommandBar` is undefined, ensure `init` was called correctly and the script had time to load.","message":"After initialization, the CommandBar SDK exposes its API primarily through a global `window.CommandBar` object. Directly importing methods like `boot` or `addCommands` from the package will not work as they are not exported for direct module consumption in this manner; they are designed to be accessed from the global instance.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always pass your valid CommandBar organization ID to `init` and an authenticated user ID (or `null` for anonymous users) to `boot`. Validate these values before calling the functions.","message":"Both `init` and `boot` functions require mandatory arguments (`orgId` for `init` and `userId` for `boot`). Failing to provide these will lead to runtime errors and CommandBar will not function.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import { init } from 'commandbar'; init('YOUR_ORG_ID');` has been executed successfully before any calls to `window.CommandBar` methods. For non-module usage, verify the `<script>` tag for CommandBar's snippet is correctly placed and loaded in your HTML.","cause":"The CommandBar SDK script has not been loaded or the `init` function has not been called before attempting to access `window.CommandBar`.","error":"ReferenceError: CommandBar is not defined"},{"fix":"Check that `init('YOUR_ORG_ID')` is called exactly once and completes without errors before any subsequent calls to `window.CommandBar.boot` or other `window.CommandBar` methods.","cause":"The `init` function was either not called or failed, meaning the `window.CommandBar` object was not properly populated with its API methods.","error":"TypeError: window.CommandBar.boot is not a function"},{"fix":"Provide your unique CommandBar organization ID as the first argument to `init`, e.g., `init('YOUR_ORGANIZATION_ID');`.","cause":"The `init` function was called without providing the required organization ID string.","error":"Error: init requires an orgId"},{"fix":"Pass a valid authenticated user ID string as the first argument to `window.CommandBar.boot`, e.g., `window.CommandBar.boot(authenticatedUserID);`. For anonymous users, pass `null` or an empty string as explicitly documented.","cause":"The `window.CommandBar.boot` function was called without providing the required user ID string.","error":"Error: boot requires a userId"}],"ecosystem":"npm"}