// src/components/docs/advanced/AdvancedMCPPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function AdvancedMCPPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "MCP Adapters"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "The ",
              /* @__PURE__ */ jsx("strong", {
                children: "Model Context Protocol (MCP)"
              }),
              " is an open standard for connecting AI models to external tools and data sources. ContractSpec provides MCP adapters that allow you to expose your capabilities as MCP tools and consume external MCP servers as capabilities."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Why MCP integration matters"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "AI agents need access to real-world tools and data to be useful. MCP provides a standardized way to expose these capabilities. By integrating ContractSpec with MCP, you can:"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Let AI agents invoke your ContractSpec capabilities safely and securely"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use external MCP servers (databases, APIs, search engines) as capability providers in your workflows"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Build AI-powered features without writing custom integration code"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Enforce policies on AI agent actions just like any other user"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Exposing capabilities as MCP tools"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "Any",
              " ",
              /* @__PURE__ */ jsx(Link, {
                href: "/docs/specs/capabilities",
                className: "text-violet-400 hover:text-violet-300",
                children: "CapabilitySpec"
              }),
              " ",
              "can be automatically exposed as an MCP tool. ContractSpec generates:"
            ]
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "A tool schema describing the capability's inputs, outputs, and purpose"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "An MCP server endpoint that AI agents can connect to"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Policy enforcement ensuring agents can only invoke capabilities they're authorized to use"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Audit logging of all agent actions for compliance and debugging"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: Exposing a capability"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Here's how to expose ContractSpec operations as MCP tools:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { createMcpServer } from '@contractspec/lib.contracts-runtime-server-mcp/provider-mcp';
import { registry, resources, prompts } from './lib/registry';

const server = new McpServer({
  name: 'my-app-mcp',
  version: '1.0.0',
});

createMcpServer(server, registry, resources, prompts, {
  toolCtx: () => ({ actor: 'ai-agent' }),
  promptCtx: () => ({ userId: null, orgId: null }),
  resourceCtx: () => ({ userId: null, orgId: null }),
});

const transport = new StdioServerTransport();
await server.connect(transport);`
            })
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "AI agents can now discover and invoke your operations through the MCP protocol. ContractSpec handles authentication, authorization, and execution automatically via the `OperationSpecRegistry`."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Consuming external MCP servers"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "You can integrate external MCP servers into your workflows. Define an integration spec and use it in your operations:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `import { defineIntegration } from '@contractspec/lib.contracts-integrations';
import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';

const SearchProductsIntegration = defineIntegration({
  meta: {
    key: 'products.search',
    version: '1.0.0',
    category: 'mcp',
    description: 'Search products via external MCP server',
  },
  connection: {
    serverUrl: 'https://api.example.com/mcp',
    toolName: 'search_products',
  },
  io: {
    input: new SchemaModel({
      name: 'SearchProductsInput',
      fields: {
        query: { type: ScalarTypeEnum.String(), isOptional: false },
        category: { type: ScalarTypeEnum.String(), isOptional: true },
      },
    }),
    output: new SchemaModel({
      name: 'ProductResults',
      fields: {
        products: { type: ScalarTypeEnum.JSON(), isOptional: false, isArray: true },
      },
    }),
  },
});`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Policy enforcement for AI agents"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "AI agents are treated like any other actor in ContractSpec. They must authenticate, and all their actions are subject to",
              " ",
              /* @__PURE__ */ jsx(Link, {
                href: "/docs/specs/policy",
                className: "text-violet-400 hover:text-violet-300",
                children: "PolicySpecs"
              }),
              ". You can define specific policies in TypeScript:"
            ]
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `import { definePolicy } from '@contractspec/lib.contracts-spec';

export const AIAgentRestrictions = definePolicy({
  meta: {
    key: 'ai.agent.restrictions',
    version: '1.0.0',
    description: 'Restrict AI agent actions',
  },
  rules: [
    {
      id: 'agents-read-only',
      effect: 'DENY',
      condition: (ctx) => ctx.actor === 'ai-agent' && ctx.action === 'write',
    },
    {
      id: 'agents-require-approval',
      effect: 'DENY',
      condition: (ctx, spec) => 
        ctx.actor === 'ai-agent' && 
        spec.policy.escalate === 'human_review' &&
        !ctx.approvalGranted,
    },
  ],
});`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Human-in-the-loop workflows"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "For sensitive operations, you can require human approval before an AI agent can proceed. ContractSpec provides built-in approval workflows:"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Agent requests permission to invoke a capability"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Request is sent to designated approvers (via email, Slack, etc.)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Approver reviews the request and approves or denies it"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Agent receives the decision and can proceed if approved"
              })
            ]
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "All approval decisions are logged in the",
              " ",
              /* @__PURE__ */ jsx(Link, {
                href: "/docs/safety/auditing",
                className: "text-violet-400 hover:text-violet-300",
                children: "audit log"
              }),
              "."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Best practices"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Start with read-only capabilities for AI agents—only grant write access when necessary."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use human-in-the-loop approval for any capability that modifies critical data or triggers financial transactions."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Set rate limits to prevent runaway agents from overwhelming your system."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Provide clear, detailed descriptions for each capability so agents know when to use them."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Monitor agent actions closely in production and adjust policies as needed."
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Test agent integrations thoroughly with realistic scenarios before deploying."
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/advanced/renderers",
            className: "btn-ghost",
            children: "Previous: Custom Renderers"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/advanced/telemetry",
            className: "btn-primary",
            children: [
              "Next: Telemetry ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  AdvancedMCPPage
};
