Appspace

Appearance

Build your own app ​

Use packages/app as a template: copy it or add a new workspace package.

Steps ​

  1. Create or copy the app package
    Add a new package under packages/ (e.g. packages/my-app) or duplicate packages/app. Ensure the root package.json workspaces includes packages/*.

  2. Install and wire the app
    In the app package, depend on @kispace-io/core and the extensions you need (@kispace-io/extension-*).

  3. Entry point
    In your app entry (e.g. main.ts):

    • Call applyAppHostConfig({ packageInfo, marketplaceCatalogUrls }) if you use the marketplace.
    • Import the extensions you need (side-effect imports so they register).
    • Call appLoaderService.registerApp(appDefinition, { autoStart: true }).

  4. App definition
    Minimal example:

ts
import { appLoaderService, type RenderDescriptor } from '@kispace-io/core';

appLoaderService.registerApp(
  {
    id: 'my-app',
    name: 'My App',
    version: '1.0.0',
    extensions: [
      '@kispace-io/extension-command-palette',
      '@kispace-io/extension-settings-tree',
      '@kispace-io/extension-ai-system',
    ],
    render: {
      tag: 'k-standard-layout',
      attributes: { 'show-bottom-panel': 'true' },
    } satisfies RenderDescriptor,
  },
  { autoStart: true }
);
  1. Run and build
    From the repo root: npm run dev (or run the app package’s dev script). For production: npm run build then build the app package; output will be in the app’s dist/.

See Concepts: Apps for all AppDefinition options.