Add AI to your app
in one session.

import { useWebMCP } from "@webmcp/react";

export function RefundForm() {
  useWebMCP({
    name: "refund.create",
    description: "Create a refund (requires approval)",
    inputSchema: { /* JSON Schema */ },
    handler: async ({ order_id, reason }) => {
      // Call existing UI logic
      openRefundModal({ order_id, reason });

      // Return structured status
      return { status: "awaiting_user_confirmation" };
    }
  });

  return <button onClick={() => openRefundModal()}>Refund</button>;
}

navigator.modelContext.registerTool({
  name: "invoice.submit",
  description: "Submit invoice (approval required)",
  inputSchema: { /* JSON Schema */ },
  handler: async ({ invoice_id }) => {
    return await submitInvoice(invoice_id);
  }
});

# char.config.yaml (placeholder)
remote_mcp:
  - name: "<SERVER_NAME>"
    url: "https://<MCP_SERVER>/mcp"
    auth:
      type: "oauth"
      issuer: "https://<IDP_ISSUER>"
      client_id: "<CLIENT_ID>"
      scopes: ["<SCOPE_1>", "<SCOPE_2>"]