Dynamic In-Chat Components

Dynamic In-Chat Components give your agents the ability to render rich, interactive elements directly within chat responses. Instead of plain text, agents can display charts, code blocks, step-by-step guides, and more—creating engaging and useful experiences for your users.

SDK 3 Required: Dynamic In-Chat Components are available exclusively in SDK 3. If you’re using SDK 2, you’ll need to migrate to access this feature.

How It Works

When you enable a component, its prompt instructions are included in the agent’s system context. The agent then decides when to use each component based on the conversation and the guidance you’ve provided. Each component is controlled by prompt instructions that guide when and how the agent uses it. You can enable or disable components individually and customize the prompts to match your specific use cases.

Component behavior is prompt-based, which means it’s not 100% deterministic. The agent interprets the instructions and makes judgment calls about when a component is appropriate. You can refine this behavior by editing the prompt instructions.

Accessing Component Settings

Configure Dynamic In-Chat Components through the Agent Management Studio:

Open Agent Settings

Open the Add/Edit Agent dialog for your agent

Navigate to Options

Click the Options tab in the agent configuration

Find Components Section

Scroll to the Dynamic In-Chat Components section

Configure Components

Enable or disable components and edit their prompt instructions as needed

Available Components

Accordion

Collapsible sections that reduce visual complexity while keeping content accessible. When agents use it:

FAQ sections
Progressive disclosure of optional or advanced details
Long documentation that benefits from collapsible organization

Default prompt instructions:

Use for FAQ sections, progressive disclosure of optional/advanced details, or long 
documentation with collapsible sections. Ideal for reducing initial visual complexity 
while keeping content accessible. DO NOT use for primary navigation. DO NOT use for 
critical information that must be visible.

Bar Chart

Visual comparisons across categories, rankings, or discrete time periods. When agents use it:

User explicitly asks for a bar chart
Categorical comparisons and rankings
Frequency counts
Discrete time periods

Default prompt instructions:

Use; when the user asks for a bar chart, for categorical comparisons, rankings, 
frequency counts, or discrete time periods. Use stacked bars to show composition 
within each category. DO NOT USE for continuous time series or >15 discrete periods 
(use linechart). DO NOT USE for part-to-whole relationships summing to 100% (use 
piechart) — percentages across independent categories are fine.

Best for: Budget comparisons, sales by category, survey responses, team performance metrics

Callout

Highlighted boxes that draw attention to important information. When agents use it:

Critical warnings
Important tips
Success or error notifications that require user attention
Security warnings
Breaking changes
Critical prerequisites

Default prompt instructions:

Use for critical warnings, important tips, success/error notifications that require 
user attention. Ideal for security warnings, breaking changes, critical prerequisites. 
DO NOT use for general information or supplementary details (use regular text or cards). 
**Maximum 2-3 callouts per response to maintain visual impact.**

Callouts lose their impact if overused. Limit to 2-3 per response for maximum effectiveness.

Card

Contained blocks for grouping related content or presenting options. When agents use it:

Highlighting key information
Grouping related content
Visual separation
Presenting options
Comparisons, lists, summaries, and key takeaways

Default prompt instructions:

Use for highlighting key information, grouping related content, visual separation, or 
presenting options. Ideal for comparisons, lists, summaries, key takeaways. DO NOT use 
for sequential steps (use mindset-steps). DO NOT use for tabbed content (use mindset-tabs). 
**CRITICAL: NEVER nest cards inside cards or featurecards inside cards - use multiple 
cards at same level instead.**

Never nest cards inside other cards or feature cards. Use multiple cards at the same level instead.

Code Block

Syntax-highlighted code snippets with copy functionality. When agents use it:

Displaying code snippets in any programming language
Technical documentation
API examples
Configuration files

Features:

Syntax highlighting via react-syntax-highlighter
Copy-to-clipboard button
Optional line numbers (enabled by default)
Optional filename display in header
Optional language badge in header
Automatic theme adaptation (light/dark)
Monospace font (Sometype Mono, JetBrains Mono)

Default prompt instructions:

Use for displaying code snippets with syntax highlighting in agent responses. 
Automatically adapts to theme (light/dark). Features include: syntax highlighting via 
react-syntax-highlighter, copy-to-clipboard button, optional line numbers (default: on), 
optional filename display in header, optional language badge in header, monospace font 
(Sometype Mono, JetBrains Mono). Attributes: language (optional, e.g. 'python', 
'javascript', 'typescript', 'bash', 'sql', etc.), filename (optional, triggers header display).

Diagram

Visual representations of processes, workflows, and system architecture. When agents use it:

Process flows and workflows
System architecture
API interactions
Class structures
State machines
Timelines
Data relationships

Default prompt instructions:

Use for visualizing processes, workflows, system architecture, API interactions, class 
structures, state machines, timelines, or data relationships. Ideal for technical 
documentation, architectural explanations, process flows. DO NOT use for simple lists 
(use markdown). DO NOT use for data charts (use piechart/barchart/linechart).

Best for: Technical documentation, architectural explanations, onboarding flows

Feature Card

Specialized cards for showcasing product features and capabilities. When agents use it:

Showcasing product features
Highlighting capabilities
Presenting benefits or advantages
Feature grids
Product highlights
Service offerings
Capability listings

Default prompt instructions:

Use for showcasing product features, highlighting capabilities, or presenting benefits/
advantages. Ideal for feature grids, product highlights, service offerings, capability 
listings. DO NOT use for general content (use cards). DO NOT use for comparisons (use 
cards or tables). **CRITICAL: NEVER nest featurecards inside featurecards or cards 
inside featurecards - use multiple featurecards at same level.**

Never nest feature cards inside other feature cards or regular cards. Use multiple feature cards at the same level instead.

Line Chart

Trend visualization for continuous data over time. When agents use it:

User explicitly asks for a line chart
Trends over time
Continuous data changes
Comparing time-based metrics

Default prompt instructions:

Use; when the user asks for a line chart, for trends over time, continuous data changes, 
or comparing time-based metrics. Ideal for time series, stock prices, user growth, 
performance tracking over time. DO NOT USE for categorical comparisons (use barchart). 
DO NOT use for proportions (use piechart). DO NOT use for discrete periods with gaps 
(use barchart).

Best for: Time series data, stock prices, user growth, performance tracking, continuous metrics

Pie Chart

Part-to-whole visualizations for proportions and distributions. When agents use it:

User explicitly requests a pie chart
Proportions and distributions
Percentages
Part-to-whole relationships

Default prompt instructions:

Use; when the user requests a pie chart, for proportions, distributions, percentages, 
or part-to-whole relationships. Ideal for market share, budget allocation, survey results, 
category breakdowns. DO NOT USE for time series trends (use linechart). DO NOT use for 
comparing categories (use barchart). DO NOT use for more than 7-8 segments (becomes unreadable).

Keep pie charts to 7-8 segments maximum. Beyond that, they become difficult to read—use a bar chart instead.

Best for: Market share, budget allocation, survey results, category breakdowns

Steps

Numbered sequential instructions for multi-step processes. When agents use it:

Sequential instructions
Tutorials and how-to guides
Installation guides
Recipes
Ordered procedures
Onboarding flows
Setup wizards
Multi-step processes

Default prompt instructions:

Use for sequential instructions, tutorials, installation guides, recipes, or ordered 
procedures. Ideal for onboarding flows, setup wizards, multi-step processes. DO NOT 
use for unordered lists (use markdown or cards). DO NOT use for single-step instructions.

Tabs

Tabbed interfaces for organizing alternative content views. When agents use it:

Code examples in multiple languages
Different views of the same data
Categorical content organization
API documentation
Multi-language tutorials
Alternative approaches

Default prompt instructions:

Use for code examples in multiple languages, different views of same data, or categorical 
content organization. Ideal for API documentation, multi-language tutorials, alternative 
approaches. DO NOT use for sequential content (use steps). DO NOT use for single option.

Best for: Multi-language code examples, platform-specific instructions, alternative solutions

Customizing Component Behavior

You can edit the prompt instructions for any component to control when and how the agent uses it. This lets you:

Restrict usage — Add conditions for when the component should or shouldn’t appear
Expand usage — Encourage the agent to use the component in additional scenarios
Match your use case — Tailor instructions to your specific product and audience

Edit Component Instructions

Select Component

Click on the component in the Dynamic In-Chat Components section

Modify Instructions

Edit the LLM Instructions text to match your needs

Save Changes

Click Save Changes to apply your customization

Test Behavior

Run through typical user interactions to verify the agent uses the component as expected

To restore the original instructions, click Reset to Default.

Best Practices

Start with Defaults

The default prompt instructions represent sensible starting points. Test with these before customizing.

Be Specific

Vague instructions lead to inconsistent behavior. Tell the agent exactly when to use or avoid a component.

Test Thoroughly

After editing instructions, run through typical user interactions to see how the agent responds.

Enable Selectively

Only enable components that make sense for your use case. More components means more decisions for the agent to make.

Testing Your Configuration

After configuring components:

Test common scenarios — Run through typical user questions and tasks
Check component usage — Verify the agent uses components appropriately
Review edge cases — Test unusual requests to see how the agent handles them
Iterate on instructions — Refine prompt instructions based on observed behavior

Start by enabling 3-5 components that match your most common use cases. You can always enable more later.

Troubleshooting

Agent isn’t using a component

Possible causes:

Component is disabled in agent settings
Prompt instructions don’t match the conversation context
Instructions are too restrictive

Solution: Review and edit the component’s prompt instructions to better match your use cases.

Agent uses components too frequently

Possible causes:

Prompt instructions are too permissive
Too many components enabled

Solution: Add more specific conditions to the prompt instructions, or disable components you don’t need.

Component behavior is inconsistent

Possible causes:

Prompt instructions are vague or contradictory
Multiple components have overlapping use cases

Solution: Make instructions more specific and clearly define when each component should be used versus alternatives.

Overview

Integrate Agent Chat SDK 3

Agent Chat SDK 3: Client-side Integration APIs

Data channels

Integrate Agent Chat SDK 2

MCP Server Integration

Agent Builder SDK Integration

API Overview

API playground

Webhooks

How It Works

Accessing Component Settings

Available Components

Accordion

Bar Chart

Callout

Card

Code Block

Diagram

Feature Card

Line Chart

Pie Chart

Steps

Tabs

Customizing Component Behavior

Edit Component Instructions

Best Practices

Start with Defaults

Be Specific

Test Thoroughly

Enable Selectively

Testing Your Configuration

Troubleshooting

Agent isn’t using a component

Agent uses components too frequently

Component behavior is inconsistent

​How It Works

​Accessing Component Settings

​Available Components

​Accordion

​Bar Chart

​Callout

​Card

​Code Block

​Diagram

​Feature Card

​Line Chart

​Pie Chart

​Steps

​Tabs

​Customizing Component Behavior

​Edit Component Instructions

​Best Practices

Start with Defaults

Be Specific

Test Thoroughly

Enable Selectively

​Testing Your Configuration

​Troubleshooting

​Agent isn’t using a component

​Agent uses components too frequently

​Component behavior is inconsistent

How It Works

Accessing Component Settings

Available Components

Accordion

Bar Chart

Callout

Card

Code Block

Diagram

Feature Card

Line Chart

Pie Chart

Steps

Tabs

Customizing Component Behavior

Edit Component Instructions

Best Practices

Testing Your Configuration

Troubleshooting

Agent isn’t using a component

Agent uses components too frequently

Component behavior is inconsistent