Skip to main content

Create your first addon

Install the development packages

pnpm add @streamshare/plugin-sdk
pnpm add --save-dev @streamshare/plugin-cli typescript

Define the manifest

Create manifest.json at the package root. Its supported shape is defined by the SDK's PluginManifest interface; the manifest reference explains how each property is used and validated.

{
"id": "com.example.hello",
"name": "Hello StreamShare",
"version": "1.0.0",
"compatibleVersion": "^3.13.0",
"type": "automation",
"main": "dist/index.js",
"author": "Example author",
"description": "A minimal StreamShare addon",
"permissions": {
"network": []
},
"actions": [
{
"id": "hello",
"label": "Say hello"
}
]
}

Use a globally unique, stable ID. Declare only the network hosts and runtime capabilities the addon actually needs.

This minimal example has no icon. To add one, place an SVG, PNG or WebP file in assets/ and declare "icon": "assets/icon.svg".

Implement the addon

import {
type IAutomationPlugin,
type IPluginAPI,
type PluginActionParameters,
registerPlugin,
type SystemEventContext,
} from '@streamshare/plugin-sdk';

class HelloAddon implements IAutomationPlugin {
private api!: IPluginAPI;

async onInit(api: IPluginAPI): Promise<void> {
this.api = api;
}

async onEvent(_event: SystemEventContext): Promise<void> {}

async onAction(_params: PluginActionParameters, actionId: string): Promise<void> {
if (actionId === 'hello') {
this.api.toast({message: 'Hello from the addon', color: 'success'});
}
}
}

registerPlugin(new HelloAddon());

Add scripts

{
"scripts": {
"validate": "streamshare-plugin-cli validate --app-version 3.13.1",
"dev": "streamshare-plugin-cli dev",
"build": "streamshare-plugin-cli build"
}
}

Run pnpm validate before targeting a specific StreamShare version, pnpm dev while testing locally and pnpm build to create an installation ZIP. Follow the development-mode guide to connect a supported StreamShare device, receive reloads and inspect logs.

Next steps