widget-builder

You build NitroStack widgets: React components that render inside an iframe alongside tool responses, in NitroStudio and in ChatGPT.

Non-negotiable rules

1. Inline styles only. Never Tailwind. Tailwind classes do not resolve inside the widget iframe. No exceptions — not for "just a flex container," not for anything.
2. 'use client' at the top of every widget file.
3. Always guard on isReady before touching data. Render a loading state.
4. Always handle missing data. getToolOutput() can return nothing.
5. Never call fetch directly. Use callTool() from the SDK.
6. Type the output. getToolOutput<ApprovalData>() using types from ../../types/tool-data.
7. Theme-aware. Use useTheme() and support both light and dark. Judges may demo on either.

Canonical widget

'use client';

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

interface ApprovalData {
  approval_id: string;
  total: number;
  flags: Array<{ ruleId: string; severity: 'low' | 'medium' | 'high'; evidence: string }>;
  status: 'pending' | 'approved' | 'rejected';
}

export default function ApprovalCard() {
  const { isReady, getToolOutput, callTool } = useWidgetSDK();
  const theme = useTheme();

  if (!isReady) return <div style={{ padding: 16 }}>Loading…</div>;

  const data = getToolOutput<ApprovalData>();
  if (!data) return <div style={{ padding: 16 }}>No approval data</div>;

  const dark = theme === 'dark';
  const s = {
    card: {
      background: dark ? '#0f0f0f' : '#ffffff',
      color: dark ? '#f5f5f5' : '#111111',
      border: `1px solid ${dark ? '#2a2a2a' : '#e3e3e3'}`,
      borderRadius: 12,
      padding: 20,
      fontFamily: 'system-ui, -apple-system, sans-serif',
    },
    approve: {
      background: '#0a7c3e', color: '#fff', border: 'none',
      padding: '10px 20px', borderRadius: 8, fontWeight: 600, cursor: 'pointer',
    },
    reject: {
      background: 'transparent', color: dark ? '#f5f5f5' : '#111',
      border: `1px solid ${dark ? '#3a3a3a' : '#d0d0d0'}`,
      padding: '10px 20px', borderRadius: 8, fontWeight: 600, cursor: 'pointer',
    },
  };

  const approve = async () => {
    await callTool('execute_payment', { approval_id: data.approval_id, decision: 'approve' });
  };

  return (
    <div style={s.card}>
      <div style={{ fontSize: 13, opacity: 0.65, marginBottom: 6 }}>Payment approval required</div>
      <div style={{ fontSize: 30, fontWeight: 700, marginBottom: 16 }}>
        ₹{data.total.toLocaleString('en-IN')}
      </div>

      {data.flags.map((f) => (
        <div key={f.ruleId} style={{
          background: dark ? '#2a1f0a' : '#fff8e6',
          borderLeft: `3px solid ${f.severity === 'high' ? '#c62828' : '#e08a00'}`,
          padding: '10px 12px', borderRadius: 6, marginBottom: 8, fontSize: 13,
        }}>
          <strong>{f.ruleId}</strong> — {f.evidence}
        </div>
      ))}

      <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
        <button style={s.approve} onClick={approve}>Approve</button>
        <button style={s.reject} onClick={() => callTool('execute_payment', { approval_id: data.approval_id, decision: 'reject' })}>
          Reject
        </button>
      </div>
    </div>
  );
}