@ubuligan/react

React hooks for talking to an MCP server over Streamable HTTP. Wrap your app in <MCPProvider> and call tools, list resources and prompts from any component.

Part of the MCP Toolkit.

HTTP only. The browser has no stdio transport, so this package connects over Streamable HTTP and talks to the SDK Client directly (it does not depend on @ubuligan/client).

Install

npm install @ubuligan/react react

react >=18 is a peer dependency.

Quick start

import { MCPProvider, useMCPClient, useTools, useTool } from "@ubuligan/react";

function App() {
  return (
    <MCPProvider url="http://localhost:3000/mcp">
      <Tools />
    </MCPProvider>
  );
}

function Tools() {
  const { connected, error } = useMCPClient();
  const { data, loading } = useTools();
  const add = useTool("add");

  if (error) return <p>Failed: {error.message}</p>;
  if (!connected || loading) return <p>Connecting…</p>;

  return (
    <div>
      <ul>{data?.tools.map((t) => <li key={t.name}>{t.name}</li>)}</ul>
      <button onClick={() => add.call({ a: 2, b: 3 })}>Add 2 + 3</button>
      {add.data && <pre>{JSON.stringify(add.data.content, null, 2)}</pre>}
    </div>
  );
}

API

<MCPProvider url headers? name? version?>

Connects over Streamable HTTP and provides the client via context. Re-connects when url/headers change; safe under React 18 StrictMode double-invoke.

| Prop | Type | Notes | | --- | --- | --- | | url | string | Required. The server's Streamable HTTP endpoint. | | headers | Record<string,string> | Optional request headers (e.g. auth). | | name, version | string | Client identity. |

Hooks

| Hook | Returns | | --- | --- | | useMCPClient() | { client, connected, error } | | useTools() | { data, loading, error, refresh } — list of tools | | useResources() | { data, loading, error, refresh } — list of resources | | usePrompts() | { data, loading, error, refresh } — list of prompts | | useTool(name) | { call(args?), data, loading, error } — call a single tool | | useMCPContext() | raw context value (throws outside a provider) |

License

MIT