Client-Side API

import { useMcp } from '@mcp-ts/client/client/react';

const {
  connections,
  status,
  isInitializing,
  connect,
  reconnect,
  disconnect,
  refresh,
  connectSSE,
  disconnectSSE,
  finishAuth,
  resumeAuth,
  callTool,
  listTools,
  listPrompts,
  getPrompt,
  listResources,
  readResource,
  getConnection,
  getConnectionByServerId,
  isServerConnected,
  getTools,
  sseClient,
} = useMcp({
  url: string,
  userId: string,
  authToken?: string,
  autoConnect?: boolean,
  autoInitialize?: boolean,
  onRedirect?: (url) => void,
  onConnectionEvent?: (event) => void,
  onLog?: (level, message, metadata) => void,
  requestTimeout?: number,
  debug?: boolean,
});

import { useMcpApps } from '@mcp-ts/client/client/react';

const { getAppMetadata, McpAppRenderer } = useMcpApps(mcpClient);

interface McpAppMetadata {
  toolName: string;
  resourceUri: string;
  sessionId: string;
}

import { McpAppRenderer, DEFAULT_MCP_APP_CSP } from '@mcp-ts/client/client/react';

function ToolCallRenderer({ name, args, result, status }) {
  const { mcpClient } = useMcpContext();

  return (
    <McpAppRenderer
      client={mcpClient}
      name={name}
      input={args}
      result={result}
      status={status}
      sandbox={{
        url: '/sandbox_proxy.html',
        csp: DEFAULT_MCP_APP_CSP,
      }}
    />
  );
}

import { useAppHost } from '@mcp-ts/client/client/react';

const { host, error } = useAppHost(sseClient, iframeRef, { sandbox: { url: '/sandbox_proxy.html' } });

import {
  AppHost,
  DEFAULT_MCP_APP_CSP,
  APP_HOST_DEFAULTS,
} from '@mcp-ts/client/client';
import {
  SANDBOX_PROXY_READY_METHOD,
  SANDBOX_RESOURCE_READY_METHOD,
} from '@mcp-ts/client/client';

new AppHost(client, iframe, options?)

import { SSEClient } from '@mcp-ts/client/client';

const client = new SSEClient({
  url: string,
  userId: string,
  authToken?: string,
  onConnectionEvent?: (event) => void,
  onStatusChange?: (status) => void,
  onLog?: (level, message, metadata) => void,
});