ActivateAgentDialog() — ui Function Reference

Architecture documentation for the ActivateAgentDialog() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ActivateAgentDialog() — ui Function Reference

Dependency Diagram

graph TD
  31bd0e02_c525_b2a3_c4cd_b0ac899d2ab9["ActivateAgentDialog()"]
  57afcab1_fc30_7f69_ecf5_50ea8da6ba44["vercel.tsx"]
  31bd0e02_c525_b2a3_c4cd_b0ac899d2ab9 -->|defined in| 57afcab1_fc30_7f69_ecf5_50ea8da6ba44
  style 31bd0e02_c525_b2a3_c4cd_b0ac899d2ab9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 599–660

function ActivateAgentDialog() {
  return (
    <Example title="Activate Agent" className="items-center justify-center">
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Activate Agent
        </DialogTrigger>
        <DialogContent showCloseButton={false}>
          <DialogHeader>
            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>
            <DialogDescription>
              Your use is subject to Vercel&apos;s{" "}
              <a href="#">Public Beta Agreement</a> and{" "}
              <a href="#">AI Product Terms</a>.
            </DialogDescription>
          </DialogHeader>
          <div className="no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto">
            <ItemGroup className="gap-0 pr-2">
              {agentFeatures.map((feature) => (
                <Item key={feature.id} size="xs" className="px-0">
                  <ItemMedia variant="icon" className="self-start">
                    <IconPlaceholder
                      lucide="CheckCircle2Icon"
                      tabler="IconCircleCheckFilled"
                      hugeicons="CheckmarkCircle02Icon"
                      phosphor="CheckCircleIcon"
                      remixicon="RiCheckboxCircleLine"
                      className="fill-primary text-primary-foreground size-5"
                    />
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle className="text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium">
                      {feature.content}
                    </ItemTitle>
                  </ItemContent>
                </Item>
              ))}
            </ItemGroup>
            <Alert className="hidden sm:grid">
              <IconPlaceholder
                lucide="CircleDollarSignIcon"
                hugeicons="DollarCircleIcon"
                tabler="IconCoin"
                phosphor="CurrencyCircleDollarIcon"
                remixicon="RiMoneyDollarCircleLine"
              />
              <AlertDescription>
                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
              </AlertDescription>
            </Alert>
          </div>
          <DialogFooter>
            <DialogClose render={<Button variant="outline" />}>
              Cancel
            </DialogClose>
            <Button>Enable with $100 credits</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Example>
  )
}