Skip to main content
sunpeak API

​
Overview

Returns a function to read a resource from the originating MCP server. The request is proxied through the host. Use useListServerResources to discover available resources first. See the MCP Apps readServerResource request for protocol details.

​
Import

import { useReadServerResource } from 'sunpeak';

​
Signature

function useReadServerResource(): (
  params: ReadServerResourceParams
) => Promise<ReadServerResourceResult | undefined>

​
ReadServerResourceParams

​
uri
string
required
URI of the resource to read (e.g. file:///path or a custom scheme like videos://intro).

​
Returns

​
readServerResource
(params: ReadServerResourceParams) => Promise<ReadServerResourceResult | undefined>
Function to read a server resource by URI.

​
ReadServerResourceResult

​
contents
Array<{ uri: string; mimeType?: string; text?: string; blob?: string }>
required
Resource contents returned by the server. Each item contains either text (UTF-8 string) or blob (base64-encoded binary).

​
Usage

import { useReadServerResource } from 'sunpeak';
import { useState } from 'react';

function VideoPlayer() {
  const readServerResource = useReadServerResource();
  const [src, setSrc] = useState<string>();

  const loadVideo = async (uri: string) => {
    const result = await readServerResource({ uri });
    const content = result?.contents[0];
    if (content && 'blob' in content && content.blob) {
      const binary = atob(content.blob);
      const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
      const blob = new Blob([bytes], { type: content.mimeType });
      setSrc(URL.createObjectURL(blob));
    }
  };

  return src
    ? <video src={src} controls />
    : <button onClick={() => loadVideo('videos://intro')}>Load Video</button>;
}