PromptInput

Multi-line input with send button for AI chat.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add prompt-input

Usage

prompt-input-example.tsxTSX

import { PromptInput, PromptInputTextarea, PromptInputFooter, PromptInputActions, PromptInputCharCount } from '@mcp-elements/react'
import { useState } from 'react'

export function Example() {
  const [value, setValue] = useState('')
  return (
    <PromptInput>
      <PromptInputTextarea
        placeholder="Ask anything…"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={2}
      />
      <PromptInputFooter>
        <PromptInputCharCount count={value.length} max={2000} />
        <PromptInputActions>
          <button disabled={!value.trim()}>Send</button>
        </PromptInputActions>
      </PromptInputFooter>
    </PromptInput>
  )
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Use PromptInputTextarea, PromptInputFooter, PromptInputActions as children
`placeholder (PromptInputTextarea)`	`string`	—	Placeholder text for the textarea
`value (PromptInputTextarea)`	`string`	—	Controlled value of the textarea
`onChange (PromptInputTextarea)`	`React.ChangeEventHandler<HTMLTextAreaElement>`	—	Change handler for the textarea
`count (PromptInputCharCount) *`	`number`	—	Current character count to display
`max (PromptInputCharCount)`	`number`	—	Maximum allowed characters; renders count/max when provided