# Customization

The KendoReact AIPrompt supports extensive customization of its interface, behavior, and accessibility features to match your application's requirements.

The component allows you to:

* [Customize the generate button and prompt input](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/customization#generate-button-and-prompt-input)
* [Enable speech-to-text functionality](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/customization#speech-to-text-functionality)
* [Create custom views and toolbar items](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/customization#custom-views)
* [Customize the output card presentation](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/customization#output-card-customization)

## Generate Button and Prompt Input

You can customize the generate button and prompt input by passing custom components to the [`generateButton`](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptviewprops#generateButton) and [`promptInput`](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptviewprops#promptInput) props. This approach allows you to modify styling, behavior, and functionality to match your application's design.

[Demo Source](https://demos.telerik.com/kendo-react-ui/conversational-ui/ai-prompt/customization/generate-button-and-input/source.txt)

## Speech-to-Text Functionality

You can enable voice input using the [`enableSpeechToText`](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptviewprops#enableSpeechToText) property. Set it to `true` for default settings, or provide a configuration object to customize language settings and recognition parameters.

[Demo Source](https://demos.telerik.com/kendo-react-ui/conversational-ui/ai-prompt/customization/speech-to-text/source.txt)

## Custom Views

You can create custom views using the `AIPromptViewRender` component. Custom views appear as toolbar tabs and require corresponding [`toolbarItems`](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptprops#toolbarItems) configuration to be displayed as clickable toolbar buttons.

[Demo Source](https://demos.telerik.com/kendo-react-ui/conversational-ui/ai-prompt/customization/custom-view/source.txt)

## Output Card Customization

You can customize how AI responses are displayed using the \[`outputCard`] property of the `AIPromptOutputView`. You can customize the header, body, and actions sections to control presentation, add custom actions, and implement specialized formatting.

[Demo Source](https://demos.telerik.com/kendo-react-ui/conversational-ui/ai-prompt/customization/output-card/source.txt)

## Suggested Links

* [API Reference of the KendoReact AIPrompt](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aiprompt)
* [API Reference of the AIPromptProps](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptprops)
* [API Reference of the AIPromptViewProps](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/aipromptviewprops)
* [Streaming AI Responses](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/streaming)
* [Events Documentation](https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/events)