Widget SDK

Hooks and methods for reading data, calling tools, and controlling the display from a widget

@nitrostack/widgets is the library your widgets use to talk to the host. Its hooks give you the tool's output, the host's theme and display mode, and persistent state; its WidgetSDK class calls tools and controls the display.

Quick Start

A widget that reads the tool's output and follows the host's theme:

'use client';

import { useWidgetSDK, useTheme } from '@nitrostack/widgets';

export default function MyWidget() {
  const { isReady, callTool, getToolOutput } = useWidgetSDK();
  const theme = useTheme();
  
  if (!isReady) return <div>Loading...</div>;
  
  const data = getToolOutput();
  
  return (
    <div style={{ 
      background: theme === 'dark' ? '#000' : '#fff',
      color: theme === 'dark' ? '#fff' : '#000'
    }}>
      <h1>{data.title}</h1>
    </div>
  );
}