import { useMcp } from "ts-mcp/react";

export default function Chat() {
  const { state, tools, error, callTool, retry, authenticate, clearStorage } =
    useMcp({
      url: "https://my-mcp.example.com/sse",
      clientName: "My React App",
      autoReconnect: true,
      debug: process.env.NODE_ENV === "development",
    });

  if (state === "failed") {
    return (
      <div>
        <p>Connection failed: {error}</p>
        <button onClick={retry}>Retry</button>
        <button onClick={authenticate}>Auth Popup</button>
      </div>
    );
  }

  if (state !== "ready") return <p>Connecting…</p>;

  const search = () => callTool("search", { query: "hello" });

  return (
    <>
      <p>{tools.length} tool(s) online</p>
      <button onClick={search}>Search</button>
    </>
  );
}

import React from "react";
import { View, Text, Button } from "react-native";
import { useMcp, AsyncStorageOAuthClientProvider } from "ts-mcp/react-native";

export default function App() {
  const provider = React.useMemo(
    () => new AsyncStorageOAuthClientProvider("https://my-mcp.example.com"),
    []
  );

  const { state, tools, authUrl, authenticate } = useMcp({
    url: "https://my-mcp.example.com/sse",
    provider,
    debug: __DEV__,
  });

  if (authUrl) {
    // You can open the authUrl with `Linking.openURL(authUrl)`
  }

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>{state}</Text>
      <Text>{tools.length} tools</Text>
      {state === "failed" && <Button title="Retry" onPress={authenticate} />}
    </View>
  );
}

import { useEffect } from "react";
import { onMcpAuthorization } from "ts-mcp";

export default function OAuthCallback() {
  useEffect(() => {
    onMcpAuthorization(
      new BrowserOAuthClientProvider("https://my-mcp.example.com")
    );
  }, []);
  return <p>Authenticating… You can close this window.</p>;
}