useAppState - sunpeak

sunpeak API

Overview

Manages UI state that is automatically synced to the host via updateModelContext. Works like React’s useState, but each update is pushed to the host so the AI model can see it on the next message. Use this for user decisions, selections, or any state the model should be aware of.

Wraps updateModelContext

MCP Apps SDK reference

Import

import { useAppState } from 'sunpeak';

Signature

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

Parameters

defaultState

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>
  );
}

useAppToolsRegister tools that the host can call on your app.

​Overview

Wraps updateModelContext

​Import

​Signature

​Parameters

​Returns

​Usage