> ## 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.

# useReadServerResource

> Read resources from the MCP server.

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

## Overview

Returns a function to read a resource from the originating MCP server. The request is proxied through the host. Use [`useListServerResources`](/app-framework/hooks/use-list-server-resources) to discover available resources first.

<Card horizontal title="Wraps readServerResource" icon="cube" href="/mcp-apps/app/requests/read-server-resource">
  MCP Apps SDK reference
</Card>

## Import

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

## Signature

```tsx theme={null}
function useReadServerResource(): (
  params: ReadServerResourceParams
) => Promise<ReadServerResourceResult | undefined>
```

### ReadServerResourceParams

<ResponseField name="uri" type="string" required>
  URI of the resource to read (e.g. `file:///path` or a custom scheme like `videos://intro`).
</ResponseField>

## Returns

<ResponseField name="readServerResource" type="(params: ReadServerResourceParams) => Promise<ReadServerResourceResult | undefined>">
  Function to read a server resource by URI.
</ResponseField>

### ReadServerResourceResult

<ResponseField name="contents" type="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).
</ResponseField>

## Usage

```tsx theme={null}
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>;
}
```