---
group:
  title: Input
  order: 2
title: ChatInput
description: AI Input Box
---

<DemoTitle title="ChatInput" desc="AI Input Box" llmTxtName="Sender"></DemoTitle>

<code src="./demo/basic.tsx" center height="350">Example</code>

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


#### ChatInput Examples

The following are examples and variations of this component

<code src="./demo/loading.tsx" center height="350">Pause During Generation</code>
<code src="./demo/withImage.tsx" center height="350">Upload Image</code>
<code src="./demo/withFile.tsx" center height="350">Upload File</code>
<code src="./demo/moreMode.tsx" center height="350">Custom Mode</code>
<code src="./demo/suggestions.tsx" center height="350">Suggestions</code>
<code src="./demo/beforeUI.tsx" center height="350">Before UI</code>
<code src="./demo/morePrefixAction.tsx" center height="350">Custom Functionality</code>
<code src="./demo/asr.tsx" center height="350">Voice Input</code>

#### API

<ApiParser source="./index.tsx" id="SenderProps"></ApiParser>