React Integration

import {
  McpClientProvider,
  useMcpClient,
  useMcpServer,
  useMcp,
  onMcpAuthorization,
} from "@mcp-use/client/react";

function App() {
  return (
    <McpClientProvider defaultAutoProxyFallback>
      <Dashboard />
    </McpClientProvider>
  );
}

function Dashboard() {
  const { addServer, servers } = useMcpClient();

  useEffect(() => {
    addServer("demo", {
      url: "http://localhost:3000/mcp",
      displayName: "Demo",
    });
  }, [addServer]);

  return servers.map((s) => <ServerPanel key={s.id} serverId={s.id} />);
}

function ServerPanel({ serverId }: { serverId: string }) {
  const server = useMcpServer(serverId);
  if (!server || server.state !== "ready") {
    return <div>{server?.state ?? "loading"}…</div>;
  }

  return (
    <div>
      <h3>{server.displayName}</h3>
      <p>{server.tools.length} tools</p>
      <button onClick={() => server.callTool("echo", { msg: "hi" })}>
        Call echo
      </button>
    </div>
  );
}

function ServerAuth({ serverId }: { serverId: string }) {
  const server = useMcpServer(serverId);
  if (!server) return null;

  const needsOptionalAuth =
    server.authorization?.mode === "mixed" &&
    !server.authorization.authenticated;

  return needsOptionalAuth ? (
    <div>
      <p>This server is using mixed auth. Public tools are available.</p>
      <button onClick={() => void server.authenticate()}>Authenticate</button>
    </div>
  ) : null;
}

import { onMcpAuthorization } from "@mcp-use/client/react";
import { useEffect } from "react";

export default function OAuthCallback() {
  useEffect(() => {
    void onMcpAuthorization();
  }, []);
  return <div>Completing sign-in…</div>;
}

<McpClientProvider
  defaultProxyConfig={{ proxyAddress: "https://app.example.com/api/proxy" }}
  defaultOAuthProxyUrl="https://app.example.com/api/oauth"
  defaultAutoProxyFallback
>
  <App />
</McpClientProvider>

import { LocalStorageProvider } from "@mcp-use/client/react";

<McpClientProvider storageProvider={new LocalStorageProvider("my-servers")}>
  <App />
</McpClientProvider>;

const mcp = useMcp({ url: "http://localhost:3000/mcp" });

if (mcp.state === "pending_auth") {
  return <button onClick={mcp.authenticate}>Sign in</button>;
}
if (mcp.state !== "ready") return <div>Connecting…</div>;

return (
  <>
    {mcp.authorization?.mode === "mixed" &&
      !mcp.authorization.authenticated && (
        <button onClick={mcp.authenticate}>Authenticate protected tools</button>
      )}
    <pre>{mcp.tools.map((t) => t.name).join("\n")}</pre>
  </>
);