Implementation:FlowiseAI Flowise AgentReasoningCard

Knowledge Sources	FlowiseAI Flowise
Domains	Chat Interface, Agent Reasoning
Last Updated	2026-02-12 07:00 GMT

Overview

AgentReasoningCard is a presentational React component that renders a single step in an agent's reasoning chain, displaying the agent name, icon, used tools, state, artifacts, messages (via Markdown), source documents, and next-agent transitions.

Description

This component accepts an agent object representing one reasoning step and renders it as a Material UI Card. If the agent has a nextAgent property, a special transition card is shown with an animated GIF. Otherwise, the full agent card is rendered with: the agent icon and name at the top, clickable Chip elements for each used tool (invoking onSourceDialogClick), a "State" chip if the agent has state data, inline artifacts via renderArtifacts, the agent's messages rendered through MemoizedReactMarkdown, optional instructions text, and clickable source document chips that open URLs or source dialogs. The component has a displayName of 'AgentReasoningCard'.

Usage

Use this component within the chat message view to display individual agent reasoning steps in a sequential reasoning chain. It is typically rendered inside a loop over an array of agent reasoning entries returned by the chatflow API.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/chatmessage/AgentReasoningCard.jsx
• Lines: 1-183

Signature

const AgentReasoningCard = ({
    agent,
    index,
    customization,
    chatflowid,
    isDialog,
    onSourceDialogClick,
    renderArtifacts,
    agentReasoningArtifacts,
    getAgentIcon,
    removeDuplicateURL,
    isValidURL,
    onURLClick,
    getLabel
}) => { ... }

export default AgentReasoningCard

Import

import AgentReasoningCard from '@/views/chatmessage/AgentReasoningCard'

I/O Contract

Inputs

Name	Type	Required	Description
agent	object	Yes	The agent reasoning step object containing nextAgent, agentName, nodeName, instructions, usedTools, state, artifacts, messages, and sourceDocuments
index	number	Yes	The index of this reasoning step in the chain, used as the card key
customization	object	Yes	UI customization settings including isDarkMode and borderRadius
chatflowid	string	No	The chatflow ID passed to the Markdown renderer
isDialog	boolean	No	Whether the card is rendered inside a dialog (controls Markdown width)
onSourceDialogClick	function	Yes	Callback for opening the source dialog when a tool or source document chip is clicked
renderArtifacts	function	Yes	Function to render artifact items
agentReasoningArtifacts	function	Yes	Function to parse agent artifacts into renderable items
getAgentIcon	function	Yes	Function that returns the agent icon URL given a node name and instructions
removeDuplicateURL	function	Yes	Function that deduplicates source documents by URL
isValidURL	function	Yes	Function that validates whether a source metadata string is a valid URL
onURLClick	function	Yes	Callback for opening a URL when a source document URL chip is clicked
getLabel	function	Yes	Function that returns the label for a source document chip

Outputs

Name	Type	Description
Rendered JSX	React Element	A Material UI Card displaying the agent reasoning step with tools, state, artifacts, messages, and source documents

Usage Examples

Basic Usage

import AgentReasoningCard from '@/views/chatmessage/AgentReasoningCard'

{agentReasoning.map((agent, index) => (
    <AgentReasoningCard
        key={index}
        agent={agent}
        index={index}
        customization={customization}
        chatflowid={chatflowid}
        isDialog={false}
        onSourceDialogClick={handleSourceDialogClick}
        renderArtifacts={renderArtifacts}
        agentReasoningArtifacts={agentReasoningArtifacts}
        getAgentIcon={getAgentIcon}
        removeDuplicateURL={removeDuplicateURL}
        isValidURL={isValidURL}
        onURLClick={onURLClick}
        getLabel={getLabel}
    />
))}

Related Pages

• Principle:FlowiseAI_Flowise_Execution_Monitoring