---
order: 3

group:
  title: Output
  order: 3
title: OperateCard
description: A card that displays AI actions in a conversation flow
---

<DemoTitle title="OperateCard" desc="A card that displays AI actions in a conversation flow" llmTxtName="OperateCard"></DemoTitle>

<code src="./demo/index.tsx" height="auto">Example</code>

<Install>import { OperateCard } from '@agentscope-ai/chat'</Install>

#### OperateCard Examples

<code src="./demo/rag.tsx" height="auto">RAG</code>
<code src="./demo/toolCall.tsx" height="auto">Tool Call</code>
<code src="./demo/webSearch.tsx" height="auto">Web Search</code>
<code src="./demo/todo.tsx" height="auto">Todo List</code>
<code src="./demo/thinking.tsx" height="auto">Thinking</code>

#### API

##### IOperateCardProps

<ApiParser source="./OperateCard.tsx" id="IOperateCardProps"></ApiParser>

##### IRagProps

<ApiParser source="./preset/Rag.tsx" id="IRagProps"></ApiParser>

##### IThinkingProps

<ApiParser source="./preset/Thinking.tsx" id="IThinkingProps"></ApiParser>

##### ITodoListProps

<ApiParser source="./preset/TodoList.tsx" id="ITodoListProps"></ApiParser>

##### IToolCallProps

<ApiParser source="./preset/ToolCall.tsx" id="IToolCallProps"></ApiParser>

##### IWebSearchProps

<ApiParser source="./preset/WebSearch.tsx" id="IWebSearchProps"></ApiParser>