> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# useUpdateModelContext

> Send model context updates to the host.

<Badge color="yellow">sunpeak API</Badge>

## Overview

Returns a function to send model context updates to the host. Unlike `useAppState` (which automatically syncs structured state), this hook gives direct control over when and what is sent to the model context — including text content blocks.

Each call overwrites the previous context. The host includes the last update in the model's next turn.

<Card horizontal title="Wraps updateModelContext" icon="cube" href="/mcp-apps/app/requests/update-model-context">
  MCP Apps SDK reference
</Card>

## Import

```tsx theme={null}
import { useUpdateModelContext } from 'sunpeak';
```

## Signature

```tsx theme={null}
function useUpdateModelContext(): (params: UpdateModelContextParams) => Promise<void>
```

### UpdateModelContextParams

<ResponseField name="content" type="ContentBlock[]">
  Array of content blocks to include in model context.
</ResponseField>

<ResponseField name="structuredContent" type="Record<string, unknown>">
  Structured data to include in model context. Serialized as JSON.
</ResponseField>

## Returns

<ResponseField name="updateModelContext" type="(params: UpdateModelContextParams) => Promise<void>">
  Function to push context updates to the host. Each call replaces the previous context.
</ResponseField>

## Usage

### Structured Content

```tsx theme={null}
import { useUpdateModelContext } from 'sunpeak';

function MapResource() {
  const updateModelContext = useUpdateModelContext();

  const handleSelect = (place: Place) => {
    updateModelContext({
      structuredContent: { selectedPlace: place },
    });
  };

  return <PlaceList onSelect={handleSelect} />;
}
```

### Text Content

```tsx theme={null}
import { useUpdateModelContext } from 'sunpeak';

function EditorResource() {
  const updateModelContext = useUpdateModelContext();

  const handleChange = (text: string) => {
    updateModelContext({
      content: [{ type: 'text', text }],
    });
  };

  return <textarea onChange={(e) => handleChange(e.target.value)} />;
}
```

## Comparison with useAppState

| Feature          | `useAppState`                     | `useUpdateModelContext`         |
| ---------------- | --------------------------------- | ------------------------------- |
| Automatic sync   | Yes — syncs on every state change | No — you call it explicitly     |
| Content types    | Structured data only              | Text blocks + structured data   |
| State management | Built-in (like `useState`)        | Bring your own                  |
| Use case         | Simple persistent state           | Custom sync logic, text content |

## See Also

<Card horizontal title="useAppState" icon="database" href="/app-framework/hooks/use-app-state">
  Automatic state persistence and sync.
</Card>