Agent Card is used to display agent information in a thumbnail format.

children

description

illustration

title

variant

version

() => {
  return (
    <Grid columns={[1, 2, 3]} gap="$24">
      <AgentCard
        variant="thumbnail"
        illustration={<AgentIcon icon={IconPlayerPlay} size="m" variant="red" />}
        version="1.4.2"
        title="Youtube Summarizer"
        description="Automated YouTube transcript summarizer"
      >
        <AgentCard.Footer>
          <Box display="flex" gap="$4">
            <Menu trigger={<Button size="small" icon={IconDotsHorizontal} aria-label="More" round variant="ghost" />}>
              <Menu.Item>Download Agent (.zip)</Menu.Item>
            </Menu>
            <Button size="small" icon={IconArrowRight} aria-label="publish" round />
          </Box>
        </AgentCard.Footer>
      </AgentCard>
      <AgentCard
        variant="thumbnail"
        illustration={<AgentIcon icon={IconPlayerPlay} size="m" variant="red" />}
        version="1.4.2"
        title="Youtube Summarizer"
        description="YouTube summarizer"
      >
        <AgentCard.Footer>
          <Box display="flex" gap="$4">
            <Menu trigger={<Button size="small" icon={IconDotsHorizontal} aria-label="More" round variant="ghost" />}>
              <Menu.Item>Download Agent (.zip)</Menu.Item>
            </Menu>
            <Button size="small" icon={IconArrowRight} aria-label="publish" round />
          </Box>
        </AgentCard.Footer>
      </AgentCard>
      <AgentCard
        variant="thumbnail"
        illustration={<AgentIcon icon={IconPlayerPlay} size="m" variant="red" />}
        version="1.4.2"
        title="Youtube Summarizer"
        description="YouTube summarizer that summarizes videos using Audio Summarization"
      >
        <AgentCard.Footer>
          <Box display="flex" gap="$4">
            <Menu trigger={<Button size="small" icon={IconDotsHorizontal} aria-label="More" round variant="ghost" />}>
              <Menu.Item>Download Agent (.zip)</Menu.Item>
            </Menu>
            <Button size="small" icon={IconArrowRight} aria-label="publish" round />
          </Box>
        </AgentCard.Footer>
      </AgentCard>
    </Grid>
  );
}

AgentCard

() => {
  const [openItems, setOpenItems] = useState<boolean[]>(actionPackages.map(() => false));

  const handleItemToggle = (index: number, isOpen: boolean) => {
    setOpenItems((prev) => {
      const newState = [...prev];
      newState[index] = isOpen;
      return newState;
    });
  };

  return (
    <AgentCard
      illustration={<AgentIcon icon={IconDollar2} size="m" variant="yellow" />}
      version="1.0.1"
      title="Reconciliation Agent with loooong title"
      description="The Remittance Reconciliation Agent autonomously processes and validates remittance data, ensuring accuracy in totals and invoice counts. It reconciles with Accounts Receivable, flags issues, generates reports, and involves humans only when necessary."
    >
      <AgentCard.Content>
        <AgentCard.ActionPackageList>
          {actionPackages.map((actionPackage, index) => (
            <AgentCard.ActionPackageList.Item
              statusIcon={actionPackage.statusIcon}
              illustration={actionPackage.illustration}
              key={\`\${actionPackage.name}-\${actionPackage.version}\`}
              name={openItems[index] ? actionPackage.title : actionPackage.name}
              description={actionPackage.description}
              version={actionPackage.version}
              actions={actionPackage.actions}
              queries={actionPackage.queries}
              mcpTools={actionPackage.mcpTools}
              isOpen={openItems[index]}
              onOpenChange={(isOpen) => handleItemToggle(index, isOpen)}
            />
          ))}
        </AgentCard.ActionPackageList>

        <Grid columns={[1, 2, 3]} gap="$24" paddingTop="$20">
          <AgentCard.Kpi
            label="Data Source"
            value={
              <>
                <IconPostgresql />
                PostgreSQL
              </>
            }
          />
          <AgentCard.Kpi
            label="Data Source"
            value={
              <>
                <IconSnowflake />
                Snowflake
              </>
            }
          />
          <AgentCard.Kpi
            label="Prediction Model"
            value={
              <>
                <IconAnyModel color="green30" />
                token_consumption
              </>
            }
          />
          <AgentCard.Kpi
            label="File"
            value={
              <>
                <IconAnyFile />1 file
              </>
            }
          />
          <AgentCard.Kpi
            label="Agent Type"
            value={
              <>
                <IconWorkers />
                Worker
              </>
            }
          />

          <AgentCard.Kpi
            label="Large Language Model"
            value={
              <>
                <IconOpenAI /> OpenAI GPT-4o
              </>
            }
          />
        </Grid>
      </AgentCard.Content>
    </AgentCard>
  );
}

PreviewOverview

() => {
  const [open, setOpen] = useState<boolean>(false);

  const versions = [
    {
      version: '1.0.1',
      title: 'New best ever version',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc',
      date: 'Apr 1, 2024'
    },
    {
      version: '1.0.0',
      description: 'Version description',
      date: 'Feb 1, 2024'
    },
    {
      version: '0.9.1',
      title: 'Best ever version',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
      date: 'Feb 1, 2024'
    },
    {
      version: '0.9.1',
      description: 'Version description',
      date: 'Feb 1, 2024'
    },
    {
      version: '0.9.1',
      description: 'Version description',
      date: 'Feb 1, 2024'
    }
  ];
  return (
    <Box>
      <Dialog
        width={640}
        trigger={
          <Button data-testid="open-dialog" onClick={() => setOpen(true)} round>
            Open Dialog
          </Button>
        }
        open={open}
        onClose={() => setOpen(false)}
      >
        <Dialog.Header>
          <AgentCard.Header
            illustration={<AgentIcon icon={IconDollar2} size="m" variant="yellow" />}
            title="Reconciliation Agent with loooong title"
            description="The Remittance Reconciliation Agent autonomously processes and validates remittance data, ensuring accuracy in totals and invoice counts. It reconciles with Accounts Receivable, flags issues, generates reports, and involves humans only when necessary."
            version="1.0.1"
            isDialogHeader
          />
        </Dialog.Header>
        <Dialog.Content>
          <Tabs activeTab={0}>
            <Tabs.Tab>Overview</Tabs.Tab>
            <Tabs.Tab>Versions</Tabs.Tab>

            <Tabs.Panel>
              <Box height="100%" display="flex" flexDirection="column" overflow="hidden" overflowY="auto" flex="1">
                <AgentCard.Content>
                  <AgentCard.ActionPackageList>
                    {actionPackages.map((actionPackage) => (
                      <AgentCard.ActionPackageList.Item
                        statusIcon={actionPackage.statusIcon}
                        illustration={actionPackage.illustration}
                        key={\`\${actionPackage.name}-\${actionPackage.version}\`}
                        name={actionPackage.name}
                        description={actionPackage.description}
                        version={actionPackage.version}
                        actions={actionPackage.actions}
                        queries={actionPackage.queries}
                        mcpTools={actionPackage.mcpTools}
                      />
                    ))}
                  </AgentCard.ActionPackageList>

                  <Grid columns={[1, 2, 3]} gap="$24" paddingTop="$20">
                    <AgentCard.Kpi
                      label="Data Source"
                      value={
                        <>
                          <IconPostgresql />
                          PostgreSQL
                        </>
                      }
                    />
                    <AgentCard.Kpi
                      label="Data Source"
                      value={
                        <>
                          <IconSnowflake />
                          Snowflake
                        </>
                      }
                    />
                    <AgentCard.Kpi
                      label="Prediction Model"
                      value={
                        <>
                          <IconAnyModel color="green30" />
                          token_consumption
                        </>
                      }
                    />
                    <AgentCard.Kpi
                      label="File"
                      value={
                        <>
                          <IconAnyFile />1 file
                        </>
                      }
                    />
                    <AgentCard.Kpi
                      label="Agent Type"
                      value={
                        <>
                          <IconWorkers />
                          Worker
                        </>
                      }
                    />

                    <AgentCard.Kpi
                      label="Large Language Model"
                      value={
                        <>
                          <IconOpenAI /> OpenAI GPT-4o
                        </>
                      }
                    />
                  </Grid>
                </AgentCard.Content>
              </Box>
            </Tabs.Panel>
            <Tabs.Panel>
              {versions.map((version, index) => (
                <Box
                  display="flex"
                  justifyContent="space-between"
                  gap="$20"
                  key={version.version}
                  pt={index === 0 ? 0 : '$12'}
                  pb="$12"
                >
                  <Box display="flex" gap="$20">
                    <Box>
                      <Typography variant="body-medium" fontWeight={500} fontSize={12} fontFamily="monospace" $nowrap>
                        {version.version}
                      </Typography>
                    </Box>
                    <Box display="flex" flexDirection="column" gap="$4">
                      <Typography variant="body-small" fontWeight={600}>
                        {version.title}
                      </Typography>
                      <Typography variant="body-small">{version.description}</Typography>
                    </Box>
                  </Box>
                  <Box>
                    <Typography variant="body-medium" color="content.subtle" fontSize={12} fontFamily="monospace" $nowrap>
                      {version.date}
                    </Typography>
                  </Box>
                </Box>
              ))}
            </Tabs.Panel>
          </Tabs>
        </Dialog.Content>
        <Dialog.Actions>
          <Button variant="primary" onClick={() => setOpen(false)} round>
            Deploy
          </Button>
          <Button variant="secondary" onClick={() => setOpen(false)} round>
            Cancel
          </Button>
          <Button variant="outline" align="secondary" onClick={() => setOpen(false)} round>
            Delete
          </Button>
        </Dialog.Actions>
      </Dialog>
    </Box>
  );
}

Name	Description	Default
children	The agent children.	-
description	The agent description.	-
illustration	The agent icon.	-
title required	The agent title.	-
variant	Variant of the card.	default
version	The agent version.	-

Agent Card component

Preview Overview

Preview Dialog