---
title: "Introducing the New React AI AssistView Component"
published_at: "2024-10-03T10:21:35+00:00"
modified_at: "2025-11-06T09:20:12+00:00"
url: "https://www.syncfusion.com/blogs/post/introducing-new-react-ai-assistview"
excerpt: "This blog explores the features of the new Syncfusion React AI AssistView component in the 2024 Volume 3 release and the steps to get started with it."
taxonomy_category:
  - "Development"
  - "React"
  - "Smart AI components"
  - "UI"
  - "Web"
  - "What's new"
taxonomy_post_tag:
  - "AI"
  - "development"
  - "productivity"
  - "React"
  - "Web"
  - "What's New"
---

# Introducing the New React AI AssistView Component

[Indrajith Srinivasan](https://www.syncfusion.com/blogs/author/indrajith-srinivasan)

![Introducing the New React AI AssistView Component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/596x334@2x-compressed.jpg)


**TL;DR:** Introducing the new React AI AssistView component! It enables users to send prompts, execute commands, and effortlessly view AI-generated responses in web apps. This blog walks you through the setup process, providing code examples to help you seamlessly integrate this component into your React apps.

We are thrilled to announce the release of the new [React AI AssistView](https://www.syncfusion.com/react-components/react-ai-assistview)
 component in our [2024 Volume 3 release](https://www.syncfusion.com/forums/194459/essential-studio-2024-volume-3-main-release-v27-1-48-is-available-for-download)
. The React AI AssistView is designed to seamlessly integrate with AI services, offering more functionality and a modern user interface for your web apps. This component enables users to easily send prompts, execute commands via a toolbar, and view AI-generated responses in an intuitive, user-friendly view.

In this blog, we will explore the key features of the React AI AssistView component, highlight its UI design, and provide code examples to help you quickly integrate it into your React apps.


## Use cases

The React AI AssistView component excels in a variety of apps, including:

- **Customer support chatbots:** Use AI AssistView to provide real-time, context-aware responses to user inquiries, helping customers resolve issues efficiently.
- **Content creation assistance:** Integrate AI services to assist with drafting emails, creating reports, generating code snippets based on user prompts, andstreamlining content creation tasks.
- **Data querying and insights:** Empower users to query their data and receive AI-generated insights, aiding in more informed and data-driven decision-making.

## Key features

The React AI AssistView component offers the following standout features:

- [Pre-defined toolbars](#Predefined)
- [Suggested prompts](#Suggested)
- [Header toolbar options](#Head)
- [Customized views](#Customized)
- [Flexible customization](#Flexible)

### Pre-defined toolbars

This component includes pre-defined toolbar items for both prompts and responses, such as **copy**, ** edit**, and ** like**/** dislike** options. These tools enable seamless interaction, allowing users to quickly perform common actions directly within the interface.

Refer to the following image.

![Pre-defined toolbar in React AI AssistView component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/Predefined-Toolbars-component.gif)

Pre-defined toolbar in React AI AssistView component

### Suggested prompts

This component supports both initial and on-demand prompt suggestions with a customizable header. This feature enhances user experience by providing relevant and timely prompts, which can be tailored to specific contexts or user needs. These personalized suggestions make interactions more intuitive and engaging.

Refer to the following image.

![Suggested prompts in React AI AssistView component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/Suggested-prompts-component.png)

Suggested prompts in React AI AssistView component


### Header toolbar options

This header toolbar offers flexibility by allowing the addition of various toolbar items to execute custom commands. This feature enables developers to customize the toolbar for specific functionalities, enhancing the component’s adaptability to diverse use cases.

Refer to the following image.

![Header toolbar in React AI AssistView component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/Header-Toolbar-component-1.png)

Header toolbar in React AI AssistView component

### Customized views

The React AI AssistView component offers extensive customization options, enabling developers to create customized views that go beyond the default setup. It can be tailored to suit a variety of use cases and user preferences, allowing for the creation of unique interfaces that align perfectly with your app’s specific requirements.

Refer to the following image.

![Customized views in React AI AssistView component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/Personalized-Views-component-1.gif)

Customized views in React AI AssistView component

### Flexible customization

This component offers extensive customization options, allowing you to modify the default appearance. You can easily adjust prompts, responses, suggestions, banners, and footers, providing a cohesive and personalized user experience.

Refer to the following image.

![Flexible customization options in React AI AssistView component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/Flexible-Customization-component.png)

Flexible customization options in React AI AssistView component

## Getting started with React AI AssistView component

Let’s create a React app and configure the Syncfusion React AI AssistView component.

### Step 1: Create a new React app

First, ensure you have all the [prerequisites](https://ej2.syncfusion.com/react/documentation/system-requirement)
 to run a React app. Then, create a React app using the following command.

```
npx create-react-app my-app

cd my-app
```

### Step 2: Add Syncfusion packages

Syncfusion React packages are available in the [NPM](https://www.npmjs.com/~syncfusionorg)
 registry. To install the packages required for the **React AI AssistView** component, use the following command.

```
npm install @syncfusion/ej2-react-interactive-chat --save 
```


### Step 3: Add CSS reference

Now, import the required CSS styles for the AI AssistView component and dependency styles in the **src/App.css** file. Refer to the following code.

```
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css"; 
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/bootstrap5.css";
```

### Step 4: Add React AI AssistView component to the app

We have completed all the necessary configurations for rendering the Syncfusion React components. Now, let’s add the AI AssistView component by following these steps:

1. Import the **AIAssistViewComponent** from the ** ej2-react-interactive-chat** package in the ** App.js** file.
2. Then, add the **promptSuggestions** and **bannerTemplate** properties to the AIAssistView component.
3. Use the **promptRequest** event to display the prompts and responses as shown in the following code example.** App.js** ``` import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; import * as React from "react"; import * as ReactDOM from "react-dom"; import "./App.css"; function App() { const assistInstance = React.useRef(null); const bannerViewTemplate = () => { return ( <div className="banner-content"> <div className="e-icons e-assistview-icon"></div> <h2 style={{margin: 0}}>AI Assistance</h2> <div className="ai-assist-banner-subtitle">Your everyday AI companion</div> </div> ); } const promptSuggestions = [ "How do I prioritize my tasks?", "How can I improve my time management skills?" ]; const prompts = [ { prompt: "How do I prioritize my tasks?", response: "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" }, { prompt: "How can I improve my time management skills?", response: "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency." } ]; const onPromptRequest = (args) => { setTimeout(() => { let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt); let defaultResponse = 'For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'; assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse); }, 1000); }; return ( <div id='assistView' style={{ height: "350px", Width: "650px" }}> <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions} bannerTemplate={bannerViewTemplate}></AIAssistViewComponent> </div> ); } const root = ReactDOM.createRoot(document.getElementById("element")); root.render(<App />); ```
4. Add the following CSS styles in the **App.css** file to customize the appearance of the banner template.** App.css** ``` #assistview .banner-content .e-assistview-icon:before { font-size: 30px; } #assistview .banner-content { display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; padding: 10px 10px; width: 65%; margin: 0 auto; height: 270px; } ```

### Step 5: Run the app

Finally, run the app in the browser using the following command.

```
npm start 
```

Once the web server is loaded, you can find the following output by opening the React app in the browser at port **localhost:3000**.

![Integrating AI AssistView component in a React app](https://www.syncfusion.com/blogs/wp-content/uploads/2024/09/React-AI-AssistView-component.png)

Integrating AI AssistView component in a React app

## References

For more details, refer to the [React AI AssistView component demos](https://ej2.syncfusion.com/react/demos/#/material3/ai-assistview/default)
 and [documentation](https://ej2.syncfusion.com/react/documentation/ai-assistview/getting-started)
.

## Supported platforms

The AI AssistView component is also available in the following platforms.

| Platform | Live demo | Documentation |
| --- | --- | --- |
| JavaScript | JavaScript AI AssistView demos | Getting started with JavaScript AI AssistView |
| Angular | Angular AI AssistView demos | Getting started with Angular AI AssistView |
| Vue | Vue AI AssistView demos | Getting started with Vue AI AssistView |
| ASP.NET Core | ASP.NET Core AI AssistView demos | Getting started with ASP.NET Core AI AssistView |
| ASP.NET MVC | ASP.NET MVC AI AssistView demos | Getting started with ASP.NET MVC AI AssistView |
| Blazor | Blazor AI AssistView demos | Getting started with Blazor AI AssistView |


## Conclusion

Thanks for reading! We hope you enjoyed learning about the new Syncfusion [React AI AssistView](https://www.syncfusion.com/react-components/react-ai-assistview)
 component and its exciting features! This component is now part of our [2024 Volume 3 release](https://www.syncfusion.com/forums/194459/essential-studio-2024-volume-3-main-release-v27-1-48-is-available-for-download)
.

To explore all the new updates in this release, don’t forget to visit our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v27.1.48)
 and [What’s New](https://www.syncfusion.com/products/whatsnew)
 pages. We’d love to hear your thoughts, so please share your feedback in the comments section below!

For any questions or support, feel free to contact us through our [support forum](https://www.syncfusion.com/forums)
, [feedback portal](https://www.syncfusion.com/feedback)
, or [support portal](https://support.syncfusion.com/)
. We are always happy to assist you!

## Related blogs

- [React Styling: Essential Tips and Tricks for Designers](https://www.syncfusion.com/blogs/post/react-styling-tips-tricks)
- [Boost React MultiSelect Dropdown Performance with Virtualization](https://www.syncfusion.com/blogs/post/virtualization-in-react-multiselect-dropdown)
- [How to Add React Dropdown List in a Next.js App?](https://www.syncfusion.com/blogs/post/add-react-dropdown-list-in-next-js)
- [What’s New in Next.js 15 RC?](https://www.syncfusion.com/blogs/post/whats-new-in-next-js-15-rc)
