@nitrostack/widgets

Lightweight widget utilities for building interactive UI components in NitroStack MCP servers.

Installation

``bash
npm install @nitrostack/widgets
`

Features

- OpenAI ChatGPT Compatible - Works with OpenAI's widget format
- React Hooks - Easy-to-use hooks for widget state management
- Theme Support - Automatic dark/light mode detection
- Type Safe - Full TypeScript support

Quick Start

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

export default function MyWidget() {
const sdk = useWidgetSDK();
const { isDark } = useTheme();

// Access tool output data
const data = sdk.getOutput();

return (



{JSON.stringify(data, null, 2)}

`tsx
const sdk = useWidgetSDK();

// Get tool output data
const data = sdk.getOutput();

// Call another tool
const result = await sdk.callTool('tool_name', { param: 'value' });

// Update widget state
sdk.setState({ count: 1 });
const state = sdk.getState();

// Theme
const isDark = sdk.isDarkMode();

// Display mode
const mode = sdk.getDisplayMode(); // 'split' | 'fullscreen'
`

$3

Access current theme:

`tsx
const { isDark, theme } = useTheme();
`

$3

Persistent widget state:

`tsx
const [state, setState] = useWidgetState({ count: 0 });
`

$3

Get maximum available height for the widget:

`tsx
const maxHeight = useMaxHeight(); // e.g., '600px'
`

$3

Get current display mode:

`tsx
const displayMode = useDisplayMode(); // 'split' | 'fullscreen'
`

Components

$3

Wrapper component that handles theme and polyfills:

`tsx
import { WidgetLayout } from '@nitrostack/widgets';

export default function Page() {
return (



);
}
`

Utilities

`tsx
import {
prefersReducedMotion,
isPrimarilyTouchDevice,
isHoverAvailable,
prefersDarkColorScheme,
} from '@nitrostack/widgets';

// Check user preferences
if (prefersReducedMotion()) {
// Disable animations
}
``

License

Apache-2.0