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

# useListServerResources

> Discover available resources on the MCP server.

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

## Overview

Returns a function to discover available resources on the originating MCP server. The request is proxied through the host. Supports pagination via cursor. Use [`useReadServerResource`](/app-framework/hooks/use-read-server-resource) to read a discovered resource.

<Card horizontal title="Wraps listServerResources" icon="cube" href="/mcp-apps/app/requests/list-server-resources">
  MCP Apps SDK reference
</Card>

## Import

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

## Signature

```tsx theme={null}
function useListServerResources(): (
  params?: ListServerResourcesParams
) => Promise<ListServerResourcesResult | undefined>
```

### ListServerResourcesParams

<ResponseField name="cursor" type="string">
  Pagination cursor from a previous response.
</ResponseField>

## Returns

<ResponseField name="listServerResources" type="(params?: ListServerResourcesParams) => Promise<ListServerResourcesResult | undefined>">
  Function to list available server resources.
</ResponseField>

### ListServerResourcesResult

<ResponseField name="resources" type="ServerResource[]" required>
  Available resources.

  <Expandable title="ServerResource">
    <ResponseField name="uri" type="string" required>
      Resource URI.
    </ResponseField>

    <ResponseField name="name" type="string" required>
      Human-readable name.
    </ResponseField>

    <ResponseField name="description" type="string">
      Optional description.
    </ResponseField>

    <ResponseField name="mimeType" type="string">
      MIME type hint.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="nextCursor" type="string">
  Cursor for fetching the next page, if more results exist.
</ResponseField>

## Usage

```tsx theme={null}
import { useListServerResources, useReadServerResource } from 'sunpeak';
import { useState, useEffect } from 'react';

function ResourceBrowser() {
  const listServerResources = useListServerResources();
  const readServerResource = useReadServerResource();
  const [resources, setResources] = useState<Array<{ uri: string; name: string }>>([]);

  useEffect(() => {
    listServerResources().then(result => {
      if (result) setResources(result.resources);
    });
  }, [listServerResources]);

  const handleSelect = async (uri: string) => {
    const result = await readServerResource({ uri });
    console.log('Resource contents:', result?.contents);
  };

  return (
    <ul>
      {resources.map(r => (
        <li key={r.uri}>
          <button onClick={() => handleSelect(r.uri)}>{r.name}</button>
        </li>
      ))}
    </ul>
  );
}
```