AI Card

The AI card is a predesigned card with multiple AI actions such as adding input and tone.

Overview

AI card is a styled container that does not have any custom props. Use the styled props to apply styles to the container as needed. Interact with AI card examples and view code in real-time using the controls below.

Resources

Install


yarn add @activecampaign/camp-components-ai

Import


import { AiCard } from '@activecampaign/camp-components-ai'

Variations


<AiCard
  styles={{
    maxWidth: '512px'
  }}
>
  <Flex
    alignItems="start"
    justifyContent="space-between"
  >
    <AiHeading
      appearance="small"
      mb="sp300"
      styles={{
        display: 'block'
      }}
    >
      This is a title
    </AiHeading>
    <MockMenu />
  </Flex>
  <Text.Body>
    We initiated contact with Camping Supply Chicago for our CRM solution. Joshua Camp showed interest after our outreach on May 1, 2024. We had a successful sales call on May 7, 2024, and then scheduled a demo for May 10, 2024. The deal remains active with a 83% probability of closing.
  </Text.Body>
</AiCard>

AI card with input and actions


<>
  <AiCard
    styles={{
      maxWidth: '512px'
    }}
  >
    <AiHeading
      appearance="small"
      mb="sp300"
      styles={{
        display: 'block'
      }}
    >
      What is this email about?
    </AiHeading>
    <Input
      dangerouslySetStyles={{
        '& > div': {
          width: '100%'
        },
        display: 'block',
        width: '100%'
      }}
      onChange={(e) => {setVal(e.target.value)}}
      placeholder="Describe what you want in this email"
    />
    <Flex
      alignItems="center"
      justifyContent="space-between"
      mt="sp400"
    >
      <DropdownRoot
        appearance="floating"
        minMenuWidth="200px"
        onSelect={({ selectedItem }) => {
          setSelectedOption(selectedItem as string);
        }}
        optionToString={(x) => x as string}
        options={[
          'Warm and friendly',
          'Informative and candid',
          'Joyful and humorous'
        ]}
        placeholder="Select tone"
      />
      <AiButton
        appearance="fill"
        disabled
        onClick={() => {
          setTextAreaVal(mockResponse);
        }}
      >
        Generate with AI
      </AiButton>
    </Flex>
  </AiCard>
</>

Usage

View full code

Some component names and stateful logic is not shown in the examples generated below. To view more complete code examples:

Click the link to View Storybook
Click the settings “gear” in the left panel on top
Select “show addons” (if addons don’t appear, click “change addons orientation”)
In the addons panel, click on the “code” tab