AI Markdown Content

A component for rendering Markdown content with GitHub Flavored Markdown support and AI-optimized styling for consistent presentation across ActiveCampaign applications.

Overview

Resources

Figma

Install


yarn add @camp/ai-markdown-content

Variations

Default

The standard markdown content renderer with simple markdown support.


import { AiMarkdownContent } from '@camp/ai-markdown-content';
 
<AiMarkdownContent
  message={`# Markdown Demo
    This is a **bold text** and this is *italic text*.
    This is a [link to ActiveCampaign](https://www.activecampaign.com).`}
/>;

GitHub Flavored Markdown

GitHub Flavored Markdown is also supported.


import { AiMarkdownContent } from '@camp/ai-markdown-content';
 
<AiMarkdownContent
  message={`# GitHub Flavored Markdown Features
 
    ## Table Example
    | Feature | Description |
    |---------|-------------|
    | Tables | Create data tables |
    | Strikethrough | ~~Cross out text~~ |
    | Task Lists | Checkboxes for tasks |
    | Auto-links | https://www.activecampaign.com |`}
/>;

Compact

Compact styling with reduced margins and padding for dense layouts.


import { AiMarkdownContent } from '@camp/ai-markdown-content';
 
<AiMarkdownContent
  message={`# Markdown Demo
    This is a **bold text** and this is *italic text*.
    This is a [link to ActiveCampaign](https://www.activecampaign.com).`}
  compact={true}
/>;

Allow HTML

Allow text with HTML tags to be rendered. (Use with caution)

Images are also supported by this component (regardless of the use of allowHtml).


import { AiMarkdownContent } from '@camp/ai-markdown-content';
 
<AiMarkdownContent
  message={`# Markdown with HTML elements
    <div style="color: blue; border: 1px solid #ccc; padding: 10px; border-radius: 4px;">
      This is a custom <strong>HTML</strong> block. Note: HTML styling may be sanitized depending on configuration.
    </div>
 
    ## Image Example
    ![ActiveCampaign Logo](https://picsum.photos/id/58/200/300)`}
/>;

Usage

Best practices

Use GitHub Flavored Markdown syntax for tables, task lists, and strikethrough text
Keep HTML usage minimal when allowHtml is enabled for security reasons
Use the compact mode in dense UI contexts like cards or sidebars
Provide meaningful markdown content that follows accessibility guidelines

Content guidelines

✅ DO

Use semantic markdown headings (h1, h2, h3)
Keep line lengths reasonable for readability
Use lists for structured information
Include alt text for images

🚫 DON’T

Don’t enable HTML unless absolutely necessary
Don’t use overly complex nested structures
Don’t rely on inline styles within markdown
Don’t forget to sanitize user-generated content

Accessibility

Keyboard support

All interactive elements within rendered markdown are keyboard accessible
Links and buttons maintain proper tab order
Heading structure provides screen reader navigation landmarks

Replacing this component in ACF App

Before:


import { MarkdownContent } from '@/libs/agent/ui/src/lib/components/markdown-content/markdown-content';
 
<MarkdownContent message={content} compact={false} linkColor="#007bff" />;

After:


import { AiMarkdownContent } from '@camp/ai-markdown-content';
 
<AiMarkdownContent message={content} compact={false} />;

Breaking changes

Component name: MarkdownContent → AiMarkdownContent
Removed props: linkColor prop is no longer available (uses design system colors)
New props: allowHtml prop added for controlled HTML rendering