Integrations

"use client"

import * as React from "react"

import { Integrations, type Connection, type CustomServer } from "@/components/blocks/integrations/integrations"
import { normalizeUrl, uniqueId } from "@/components/blocks/integrations/integrations-utils"

type McpServerConfig = {
  url: string
  transport?: "streamable-http" | "sse"
  headers?: Record<string, string>
  disabled?: boolean
  tools?: Record<string, "allow" | "ask" | "off">
}

type McpConfig = { mcpServers: Record<string, McpServerConfig> }

type ServerState = {
  status: Connection["status"]
  account?: string
  error?: string
  tools: { name: string; description?: string; readOnly?: boolean }[]
}

function toConnections(config: McpConfig, live: Record<string, ServerState>): Connection[] {
  return Object.entries(config.mcpServers).map(([name, server]) => {
    const state = live[name]
    return {
      id: name,
      name,
      type: "remote",
      url: server.url,
      transport: server.transport ?? "streamable-http",
      status: server.disabled ? "disabled" : (state?.status ?? "connecting"),
      account: state?.account,
      error: state?.error,
      tools: (state?.tools ?? []).map((tool) => ({ ...tool, access: server.tools?.[tool.name] })),
    }
  })
}

function headersFor(server: CustomServer): Record<string, string> | undefined {
  if (server.auth.kind === "api-key") return { Authorization: `Bearer ${server.auth.key}` }
  if (server.auth.kind === "headers") {
    return Object.fromEntries(server.auth.headers.map((header) => [header.name, header.value]))
  }
  return undefined
}

async function post<T>(path: string, body: unknown, signal?: AbortSignal): Promise<T> {
  const response = await fetch(path, { method: "POST", body: JSON.stringify(body), signal })
  if (!response.ok) throw new Error((await response.text()) || `The server said ${response.status}.`)
  return (await response.json()) as T
}

export function McpSettings({ initial, live }: { initial: McpConfig; live: Record<string, ServerState> }) {
  const [config, setConfig] = React.useState(initial)
  const [state, setState] = React.useState(live)

  const save = async (next: McpConfig) => {
    await post("/api/mcp/config", next)
    setConfig(next)
  }

  const update = (name: string, change: (server: McpServerConfig) => McpServerConfig) =>
    save({ mcpServers: { ...config.mcpServers, [name]: change(config.mcpServers[name]) } })

  return (
    <Integrations
      connections={toConnections(config, state)}
      onTest={(server, { signal }) =>
        post("/api/mcp/test", { url: server.url, transport: server.transport, headers: headersFor(server) }, signal)
      }
      onConnect={async (request, { signal }) => {
        const name =
          request.kind === "reconnect"
            ? request.connection.id
            : request.kind === "custom"
              ? uniqueId(request.server.name, Object.keys(config.mcpServers))
              : request.entry.id
        const url =
          request.kind === "custom" ? request.server.url : request.kind === "directory" ? request.entry.url : undefined
        const server: McpServerConfig =
          request.kind === "reconnect"
            ? config.mcpServers[name]
            : {
                url: normalizeUrl(url ?? ""),
                transport: request.kind === "custom" ? request.server.transport : "streamable-http",
                headers: request.kind === "custom" ? headersFor(request.server) : undefined,
              }
        const result = await post<ServerState>("/api/mcp/connect", { name, ...server }, signal)
        if (request.kind !== "reconnect") await save({ mcpServers: { ...config.mcpServers, [name]: server } })
        setState((current) => ({ ...current, [name]: result }))
        return toConnections({ mcpServers: { [name]: server } }, { [name]: result })[0]
      }}
      onToggleConnection={(name, enabled) => update(name, (server) => ({ ...server, disabled: !enabled }))}
      onAccessChange={(name, tools, access) =>
        update(name, (server) => ({
          ...server,
          tools: { ...server.tools, ...Object.fromEntries(tools.map((tool) => [tool, access])) },
        }))
      }
      onDisconnect={async (name) => {
        const rest = { ...config.mcpServers }
        delete rest[name]
        await save({ mcpServers: rest })
      }}
    />
  )
}

import type { Tool, ToolSet } from "ai"

import { resolveTool, type Connection } from "@/components/blocks/integrations/integrations-utils"

export function toolsFor(connections: Connection[], serverTools: Record<string, ToolSet>): ToolSet {
  const tools: ToolSet = {}
  for (const connection of connections) {
    if (connection.status !== "connected") continue
    const available = serverTools[connection.id] ?? {}
    for (const setting of connection.tools.map(resolveTool)) {
      const tool = available[setting.name]
      if (!tool || setting.access === "off") continue
      tools[`${connection.id}_${setting.name}`] = { ...tool, needsApproval: setting.access === "ask" } as Tool
    }
  }
  return tools
}

"use client"

import { IconPlugConnected } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

import { type Connection } from "@/components/blocks/integrations/integrations"
import { IntegrationsSummary } from "@/components/blocks/integrations/integrations-summary"
import { countEnabledTools } from "@/components/blocks/integrations/integrations-utils"

export function ToolAccessButton({
  connections,
  onManage,
}: {
  connections: Connection[]
  onManage: () => void
}) {
  const live = connections.filter((connection) => connection.status === "connected")

  return (
    <Popover>
      <PopoverTrigger render={<Button variant="ghost" size="sm" />}>
        <IconPlugConnected data-icon="inline-start" />
        {countEnabledTools(live)} tools
      </PopoverTrigger>
      <PopoverContent align="start" className="w-80">
        <IntegrationsSummary connections={connections} onManage={onManage} />
      </PopoverContent>
    </Popover>
  )
}