Data Hooks

useConfig

Read and update the server configuration.


import { useConfig } from '@pandorakit/react-sdk'
 
function ConfigPanel() {
  const { data, update, isUpdating } = useConfig()
 
  return (
    <div>
      <p>Current model: {data?.ai?.model}</p>
      <button
        disabled={isUpdating}
        onClick={() => update({ ai: { model: 'new-model' } })}
      >
        Change Model
      </button>
    </div>
  )
}

Property	Type	Description
`data`	`Config \| undefined`	The current server configuration.
`isLoading`	`boolean`	Whether the initial fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`update`	`(patch: DeepPartial<Config>) => Promise<Config>`	Apply a partial config update.
`isUpdating`	`boolean`	Whether an update is in flight.

useModels

Lists available AI model providers.


import { useModels } from '@pandorakit/react-sdk'
 
function ModelSelector() {
  const { providers, isLoading } = useModels()
 
  if (isLoading) return <div>Loading models...</div>
 
  return (
    <select>
      {providers?.map((p) => (
        <optgroup key={p.id} label={p.name}>
          {p.models.map((m) => (
            <option key={m.id} value={m.id}>{m.name}</option>
          ))}
        </optgroup>
      ))}
    </select>
  )
}

Property	Type	Description
`data`	`{ providers: ProviderInfo[] } \| undefined`	Raw query data.
`providers`	`ProviderInfo[] \| undefined`	Shorthand for `data?.providers`.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.

useMemory

Access the agent’s memory system — long-term observations, processing record, and working memory.


import { useMemory } from '@pandorakit/react-sdk'
 
function MemoryPanel() {
  const { observations, workingMemory, updateWorkingMemory } = useMemory()
 
  return (
    <div>
      <h3>Observations</h3>
      <pre>{observations.data?.observations}</pre>
 
      <h3>Working Memory</h3>
      <pre>{workingMemory.data?.content}</pre>
    </div>
  )
}

Property	Type	Description
`observations`	`UseQueryResult<{ observations: string \| null }>`	Long-term observations, auto-polled.
`record`	`UseQueryResult<RecordResponse>`	Processing record (thresholds, token counts), auto-polled.
`workingMemory`	`UseQueryResult<{ content: string \| null }>`	Short-term working memory.
`updateWorkingMemory`	`(content: string) => Promise<{ content: string }>`	Update working memory content.

Memory Utilities

Helper functions for parsing and manipulating memory data:


import {
  parseWorkingMemoryData,
  replaceWorkingMemoryData,
  parseObservationSections,
} from '@pandorakit/react-sdk'

Function	Description
`parseWorkingMemoryData(raw: string): string`	Extracts the data portion from raw working memory content.
`replaceWorkingMemoryData(raw: string, newData: string): string`	Replaces the data portion in raw working memory, preserving the wrapper.
`parseObservationSections(raw: string, toolNames: Map<string, string>): ObservationSection[]`	Splits observation text into date-based sections. Replaces tool IDs with display names from the provided map. Returns an array of `{ title, content }` objects for rendering.

usePlugins

Lists installed plugins with tool and channel display-name maps.


import { usePlugins } from '@pandorakit/react-sdk'
 
function PluginList() {
  const { plugins, isLoading } = usePlugins()
 
  return (
    <ul>
      {plugins?.map((p) => (
        <li key={p.id}>{p.name} — {p.tools?.length ?? 0} tools</li>
      ))}
    </ul>
  )
}

Property	Type	Description
`data`	`{ plugins: UnifiedPluginInfo[] } \| undefined`	Raw query data.
`plugins`	`UnifiedPluginInfo[] \| undefined`	Shorthand for `data?.plugins`.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`toolNames`	`Map<string, string>`	Tool/agent ID to display name map. Use this to show human-readable names for tool call parts.
`channelNames`	`Map<string, string>`	Channel plugin ID to display name map.

useMcpServers

Lists and registers MCP servers.

Property	Type	Description
`data`	`{ servers: McpServerInfo[] } \| undefined`	Raw query data.
`servers`	`McpServerInfo[] \| undefined`	Shorthand for `data?.servers`.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`add`	`(input: AddMcpServerInput) => Promise<{ id: string }>`	Register a new MCP server. Returns the new server’s ID.
`isAdding`	`boolean`	Whether an add operation is in flight.

useToolNames

Convenience hook that returns a merged map of tool display names from both installed plugins and MCP servers.


import { useToolNames } from '@pandorakit/react-sdk'
 
function ToolCallDisplay({ toolName }: { toolName: string }) {
  const toolNames = useToolNames()
  return <span>{toolNames.get(toolName) ?? toolName}</span>
}

useInbox

Manage inbox messages — list, mark as read, archive, and delete.


import { useInbox } from '@pandorakit/react-sdk'
 
function Inbox() {
  const { data, markRead, archive, remove } = useInbox()
 
  return (
    <ul>
      {data?.messages.map((msg) => (
        <li key={msg.id}>
          {msg.content}
          <button onClick={() => markRead(msg.id)}>Mark Read</button>
          <button onClick={() => archive(msg.id)}>Archive</button>
          <button onClick={() => remove(msg.id)}>Delete</button>
        </li>
      ))}
    </ul>
  )
}

Pass true as the first argument to fetch archived messages instead: useInbox(true).

The optional second argument accepts { refetchInterval } to customize the polling interval in milliseconds (defaults to 30 seconds).

Property	Type	Description
`data`	`{ messages: InboxMessage[] } \| undefined`	Inbox messages.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`markRead`	`(id: string) => Promise<InboxMessage>`	Mark a message as read.
`archive`	`(id: string) => Promise<InboxMessage>`	Archive a message.
`unarchive`	`(id: string) => Promise<InboxMessage>`	Unarchive a message.
`restore`	`(id: string) => Promise<InboxMessage>`	Restore an archived message.
`remove`	`(id: string) => Promise<{ deleted: string }>`	Permanently delete a message.

useSchedules

CRUD operations for scheduled tasks.


import { useSchedules } from '@pandorakit/react-sdk'
 
function ScheduleList() {
  const { data, create, remove } = useSchedules()
 
  return (
    <div>
      {data?.tasks.map((task) => (
        <div key={task.id}>
          {task.instruction} — {task.cron}
          <button onClick={() => remove(task.id)}>Delete</button>
        </div>
      ))}
    </div>
  )
}

Property	Type	Description
`data`	`{ enabled: boolean; tasks: ScheduleTask[] } \| undefined`	Schedule state and task list.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`destinations`	`UseQueryResult<{ destinations: string[] }>`	Available delivery destinations (channel plugin IDs).
`create`	`(input: CreateScheduleInput) => Promise<ScheduleTask>`	Create a new scheduled task.
`update`	`(input: UpdateScheduleInput & { id: string }) => Promise<ScheduleTask>`	Update an existing task.
`remove`	`(id: string) => Promise<{ deleted: string }>`	Delete a task.

useHeartbeat

Manage the periodic heartbeat configuration.

Property	Type	Description
`data`	`HeartbeatConfig \| undefined`	Current heartbeat configuration.
`isLoading`	`boolean`	Whether the fetch is in progress.
`error`	`Error \| null`	Fetch error, if any.
`update`	`(patch: Partial<HeartbeatConfig>) => Promise<HeartbeatConfig>`	Update the heartbeat configuration.
`isUpdating`	`boolean`	Whether an update is in flight.