---
title: AI-Powered Editor
position: 999
seo_title: AI-Powered Editor UI Building Block | Progress Telerik
seo_description: Use AI-Powered Editor to seamlessly refine AI-generated content
  in a design tool-style environment. Streamline your editing process and
  enhance user engagement.
---
## Overview

The AI-Powered Editor is a core interface for refining or modifying system-generated content. Typically appearing after the prompt input stage, it pairs text or code editing functionalities with a design tool–style layout, allowing users to manipulate outputs easily and intuitively. By presenting a clear workspace and essential controls in one place, the AI-Powered Editor streamlines the process of shaping and finalizing AI-driven results.

A well-implemented AI-Powered Editor serves multiple purposes at once: it highlights generated content, provides intuitive editing features, and encourages users to explore the possibilities of AI-generated outputs. By allowing real-time edits and providing simple layout options, the AI-Powered Editor ensures that users can quickly adjust their AI-generated content to suit specific needs or preferences.

### Key Principles

* Full width—the AI-Powered Editor usually takes the full width of the page.
* Flexible Layout—providing an adaptable layout is crucial to accommodate various content formats and tools.

### AI-Powered Editor Variants

The Telerik and Kendo UI AI-Powered Editor offers design variants showcased in our demos, each tailored to enhance your application development by covering different usage scenarios.

#### AI-Powered Editor 1

<LiveDemoV2 data='{"demoName":"ai-powered-editor-1","previewImage":"images/ai-powered-editor-1.png","width":"100%","height":"600px","scale":0.7,"frameBorderRadius":""}'>![demo preview image](images/ai-powered-editor-1.png)</LiveDemoV2>

#### AI-Powered Editor 2

<LiveDemoV2 data='{"demoName":"ai-powered-editor-2","previewImage":"images/ai-powered-editor-2.png","width":"100%","height":"598px","scale":0.7,"frameBorderRadius":""}'>![demo preview image](images/ai-powered-editor-2.png)</LiveDemoV2>

### UI Components Documentation

For product-specific information, refer to the corresponding Telerik and Kendo UI documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Product Homepage","description":"Discover the Kendo UI for Angular components.","url":"https://www.telerik.com/kendo-angular-ui/components/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Product Homepage","description":"Discover the Telerik UI for Blazor components.","url":"https://docs.telerik.com/blazor-ui/introduction"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Product Homepage","description":"Discover the KendoReact UI components.","url":"https://www.telerik.com/kendo-react-ui/components/introduction/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

</Wrap>