Skip to main content
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:
1

Open Agent Settings

Open the Add/Edit Agent dialog for your agent
2

Navigate to Options

Click the Options tab in the agent configuration
3

Find Components Section

Scroll to the Dynamic In-Chat Components section
4

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

1

Select Component

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

Modify Instructions

Edit the LLM Instructions text to match your needs
3

Save Changes

Click Save Changes to apply your customization
4

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:
  1. Test common scenarios — Run through typical user questions and tasks
  2. Check component usage — Verify the agent uses components appropriately
  3. Review edge cases — Test unusual requests to see how the agent handles them
  4. 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.