Skip to main content

​
Overview

Manages persistent UI state that is automatically synced to the host via updateModelContext. Works like React’s useState but the state survives across conversations and is available to the AI model. Use this for user decisions, selections, or any state that should persist.

​
Import

import { useAppState } from 'sunpeak';

​
Signature

function useAppState<T>(
  defaultState: T
): readonly [T, (state: SetStateAction<T>) => void]

​
Parameters

​
defaultState
T
required
Initial state value.

​
Returns

​
return
[T, (state: SetStateAction<T>) => void]
A tuple containing the current state and a setter function, similar to React’s useState.

​
Usage

import { useAppState } from 'sunpeak';

interface ReviewState {
  decision: 'approved' | 'rejected' | null;
  decidedAt: string | null;
}

function ReviewResource() {
  const [state, setState] = useAppState<ReviewState>({
    decision: null,
    decidedAt: null,
  });

  const handleApprove = () => {
    setState({ decision: 'approved', decidedAt: new Date().toISOString() });
  };

  return (
    <div>
      <p>Decision: {state.decision ?? 'Pending'}</p>
      <button onClick={handleApprove}>Approve</button>
    </div>
  );
}