@nuxtagentic/integrations 0.0.0-stage → 0.1.0

package/runtime/pages/integrations.vue

@@ -0,0 +1,481 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import {
+  definePageMeta,
+  useAsyncData,
+  useCloudConfig,
+  useRequestFetch,
+  useRoute,
+  useRouter,
+  useToast,
+} from '#imports'
+import { useWorkspaceScope } from '@nuxtagentic/identity/runtime/composables/useWorkspaceScope'
+import type { IntegrationsConfig } from '../../schema'
+import {
+  createIntegrationCommands,
+  type IntegrationConnection,
+  type McpServerTool,
+} from '../../client'
+import IntegrationCatalog from '../components/IntegrationCatalog.vue'
+import IntegrationConnectionPanel from '../components/IntegrationConnectionPanel.vue'
+import {
+  INTEGRATION_CATALOG,
+  type IntegrationDefinition,
+  type IntegrationScope,
+} from '../shared/catalog'
+
+definePageMeta({ layout: 'dashboard', middleware: ['auth'] })
+const route = useRoute()
+const router = useRouter()
+const scope = useWorkspaceScope()
+const fetcher = useRequestFetch()
+const toast = useToast()
+const commands = createIntegrationCommands(fetcher)
+const { data, status, error, refresh } = await useAsyncData(
+  `integrations:${scope.value}`,
+  commands.catalog,
+)
+const api = useCloudConfig<IntegrationsConfig>()
+const { data: approvals, refresh: refreshApprovals } = await useAsyncData(
+  `integration-approvals:${scope.value}`,
+  () =>
+    api.integrationApproval.list({
+      pageSize: 100,
+      filters: {
+        type: 'group',
+        logic: 'and',
+        children: [{ type: 'condition', field: 'status', operator: 'eq', value: 'pending' }],
+      },
+    }),
+)
+const selected = computed(() =>
+  INTEGRATION_CATALOG.find((entry) => entry.id === route.query.integration),
+)
+const open = computed({
+  get: () => !!selected.value,
+  set: (value: boolean) => {
+    if (!value) {
+      void router.replace({ query: { ...route.query, integration: undefined } })
+    }
+  },
+})
+const tab = computed(() =>
+  route.query.tab === 'connected' || route.query.tab === 'available' ? route.query.tab : 'all',
+)
+const category = computed({
+  get: () => String(route.query.category ?? 'All'),
+  set: (value) => {
+    void router.replace({
+      query: { ...route.query, category: value === 'All' ? undefined : value },
+    })
+  },
+})
+const search = computed({
+  get: () => String(route.query.search ?? ''),
+  set: (value) => {
+    void router.replace({ query: { ...route.query, search: value || undefined } })
+  },
+})
+const connectionsOf = (provider: string) =>
+  (data.value?.connections ?? []).filter((entry) => entry.provider === provider)
+const providerOf = (entry: IntegrationDefinition) =>
+  data.value?.providers.find((provider) => provider.id === entry.auth.oauth?.provider)
+
+const activeId = ref<number>()
+const adding = ref(false)
+const ownership = ref<IntegrationScope>('user')
+const server = ref('')
+const permissions = ref<string[]>([])
+const approvalList = ref<string[]>([])
+const settings = ref<Record<string, string>>({})
+const credentials = ref<Record<string, string>>({})
+const tools = ref<McpServerTool[]>()
+const endpoint = ref<{ url: string; secret: string }>()
+const choosing = ref<number>()
+const isBusy = ref(false)
+const message = ref('')
+const active = computed(() =>
+  selected.value
+    ? connectionsOf(selected.value.id).find((entry) => entry.id === activeId.value)
+    : undefined,
+)
+const pendingAccount = computed(() =>
+  choosing.value ? data.value?.pending.find((entry) => entry.id === choosing.value) : undefined,
+)
+const pendingApprovals = computed(() =>
+  (approvals.value?.data ?? []).filter((approval) =>
+    data.value?.connections.some((row) => row.id === approval.connectionId),
+  ),
+)
+const dialog = ref<InstanceType<typeof IntegrationConnectionPanel>>()
+const source = ref<DOMRect>()
+
+function reset(entry?: IntegrationDefinition) {
+  activeId.value = undefined
+  adding.value = false
+  credentials.value = {}
+  server.value = ''
+  tools.value = undefined
+  endpoint.value = undefined
+  message.value = ''
+  // Shared first where the provider is a workspace install and the viewer may add one.
+  const workspaceFirst =
+    entry?.ownership[0] === 'workspace' && !!data.value?.organization && !!data.value.manager
+  ownership.value = workspaceFirst || !entry?.ownership.includes('user') ? 'workspace' : 'user'
+}
+watch(selected, (entry) => reset(entry), { immediate: true })
+
+async function manage(connection: IntegrationConnection) {
+  activeId.value = connection.id
+  adding.value = false
+  permissions.value = [...connection.permissions]
+  approvalList.value = [...connection.approvals]
+  settings.value = { ...connection.settings }
+  endpoint.value = undefined
+  tools.value = undefined
+  message.value = ''
+  if (selected.value?.auth.mcp) {
+    try {
+      tools.value = await commands.mcpTools(selected.value.id, connection.id)
+    } catch (cause) {
+      tools.value = []
+      message.value = errorMessage(cause)
+    }
+  }
+}
+
+function errorMessage(cause: unknown) {
+  const value = cause as { data?: { statusMessage?: string; message?: string }; message?: string }
+  return (
+    value.data?.statusMessage ??
+    value.data?.message ??
+    value.message ??
+    'Could not save this connection.'
+  )
+}
+function selectTab(value: string | number) {
+  void router.replace({
+    query: { ...route.query, tab: value === 'all' ? undefined : String(value) },
+  })
+}
+async function show(entry: IntegrationDefinition, event: MouseEvent) {
+  source.value = (event.currentTarget as HTMLElement)
+    .closest('[data-integration-card]')
+    ?.getBoundingClientRect()
+  await router.replace({ query: { ...route.query, integration: entry.id } })
+}
+function morph() {
+  if (
+    !dialog.value?.element ||
+    !source.value ||
+    matchMedia('(prefers-reduced-motion: reduce)').matches
+  ) {
+    return
+  }
+  const element = dialog.value.element.closest('[role=dialog]') as HTMLElement | null
+  if (!element) {
+    return
+  }
+  const target = element.getBoundingClientRect()
+  const origin = source.value
+  element.animate(
+    [
+      {
+        transform: `translate(${origin.left - target.left}px, ${origin.top - target.top}px) scale(${origin.width / target.width}, ${origin.height / target.height})`,
+        transformOrigin: 'top left',
+        borderRadius: '12px',
+      },
+      { transform: 'none', transformOrigin: 'top left', borderRadius: '16px' },
+    ],
+    { duration: 260, easing: 'cubic-bezier(.2,0,0,1)' },
+  )
+  source.value = undefined
+}
+
+async function run<T>(work: () => Promise<T>): Promise<T | undefined> {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  message.value = ''
+  try {
+    return await work()
+  } catch (cause) {
+    message.value = errorMessage(cause)
+  } finally {
+    isBusy.value = false
+  }
+}
+
+/** OAuth and MCP sign-in leave the app; the callback returns to this page. */
+async function connect(reconnect?: IntegrationConnection) {
+  const entry = selected.value
+  if (!entry) {
+    return
+  }
+  const result = await run(() =>
+    commands.start(entry.id, {
+      scope: reconnect?.scope ?? ownership.value,
+      ...(server.value ? { server: server.value } : {}),
+      ...(Object.keys(credentials.value).length ? { fields: credentials.value } : {}),
+      ...(reconnect ? { connection: reconnect.connectionId } : {}),
+    }),
+  )
+  if (result?.url) {
+    window.location.assign(result.url)
+  }
+}
+
+async function connectWithToken() {
+  const entry = selected.value
+  if (!entry) {
+    return
+  }
+  const row = await run(() =>
+    commands.apiKey(entry.id, { scope: ownership.value, credentials: credentials.value }),
+  )
+  if (!row) {
+    return
+  }
+  credentials.value = {}
+  await refresh()
+  toast.add({ title: `${entry.name} connected`, color: 'success' })
+  await manage(row)
+}
+
+async function save() {
+  const entry = selected.value
+  const connection = active.value
+  if (!entry || !connection) {
+    return
+  }
+  const row = await run(() =>
+    commands.update(entry.id, connection.id, {
+      permissions: permissions.value,
+      approvals: approvalList.value,
+      settings: settings.value,
+    }),
+  )
+  if (!row) {
+    return
+  }
+  await refresh()
+  toast.add({ title: `${entry.name} saved`, color: 'success' })
+  activeId.value = undefined
+}
+
+async function disconnect(connection: IntegrationConnection) {
+  const entry = selected.value
+  if (!entry) {
+    return
+  }
+  const done = await run(() => commands.disconnect(entry.id, connection.id))
+  if (!done) {
+    return
+  }
+  await refresh()
+  toast.add({ title: `${connection.label || connection.account} disconnected`, color: 'success' })
+  activeId.value = undefined
+}
+
+async function loadEndpoint(rotate: boolean) {
+  const entry = selected.value
+  const connection = active.value
+  if (!entry || !connection) {
+    return
+  }
+  if (endpoint.value && !rotate) {
+    endpoint.value = undefined
+    return
+  }
+  endpoint.value = await run(() => commands.webhook(entry.id, connection.id, rotate))
+}
+
+async function copy(value: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast.add({ title: 'Copied', color: 'neutral' })
+  } catch {
+    message.value = 'Select the value and copy it.'
+  }
+}
+
+async function choose(target: string) {
+  const entry = selected.value
+  if (!entry || !choosing.value) {
+    return
+  }
+  const row = await run(() => commands.target(entry.id, choosing.value!, target))
+  if (!row) {
+    return
+  }
+  choosing.value = undefined
+  await refresh()
+  toast.add({ title: `${entry.name} connected`, color: 'success' })
+  await manage(row)
+}
+
+async function approval(id: number, approve: boolean) {
+  isBusy.value = true
+  try {
+    await commands.approve(id, approve)
+    await refreshApprovals()
+  } catch (cause) {
+    toast.add({
+      title: 'Could not complete approval',
+      description: errorMessage(cause),
+      color: 'error',
+    })
+    await refreshApprovals()
+  } finally {
+    isBusy.value = false
+  }
+}
+
+/** The OAuth or MCP callback returned here: attach the new account to the integration. */
+onMounted(async () => {
+  const result = route.query.connect
+  const connection = Number(route.query.connection)
+  const failure = route.query.connect_error
+  if (!result && !failure) {
+    return
+  }
+  await router.replace({
+    query: { ...route.query, connect: undefined, connection: undefined, connect_error: undefined },
+  })
+  const entry = selected.value
+  if (failure || !entry) {
+    message.value = String(failure ?? 'The connection could not be completed.')
+    return
+  }
+  if (result === 'choose') {
+    await refresh()
+    choosing.value = connection
+    return
+  }
+  const row = await run(() => commands.bind(entry.id, connection))
+  if (!row) {
+    return
+  }
+  await refresh()
+  toast.add({ title: `${entry.name} connected`, color: 'success' })
+  await manage(row)
+})
+</script>
+
+<template>
+  <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="mx-auto flex max-w-[960px] flex-col gap-5 px-6 pt-7 pb-30">
+      <div class="flex flex-col gap-1.5">
+        <h1 class="text-2xl leading-8 font-medium tracking-[-.01em]">Integrations</h1>
+        <p class="text-sm leading-5 text-muted text-pretty">
+          Connect the tools your agents work with. Events from a connected app can start an agent,
+          and agents can act inside it with the permissions you grant.
+        </p>
+      </div>
+      <UAlert
+        v-if="error"
+        color="error"
+        variant="subtle"
+        title="Could not load connections"
+        :description="errorMessage(error)"
+      />
+      <IntegrationCatalog
+        v-model:category="category"
+        v-model:search="search"
+        :tab="tab"
+        :connections="data?.connections ?? []"
+        :loading="status === 'pending'"
+        :error="!!error"
+        @update:tab="selectTab"
+        @select="show"
+      />
+      <UCollapsible
+        v-if="pendingApprovals.length"
+        class="rounded-xl border border-default p-4"
+      >
+        <UButton
+          color="neutral"
+          variant="ghost"
+          :label="`${pendingApprovals.length} actions awaiting your approval`"
+          trailing-icon="i-lucide-chevron-down"
+        />
+        <template #content>
+          <div
+            v-for="item in pendingApprovals"
+            :key="item.id"
+            class="mt-3 flex flex-col gap-2 border-t border-default pt-3"
+          >
+            <span class="text-sm">{{ item.action.replaceAll('_', ' ') }}</span>
+            <pre class="max-h-40 overflow-auto text-xs text-muted">{{
+              JSON.stringify(item.input, null, 2)
+            }}</pre>
+            <div class="flex gap-2">
+              <UButton
+                label="Approve"
+                color="neutral"
+                :disabled="isBusy"
+                @click="approval(item.id, true)"
+              />
+              <UButton
+                label="Reject"
+                color="neutral"
+                variant="outline"
+                :disabled="isBusy"
+                @click="approval(item.id, false)"
+              />
+            </div>
+          </div>
+        </template>
+      </UCollapsible>
+    </div>
+  </div>
+  <UModal
+    v-model:open="open"
+    :title="selected?.name"
+    :description="selected?.details"
+    :ui="{
+      content:
+        'w-[480px] max-w-[calc(100vw-32px)] rounded-2xl border border-(--gray-500) bg-(--gray-200) shadow-2xl data-[state=open]:animate-none motion-reduce:animate-none',
+      overlay: 'bg-black/55 motion-reduce:animate-none',
+    }"
+    :content="{ onOpenAutoFocus: () => nextTick(morph) }"
+  >
+    <template #content>
+      <IntegrationConnectionPanel
+        v-if="selected"
+        ref="dialog"
+        v-model:permissions="permissions"
+        v-model:approvals="approvalList"
+        v-model:credentials="credentials"
+        v-model:settings="settings"
+        v-model:scope="ownership"
+        v-model:server="server"
+        :integration="selected"
+        :connections="connectionsOf(selected.id)"
+        :active="active"
+        :adding="adding"
+        :provider="providerOf(selected)"
+        :manager="!!data?.manager"
+        :organization="!!data?.organization"
+        :pending="pendingAccount"
+        :tools="tools"
+        :endpoint="endpoint"
+        :busy="isBusy"
+        :message="message"
+        @close="open = false"
+        @add="adding = true"
+        @back="reset(selected)"
+        @manage="manage"
+        @connect="connect()"
+        @reconnect="connect"
+        @api-key="connectWithToken"
+        @save="save"
+        @disconnect="disconnect"
+        @endpoint="loadEndpoint"
+        @copy="copy"
+        @choose="choose"
+      />
+    </template>
+  </UModal>
+</template>

package/runtime/server/api/integrations/approvals/[id].post.ts

@@ -0,0 +1,69 @@
+import { readCommandBody } from '../../../utils/request-body'
+import { defineEventHandler, getRouterParam } from 'h3'
+import { assertGoogleMutation } from '@nuxtagentic/google/runtime/server/utils/google'
+import { notifyApproval } from '../../../utils/approval-continuation'
+import {
+  getIntegrationContext,
+  performIntegrationAction,
+  toActionError,
+} from '../../../utils/integration-context'
+export default defineEventHandler(async (event) => {
+  assertGoogleMutation(event)
+  try {
+    const context = await getIntegrationContext(event)
+    const approval = await context.api.integrationApproval.get(Number(getRouterParam(event, 'id')))
+    const connection = await context.api.integrationConnection.get(approval.connectionId)
+    if (connection.workspace !== context.workspace) {
+      throw new Error('This approval is no longer pending in this workspace.')
+    }
+    if (['completed', 'rejected', 'failed'].includes(approval.status)) {
+      await notifyApproval(event, approval.id, approval.continuation, context.env)
+      return approval
+    }
+    if (approval.status !== 'pending') {
+      throw new Error('This action is already being handled. Check its result before retrying.')
+    }
+    const body = await readCommandBody<{ approve: boolean }>(event, 1000)
+    if (typeof body.approve !== 'boolean') {
+      throw new Error('Choose approve or reject.')
+    }
+    await context.api.integrationApproval.update(approval.id, {
+      status: body.approve ? 'approved' : 'rejected',
+      ownerId: context.ownerId,
+    })
+    if (!body.approve) {
+      await notifyApproval(event, approval.id, approval.continuation, context.env)
+      return { status: 'rejected' }
+    }
+    let completed
+    try {
+      const result = await performIntegrationAction(
+        context,
+        {
+          provider: connection.provider,
+          action: approval.action,
+          input: approval.input as Record<string, unknown>,
+          bindingId: connection.id,
+        },
+        { approved: true, idempotencyKey: `approval-${approval.id}` },
+      )
+      completed = await context.api.integrationApproval.update(approval.id, {
+        status: 'completed',
+        result,
+        ownerId: context.ownerId,
+      })
+    } catch (cause) {
+      await context.api.integrationApproval.update(approval.id, {
+        status: 'failed',
+        result: { error: cause instanceof Error ? cause.message : 'Action failed.' },
+        ownerId: context.ownerId,
+      })
+      await notifyApproval(event, approval.id, approval.continuation, context.env)
+      throw cause
+    }
+    await notifyApproval(event, approval.id, approval.continuation, context.env)
+    return completed
+  } catch (cause) {
+    throw toActionError(cause)
+  }
+})

package/runtime/server/api/integrations/catalog/[provider]/action.post.ts

@@ -0,0 +1,35 @@
+import { readCommandBody } from '../../../../utils/request-body'
+import { defineEventHandler, getRouterParam } from 'h3'
+import { assertGoogleMutation } from '@nuxtagentic/google/runtime/server/utils/google'
+import {
+  toActionError,
+  getIntegrationContext,
+  performIntegrationAction,
+} from '../../../../utils/integration-context'
+
+export default defineEventHandler(async (event) => {
+  assertGoogleMutation(event)
+  try {
+    const context = await getIntegrationContext(event)
+    const body = await readCommandBody<{
+      action: string
+      input: Record<string, unknown>
+      binding?: number
+    }>(event, 100000)
+    if (
+      !body.input ||
+      typeof body.input !== 'object' ||
+      JSON.stringify(body.input).length > 100000
+    ) {
+      throw new Error('Provide action parameters under input, up to 100 KB.')
+    }
+    return await performIntegrationAction(context, {
+      provider: getRouterParam(event, 'provider')!,
+      action: body.action,
+      input: body.input,
+      ...(typeof body.binding === 'number' ? { bindingId: body.binding } : {}),
+    })
+  } catch (cause) {
+    throw toActionError(cause)
+  }
+})