OwlBrain UI

UI integration for OwlBrain — publish a web app to help you create and monitor your scripts.

The UI lets you inspect live script instances :

• watch variable values update in real time
• browse the log history of each script For quick and easy debugging.

It also provide a compiled documentation of all installed integrations in a single location.

Quickstart

Install

npm install owlbrain-core owlbrain-ui

Enable the UI integration

Base configuration

| Option | Type | Default | Description | | --- | --- | --- | --- | | name | string | "ui" | Unique integration name. Change this if you want multiple UI instances. | | basePath | string | "/" | URL prefix under which the UI is served. Useful when hosting behind a reverse proxy or subpath. |

If you do not use the HTTP integration

The UI runs its own HTTP server.

import { OwlBrain } from "owlbrain-core"
import { UiIntegration } from "owlbrain-ui"

async function main() {
  await OwlBrain.withIntegration(new UiIntegration({})).run()
}

Specific configuration

| Option | Type | Default | Description | | --- | --- | --- | --- | | port | number | 80 | Port on which the UI server will listen. |

If you use the HTTP integration

and you wish to have both on the same port, then you must have the UiIntegration reference the HttpIntegration

import { OwlBrain } from "owlbrain-core"
import { HttpIntegration } from "owlbrain-http"
import { UiIntegration } from "owlbrain-ui"

async function main() {
  await OwlBrain.withIntegrations(
		new HttpIntegration({ port: 2345, name: "http" }),
  		new UiIntegration({ httpIntegration: "http" }) // will now run on port 2345
	)
	.run()
}

[!NOTE] The HttpIntegration name is already http by default. This example specified it for clarity purpose

Specific configuration

| Option | Type | Default | Description | | --- | --- | --- | --- | | httpIntegration | string | -| Name of the HttpIntegration instance to attach to. |

I am writing a OwlBrain integration

How to make my documentation visible in the UI

Here is a complete, polished “How to make my documentation visible in the UI” section you can drop directly into your README. It explains the rules, the required package.json fields, folder structure, and how the UI discovers and renders integration docs.

How to make my documentation visible in the UI

To make your own integration’s documentation appear in the UI, you need to follow a few conventions in your package structure.

1. Add the owlbrain keyword to your package.json

The UI only scans packages that explicitly declare themselves as OwlBrain integrations.

{
  "keywords": ["owlbrain"]
}

If this keyword is missing, your integration will not be detected.

2. Provide a documentation field in package.json

This field must point to a folder included in your published package. The path is relative to the package root.

Example:

{
  "documentation": "docs"
}

This folder should contain your markdown documentation files

3. Ensure the documentation folder is published

Add the folder to the "files" array so it is included when your package is installed:

{
  "files": [
    "dist",
    "docs"
  ]
}

If the folder is not published, the UI cannot load it.

Example of a minimal integration setup

{
  "name": "owlbrain-my-integration",
  "version": "0.1.0",
  "keywords": ["owlbrain"],
  "documentation": "docs",
  "files": ["dist", "docs"],
  "main": "dist/index.js",
  "types": "dist/index.d.ts"
}