> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content & Image AI

> Use AI to generate social media captions, email copy, blog outlines, and images directly inside the HoopAI Platform tools — no separate tools required.

export const CourseTracker = ({courseId, lessonId, videoId}) => {
  const [progress, setProgress] = useState({});
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    setProgress(loadProgress());
    document.body.setAttribute("data-academy", "true");
    return () => document.body.removeAttribute("data-academy");
  }, []);
  const course = COURSES[courseId];
  if (!course) return null;
  const lessons = course.lessons;
  const currentIndex = lessons.findIndex(l => l.id === lessonId);
  const completedCount = lessons.filter(l => !!progress[courseId + "/" + l.id]).length;
  const percent = lessons.length > 0 ? Math.round(completedCount / lessons.length * 100) : 0;
  const isCurrentDone = !!progress[courseId + "/" + lessonId];
  const prev = currentIndex > 0 ? lessons[currentIndex - 1] : null;
  const next = currentIndex < lessons.length - 1 ? lessons[currentIndex + 1] : null;
  const totalDuration = formatTotalDuration(lessons);
  const handleToggle = () => {
    const key = courseId + "/" + lessonId;
    const updated = {
      ...progress
    };
    if (updated[key]) {
      delete updated[key];
    } else {
      updated[key] = Date.now();
    }
    setProgress(updated);
    persistProgress(updated);
  };
  const lessonPath = lesson => "/academy/" + course.dir + "/" + lesson.id;
  const videoEmbed = videoId ? <div style={{
    position: "relative",
    width: "100%",
    paddingBottom: "56.25%",
    borderRadius: "var(--ds-radius-lg)",
    overflow: "hidden",
    marginBottom: "24px",
    background: "#000"
  }}>
      <iframe src={"https://www.youtube-nocookie.com/embed/" + videoId + "?rel=0"} title="Lesson video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "none"
  }} />
    </div> : null;
  const lessonList = lessons.map(lesson => {
    const isActive = lesson.id === lessonId;
    const isDone = !!progress[courseId + "/" + lesson.id];
    const itemStyle = {
      display: "flex",
      alignItems: "center",
      gap: "8px",
      padding: "10px 16px",
      borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
      background: isActive ? "var(--academy-active-bg, #f9fafb)" : "transparent",
      textDecoration: "none",
      cursor: isActive ? "default" : "pointer",
      color: "inherit",
      transition: "background 0.15s"
    };
    const titleStyle = {
      flex: 1,
      fontSize: "13px",
      fontWeight: isActive ? 600 : 400,
      color: isActive ? "var(--academy-text, #111827)" : "var(--academy-text-secondary, #6b7280)",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      lineHeight: "1.4"
    };
    const durationStyle = {
      fontSize: "12px",
      color: "var(--academy-text-muted, #9ca3af)",
      whiteSpace: "nowrap"
    };
    const inner = <>
        {isDone ? <CheckCircle /> : <VideoIcon />}
        <span style={titleStyle}>{lesson.title}</span>
        <span style={durationStyle}>{lesson.duration}</span>
      </>;
    if (isActive) {
      return <div key={lesson.id} style={itemStyle}>
          {inner}
        </div>;
    }
    return <a key={lesson.id} href={lessonPath(lesson)} style={itemStyle}>
        {inner}
      </a>;
  });
  return <div className="not-prose" id="academy-course-tracker">
      {videoEmbed}
      <div className="academy-tracker" style={{
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    borderRadius: "var(--ds-radius-lg)",
    border: "1px solid var(--academy-border, #e5e7eb)",
    background: "var(--academy-bg, #ffffff)",
    overflow: "hidden",
    marginBottom: "24px"
  }}>
        {}
        <div style={{
    padding: "16px 16px 0"
  }}>
          <h3 style={{
    margin: 0,
    fontSize: "16px",
    fontWeight: 600,
    lineHeight: "1.4",
    color: "var(--academy-text, #111827)"
  }}>
            {course.title}
          </h3>
          <div style={{
    display: "flex",
    gap: "12px",
    marginTop: "8px"
  }}>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <BookIcon /> {lessons.length} lessons
            </span>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <ClockIcon /> Approx. {totalDuration}
            </span>
          </div>
        </div>

        {}
        <div style={{
    padding: "14px 16px 16px"
  }}>
          <div style={{
    display: "flex",
    justifyContent: "space-between",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)"
  }}>
            <span>Your progress</span>
            <span style={{
    fontWeight: 500,
    color: "var(--academy-text, #111827)"
  }}>
              {percent}%
            </span>
          </div>
          <div style={{
    height: "6px",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-track, #f3f4f6)",
    marginTop: "8px",
    overflow: "hidden"
  }}>
            <div style={{
    height: "100%",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-progress, #3b82f6)",
    transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    width: percent + "%"
  }} />
          </div>
        </div>

        {}
        <div className="academy-lessons-desktop">{lessonList}</div>

        {}
        <div className="academy-lessons-mobile">
          <button onClick={() => setExpanded(!expanded)} aria-expanded={expanded} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "12px 16px",
    cursor: "pointer",
    borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
    background: "transparent",
    border: "none",
    borderTopStyle: "solid",
    borderTopWidth: "1px",
    borderTopColor: "var(--academy-border-subtle, #f3f4f6)",
    width: "100%",
    textAlign: "left",
    color: "var(--academy-text-secondary, #6b7280)",
    fontSize: "13px",
    fontWeight: 500,
    fontFamily: "inherit"
  }}>
            <span>
              {expanded ? "Hide lessons" : "Show all " + lessons.length + " lessons"}
            </span>
            <ChevronDown open={expanded} />
          </button>
          {expanded && lessonList}
        </div>

        {}
        <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    borderTop: "1px solid var(--academy-border, #e5e7eb)",
    padding: "10px 16px"
  }}>
          {prev ? <a href={lessonPath(prev)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              ‹ Previous
            </a> : <div />}
          <button onClick={handleToggle} style={{
    fontSize: "13px",
    fontWeight: 500,
    cursor: "pointer",
    padding: "6px 14px",
    borderRadius: "var(--ds-radius-md)",
    border: isCurrentDone ? "1px solid var(--academy-border, #e5e7eb)" : "none",
    background: isCurrentDone ? "var(--academy-bg, #ffffff)" : "var(--academy-btn-bg, #111827)",
    color: isCurrentDone ? "var(--academy-complete, #10b981)" : "var(--academy-btn-text, #ffffff)",
    display: "flex",
    alignItems: "center",
    gap: "6px",
    transition: "all 0.2s",
    lineHeight: "1.4",
    fontFamily: "inherit"
  }}>
            {isCurrentDone ? <>
                <CheckCircle /> Completed
              </> : "Mark as completed"}
          </button>
          {next ? <a href={lessonPath(next)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              Next ›
            </a> : <div />}
        </div>
      </div>
    </div>;
};

<CourseTracker courseId="media-social-posting" lessonId="content-image-ai" />

Content AI is built directly into the platform tools you already use — the email editor, social planner, funnel page builder, and media library. Instead of switching between platforms or staring at a blank page, you can generate polished copy and custom images in seconds, right where you need them.

<Frame caption="The Content and Image AI lesson in the HoopAI Academy Media and Social Posting section">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-social-planner.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=4381831686ab5bc0082108f7f83c6dea" alt="Content and Image AI article" width="1536" height="826" data-path="images/academy-social-planner.png" />
</Frame>

## Why this matters

The biggest bottleneck in content marketing is not publishing — it is writing. Creating fresh captions, email subject lines, landing page headlines, and blog outlines every week is time-consuming and creatively exhausting. Content AI eliminates blank-page paralysis. You provide the topic and direction; the AI generates draft content you can edit and publish in minutes.

<Note>
  Content AI is usage-based and billed per word generated. Check your account settings for current usage and plan limits.
</Note>

***

## How to use Content AI for social posts and copy

<Steps>
  <Step title="Open Content AI from within a tool">
    Content AI is available wherever you create content. Look for the **Content AI** button in:

    * The **Social Planner** post composer
    * The **Email Editor** for campaigns and templates
    * The **Funnel and Website Page Builder**
    * The **Blog Editor**

    Click the button to open the AI generation panel.

    <Frame caption="The Content AI button available within the Social Planner post composer">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-social-planner.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=4381831686ab5bc0082108f7f83c6dea" alt="Content AI button in Social Planner" width="1536" height="826" data-path="images/academy-social-planner.png" />
    </Frame>
  </Step>

  <Step title="Enter a post title or topic">
    In the **Post Title** field, enter the name of the topic or category you are writing about — for example, "Content Marketing Tips" or "Summer Sale Announcement."
  </Step>

  <Step title="Add a brief description">
    In the **Description** field, describe what the post should cover — for example, "Short-form videos are changing social media marketing strategies and increasing engagement rates for small businesses."
  </Step>

  <Step title="Add keywords">
    Enter relevant keywords one at a time, pressing Enter after each. Keywords help the AI stay on topic and improve relevance to your audience.

    <Frame caption="Entering topic, description, and keywords in the Content AI generation panel">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-social-planner.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=4381831686ab5bc0082108f7f83c6dea" alt="Content AI configuration panel" width="1536" height="826" data-path="images/academy-social-planner.png" />
    </Frame>
  </Step>

  <Step title="Choose a writing tone">
    Select a tone that matches your brand voice — Professional, Conversational, Inspirational, Witty, or another available option. The tone shapes how the generated copy sounds.

    <Tip>
      If you are not sure which tone to use, try generating the same post with two different tones and compare. "Conversational" works well for social media, while "Professional" is better suited to B2B email copy.
    </Tip>
  </Step>

  <Step title="Select the number of variations">
    Choose between 1 and 5 variations. Multiple variations let you compare options or use different versions across platforms — useful for A/B testing subject lines and calls to action.
  </Step>

  <Step title="Generate and select content">
    Click **Generate**. The AI produces your requested variations in seconds. Review each option, then click the one you want to insert — it populates directly into your editor. Make any final edits before publishing or saving.
  </Step>
</Steps>

***

## How to generate an AI image

<Steps>
  <Step title="Open the media library">
    Go to **Settings** > **Media** > **Open Media Library**, or access it from within any tool with an image picker.
  </Step>

  <Step title="Click Content AI">
    In the media library toolbar, click the **Content AI** button.
  </Step>

  <Step title="Enter your image description">
    Describe the image you want to generate — be specific about subject, style, mood, and colors. For example: "A professional photo of a business owner reviewing analytics on a laptop in a modern office, natural lighting, warm tones."
  </Step>

  <Step title="Generate and save">
    Click **Generate**. The AI produces the image and saves it directly to your media library. You can use it immediately in any platform tool.
  </Step>
</Steps>

***

## Key points

<AccordionGroup>
  <Accordion title="Where is Content AI available?">
    Content AI is embedded in the Social Planner, Email Editor, Funnel Builder, Blog Editor, and Media Library. The generation panel appears contextually wherever you are writing — no need for a separate AI tool.
  </Accordion>

  <Accordion title="Content types Content AI can generate">
    Social media captions and post copy, email subject lines and body copy, blog post introductions and outlines, landing page headlines and body text, and AI-generated images stored in your media library.
  </Accordion>

  <Accordion title="Usage-based pricing">
    Content AI is charged per word generated, not per session. Light users pay very little, while high-volume users scale usage based on output. Generated images also count toward your Content AI usage. Review current pricing and usage in Account Settings.
  </Accordion>

  <Accordion title="A/B testing with multiple variations">
    Generating 2 to 5 variations for the same topic lets you test different angles, tones, and calls to action. Use different subject lines in email campaigns or different captions for the same social post to find what performs best.
  </Accordion>

  <Accordion title="Editing generated content">
    All generated content is fully editable. AI output is a starting point — refine the tone, adjust details, add brand-specific language, and personalize before publishing.
  </Accordion>
</AccordionGroup>

***

## Key benefits

<AccordionGroup>
  <Accordion title="10x faster content creation">
    Generate copy in seconds instead of starting from a blank page.
  </Accordion>

  <Accordion title="Built into your existing tools">
    No need to copy and paste from external AI platforms — generate directly inside the editor you are already using.
  </Accordion>

  <Accordion title="Consistent brand voice">
    Set your tone and generate on-brand copy every time.
  </Accordion>

  <Accordion title="Multiple variations">
    Create A/B test variants for emails and social posts without extra effort.
  </Accordion>

  <Accordion title="AI image generation">
    Produce custom images for your content without a graphic designer or stock photo subscription.
  </Accordion>

  <Accordion title="Tailored output">
    Keywords and descriptions steer the AI toward relevant, specific content for your audience.
  </Accordion>
</AccordionGroup>