useViewState

import { useViewState } from "mcp-use/react";

function Counter() {
  const [state, setState] = useViewState({ count: 0 });

  return (
    <button
      onClick={() =>
        setState((previous) => ({
          ...previous,
          count: previous.count + 1,
        }))
      }
    >
      Count: {state.count}
    </button>
  );
}

function useViewState<T extends Record<string, unknown>>(
  defaultState: T | (() => T),
): readonly [T, (state: SetStateAction<T>) => void];

function Toolbar() {
  const [{ sort }, setState] = useViewState({ sort: "newest" });
  return (
    <button onClick={() => setState({ sort: "price" })}>Sort: {sort}</button>
  );
}

function ProductView() {
  const [state] = useViewState({ sort: "newest" });
  return (
    <>
      <Toolbar />
      <ProductGrid sort={state.sort} />
    </>
  );
}

function Dashboard() {
  const [state] = useViewState({ count: 1 });

  return (
    <ModelContext content="Dashboard">
      <ModelContext content="Revenue chart is visible" />
      <p>{state.count} active report</p>
    </ModelContext>
  );
}

{
  "count": 1,
  "_uiContext": "- Dashboard\n  - Revenue chart is visible"
}