Special Chat Types

Aisle supports special rendering types that allow AI models to display rich, interactive content beyond plain text. These special types are enabled by default on most model chats and can be requested in conversations or used directly in prompts and workflows.

Overview

Special chat types are special entities that you can instruct the LLM to render. They enable:

• Visual diagrams - Flowcharts, sequence diagrams, and more with Mermaid
• Interactive charts - Line, bar, area, and pie charts for data visualization
• Formatted prompts - Structured prompt blocks with action buttons and diff views

These rendering types are available in:

• Model chats - Enabled by default, just ask the AI to use them
• Prompts - Include the syntax directly in your prompt templates
• Workflows - Use in workflow nodes for custom rendering needs

Mermaid Diagrams

Render flowcharts, sequence diagrams, Gantt charts, and other diagram types using Mermaid syntax.

Usage

Simply ask the AI to create a diagram, or include Mermaid code blocks in your prompts:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C{Decision}
    C -->|Yes| D[End]
    C -->|No| B
```

Supported Diagram Types

• Flowcharts - graph TD or graph LR for top-down or left-right layouts
• Sequence diagrams - sequenceDiagram for interaction flows
• Gantt charts - gantt for project timelines
• Class diagrams - classDiagram for object-oriented structures
• State diagrams - stateDiagram-v2 for state machines
• And more - Full Mermaid syntax is supported

Features

• Streaming support - Diagrams show a loading skeleton while being generated
• Interactive - Click and zoom on rendered diagrams
• Standard syntax - Uses official Mermaid syntax, no custom extensions needed

Graphs and Charts

Create interactive data visualizations with line, bar, area, and pie charts.

Chart Types

• Line charts - aisle-line-graph for trends over time
• Bar charts - aisle-bar-graph for comparisons
• Area charts - aisle-area-graph for cumulative data
• Pie charts - aisle-pie-graph for proportions

Syntax

```aisle-line-graph
{
  "data": [
    { "month": "Jan", "sales": 100, "revenue": 5000 },
    { "month": "Feb", "sales": 150, "revenue": 7500 },
    { "month": "Mar", "sales": 200, "revenue": 10000 }
  ],
  "xAxis": { "dataKey": "month", "label": "Month" },
  "yAxis": { "label": "Value" },
  "lines": [
    { "dataKey": "sales", "name": "Sales", "stroke": "#6366f1" },
    { "dataKey": "revenue", "name": "Revenue", "stroke": "#10b981" }
  ],
  "title": "Monthly Sales and Revenue"
}
```

JSON Specification

Required fields:

• data - Array of data objects (each object represents one data point)

Optional fields:

• xAxis - { dataKey: string, label?: string } - X-axis configuration
• yAxis - { label?: string } - Y-axis configuration
• lines / bars / areas - Array of series definitions:
  • dataKey - Key in data objects to plot
  • name - Display name for the series
  • stroke / fill - Hex color code
• colors - Array of hex color strings for default series colors
• title - Chart title

Example: Bar Chart

```aisle-bar-graph
{
  "data": [
    { "product": "Widget A", "q1": 120, "q2": 150 },
    { "product": "Widget B", "q1": 80, "q2": 95 }
  ],
  "xAxis": { "dataKey": "product" },
  "bars": [
    { "dataKey": "q1", "name": "Q1 Sales" },
    { "dataKey": "q2", "name": "Q2 Sales" }
  ],
  "title": "Quarterly Sales by Product"
}
```

Prompt Blocks

Render formatted prompt blocks with optional action buttons, diff views, and playground integration.

Basic Syntax

<aisle-prompt title="My Prompt">
This is the prompt content. It supports **markdown** formatting.
</aisle-prompt>

Attributes

• title (optional) - Display title (defaults to "Prompt")
• playground="true" (optional) - Shows "Playground" button to test the prompt
• prompt-id (optional) - Links to existing prompt, shows "View" and "Update Prompt" buttons

Example: With Playground

<aisle-prompt title="Customer Feedback Analyzer" playground="true">
Analyze the following customer feedback and extract:
1. Main concerns
2. Positive points
3. Suggested improvements

Feedback: {{feedback}}
</aisle-prompt>

Diff View

Show changes between two versions of a prompt:

<aisle-prompt title="Updated Prompt">
<original>
Old version of the prompt content here...
</original>
<updated>
New version of the prompt content here...
</updated>
</aisle-prompt>

The diff view highlights:

• Additions - New content in green
• Deletions - Removed content with red strikethrough

Features

• Collapsible - Expand/collapse prompt blocks
• Markdown rendering - Full markdown support inside prompt content
• Action buttons - "Create Prompt", "Update Prompt", "Playground" buttons
• Nested support - Can nest <aisle-prompt> tags
• Code blocks - Supports fenced code blocks inside content
• Assistant only - Only rendered in assistant messages, not user messages

Using in Conversations

Simply ask the AI to use these special types:

• "Create a flowchart showing the process"
• "Show me a line chart of the sales data"
• "Display this as a formatted prompt block"

The AI will automatically use the appropriate syntax when you request these visualizations.

Using in Prompts and Workflows

Include the syntax directly in your prompt templates or workflow nodes:

In a prompt:

After analyzing the data, display the results as a chart:

```aisle-bar-graph
{
  "data": {{data}},
  "xAxis": { "dataKey": "category" },
  "bars": [{ "dataKey": "value", "name": "Results" }]
}
```

In a workflow: Use the same syntax in any workflow node that outputs markdown. The special types will be rendered when the workflow runs.

Best Practices

• Ask naturally - Request visualizations in plain language; the AI will use the right syntax
• Use in prompts - Pre-format outputs by including special type syntax in your prompt templates
• Combine types - Mix different special types in the same response
• Test in playground - Use playground="true" on prompt blocks to test before deploying