1027570: Updated UG content for Built-In AI Assist for Spreadsheet

Document-Processing-toc.html

@@ -5624,6 +5624,13 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/getting-started">Getting Started</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/ui-builder-skill">Agentic UI Builder</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
+							<li>
+								<a href="/document-processing/excel/spreadsheet/react/ai-assist/ai-assist">AI Assist</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/ai-assist/server-configuration/using-web-api">Server-Configuration Using Web API</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/ai-assist/server-configuration/using-node-js">Server-Configuration Using Node js</a></li>
+								</ul>
+							</li>
 							<li>Environment Integrations
 								<ul>
 									<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/nextjs-getting-started">Using with NextJS</a></li>

Document-Processing/Excel/Spreadsheet/React/ai-assist/ai-assist.md

@@ -0,0 +1,326 @@
+---
+layout: post
+title: AI Assist in React Spreadsheet control | Syncfusion
+description: Learn about the AI Assist feature in the Syncfusion React Spreadsheet control and how to configure it.
+platform: document-processing
+control: AI Assist
+documentation: ug
+---
+
+# AI Assist in React Spreadsheet control
+
+**AI Assist** brings AI-powered capabilities directly into the spreadsheet. Instead of manually applying formatting, writing formulas, or organizing data, you can describe what you want in plain English — and the AI Assist performs the action for you.
+
+![Spreadsheet AI Assist panel](../images/spreadsheet_ai_assist.gif)
+
+---
+
+## Server Connection
+
+To configure the backend service, refer - [Web API Server](./server-configuration/using-web-api.md)/[Node.js Server](./server-configuration/using-web-api.md)
+
+---
+
+## Integration
+
+AI Assist integrates seamlessly into your React Spreadsheet application, enabling AI-powered capabilities with minimal configuration. This section covers the required setup.
+
+### Prerequisites
+
+Ensure the following before integrating AI Assist:
+
+* Backend Server: A running backend AI service (Node.js or Web API) with Azure OpenAI credentials configured on the server. For setup instructions, see [Web API Server](./server-configuration/using-web-api.md)/[Node.js Server](./server-configuration/using-web-api.md) for setup instructions.
+
+### Inject the AI Assist Module
+
+Inject the `AIAssist` module into the React Spreadsheet. This registers the AI Assist feature and makes it available in your application.
+
+```tsx
+import * as React from 'react';
+import { Spreadsheet, AIAssist } from '@syncfusion/ej2-react-spreadsheet';
+
+Spreadsheet.Inject(AIAssist);
+```
+
+### Enable AI Assist
+
+To enable `AIAssist` in the Spreadsheet component, set the [`enableAIAssist`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enableaiassist) property to `true`.
+
+```tsx
+import * as React from 'react';
+import { Spreadsheet, SpreadsheetComponent, AIAssist } from '@syncfusion/ej2-react-spreadsheet';
+
+Spreadsheet.Inject(AIAssist);
+
+function App() {
+    return (<SpreadsheetComponent enableAIAssist={true}></SpreadsheetComponent> );
+}
+```
+
+This enables the AI Assist into the spreadsheet.
+
+---
+
+### Configure AI Assist Settings
+
+Use the [`aiAssistSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#aiassistsettings) property to connect spreadsheet to the backend server and customize the AI Assist.
+
+```tsx
+import * as React from 'react';
+import { Spreadsheet, SpreadsheetComponent, AIAssist, AIAssistSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
+
+Spreadsheet.Inject(AIAssist);
+
+function App() {
+    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+    const aiAssistSettings: AIAssistSettingsModel = {
+        requestUrl: 'https://localhost:{port}/api/AIAssist/Chat',
+        placeholder: 'Ask the AI about this sheet...',
+        promptSuggestions: [ 'Your suggestions',... ]
+    };
+
+    return (
+        <SpreadsheetComponent ref={spreadsheetRef} enableAIAssist={true} aiAssistSettings={aiAssistSettings}></SpreadsheetComponent>
+    );
+}
+```
+
+Your Spreadsheet is now integrated with AI Assist and ready to use.
+
+---
+
+## How-To Guides
+
+### Open and Close the AI Panel
+
+* **Open**: Click the **AI Assist** button in the ribbon toolbar.
+* **Close**: Click the **✕** button inside the panel header, or click the **AI Assist** ribbon button again.
+* **Start new conversation.**: Click the **↺ (Refresh)** button in the panel header.
+* **Resize the panel**: Drag the left edge of the panel to make it wider or narrower.
+
+### Undo an AI Action
+
+All actions performed by AI Assist are recorded in the spreadsheet's undo/redo history. Press Ctrl+Z to revert any change made by the AI, just like a manual edit.
+
+---
+
+### How to Attach Extra Data Before a Request is Sent
+
+Use the [`promptRequest`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#promptrequest) event to add custom data — such as a user ID or session token — to the request before it reaches your server.
+
+```tsx
+import * as React from 'react';
+import { Spreadsheet, SpreadsheetComponent, AIAssist, AIAssistSettingsModel, PromptRequestEventArgs } from '@syncfusion/ej2-react-spreadsheet';
+
+Spreadsheet.Inject(AIAssist);
+
+function App() {
+    const aiAssistSettings = { requestUrl: 'https://localhost:{port}/api/AIAssist/Chat' };
+
+    function onPromptRequest(args: PromptRequestEventArgs): void {
+        if (args.requestData) {
+            (args.requestData as any).body.userId = 'your-user-id';
+        }
+    }
+
+    return (
+        <SpreadsheetComponent enableAIAssist={true} aiAssistSettings={aiAssistSettings}
+            promptRequest={onPromptRequest}>
+        </SpreadsheetComponent>
+    );
+}
+```
+
+You can also prevent the request entirely by setting `args.cancel = true`.
+
+---
+
+### How to Handle AI Responses
+
+Use the [`promptResponse`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#promptresponse) event to run custom logic after the AI completes its task — for example, logging results or showing a notification.
+
+```tsx
+import * as React from 'react';
+import { Spreadsheet, SpreadsheetComponent, AIAssist, AIAssistSettingsModel, PromptResponseEventArgs } from '@syncfusion/ej2-react-spreadsheet';
+
+Spreadsheet.Inject(AIAssist);
+
+function App() {
+    const aiAssistSettings = { requestUrl: 'https://localhost:{port}/api/AIAssist/Chat' };
+
+    function onPromptResponse(args: PromptResponseEventArgs): void {
+        console.log('AI Response received:', args.response);
+    }
+
+    return (
+        <SpreadsheetComponent enableAIAssist={true} aiAssistSettings={aiAssistSettings}
+            promptResponse={onPromptResponse}>
+        </SpreadsheetComponent>
+    );
+}
+```
+
+---
+
+### Troubleshoot server connection issues
+
+If the AI panel displays an error message:
+
+1. Verify the server is running
+    * Confirm your Node.js or Web API server is active
+    * Check the console for startup messages
+2. Check the requestUrl
+    * Ensure the URL matches your server's exact address and port
+    * For local development:
+        * Node.js: http://localhost:3000/api/AIAssist/Chat
+        * Web API (.NET): https://localhost:5001/api/AIAssist/Chat
+3. Verify CORS is enabled
+    * Your React app origin must be allowed in the server's CORS policy
+    * Default React dev server: http://localhost:5173 (Vite) or http://localhost:3000 (Create React App)
+4. Use browser DevTools
+    * Open the Network tab to inspect failed requests
+    * Check for 404, 500, or CORS errors
+    * Look at the response body for error details
+5. Check server logs
+    * Review the terminal/console where your server is running
+    * Look for connection or authentication errors
+
+---
+
+## API Refernces
+
+### AI Assist Settings
+
+| Property | Type | Description |
+|---|---|---|
+| `requestUrl` | `string` | The URL of your AI server endpoint. All prompts are sent here. |
+| `placeholder` | `string` | The hint text shown inside the prompt input box. |
+| `promptSuggestions` | `string[]` | A list of quick-start prompts shown to the user as clickable suggestions. |
+
+---
+
+### Events
+
+| Event | When it fires | Common use |
+|---|---|---|
+| [`promptRequest`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#promptrequest) | Before the prompt is sent to the server | Attach extra data or cancel the request |
+| [`promptResponse`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#promptresponse) | After the AI completes and responds | Log results or trigger custom UI updates |
+
+---
+
+### What Can You Ask the AI?
+
+Type your request in plain English — no formulas or technical knowledge needed.
+
+#### Data Analysis
+
+| What to say | What it does |
+|---|---|
+| *"Can you give me a summary of this sheet?"* | Reviews your data and highlights key trends and totals |
+| *"What are the top 5 rows by sales?"* | Picks out the highest-performing records from your data |
+| *"Generate a full report for this sheet"* | Creates a structured report with KPIs, top records, and chart suggestions |
+
+#### Data Operations
+
+| What to say | What it does |
+|---|---|
+| *"Change the value in A1 to 500"* | Updates cell A1 with the new value |
+| *"Fill in the dates for the rest of the column"* | Continues a date or number pattern using AutoFill |
+| *"Swap 'Shoes' with 'Footwear' everywhere in this sheet"* | Finds and replaces the text throughout the entire sheet |
+
+#### Formatting
+
+| What to say | What it does |
+|---|---|
+| *"Make the header row bold with a blue background"* | Applies bold text and blue fill to your header cells |
+| *"Show the prices in currency format"* | Formats the selected cells to display as currency |
+| *"Make the text italic and red in column C"* | Applies italic style and red font color to the column |
+| *"Make the text fit inside the cells in column D"* | Turns on text wrapping so long text does not overflow |
+
+#### Rules & Validation
+
+| What to say | What it does |
+|---|---|
+| *"Highlight any values above 1000 in green"* | Applies a conditional formatting rule to flag high values |
+| *"Mark duplicate values in column A with a red background"* | Colors cells that appear more than once |
+| *"Only allow values between 1 and 100 in column B"* | Adds a data validation rule to restrict input |
+| *"Add a dropdown list with Yes and No options to column C"* | Creates a dropdown for easy, consistent data entry |
+
+#### Structure Management
+
+| What to say | What it does |
+|---|---|
+| *"Add two blank rows above row 5"* | Inserts two new rows at that position |
+| *"Remove column C"* | Deletes the entire column from the sheet |
+| *"Combine cells A1 to C1 into one"* | Merges the range into a single cell |
+| *"Keep the first two rows visible when I scroll down"* | Freezes the top rows so they stay in place |
+
+#### Navigation
+
+| What to say | What it does |
+|---|---|
+| *"Sort the data by sales from highest to lowest"* | Reorders rows based on the sales column, descending |
+| *"Show me only the rows where the region is India"* | Applies a filter so only matching rows are visible |
+| *"Find all cells that say 'Pending' and change them to 'Done'"* | Runs a find and replace across the sheet |
+
+#### Clipboard Actions
+
+| What to say | What it does |
+|---|---|
+| *"Copy the data from A1 to B5 and put it at D1"* | Copies the range and pastes it at the new location |
+| *"Move the content from A1:B3 to E1"* | Cuts the range and pastes it to the destination |
+
+#### Visualization
+
+| What to say | What it does |
+|---|---|
+| *"Create a bar chart from my sales data"* | Inserts a bar chart based on the selected data range |
+| *"Add a line chart showing the monthly trend"* | Creates a line chart to visualize changes over time |
+| *"Insert a pie chart with a title called 'Revenue Split'"* | Creates a pie chart with a custom title |
+
+---
+
+## How AI Assist Works in spreadsheet
+
+Understanding how AI Assist processes your request helps you write better prompts and get more reliable results.
+
+### The Three-Step Process
+
+When you submit a prompt in the AI Assist panel, the following happens behind the scenes:
+
+**1. Intent Recognition**
+Your prompt is sent to the AI server, which reads it and determines what type of action you want — for example, formatting, editing, generating a report, or creating a chart. This step figures out the *what*.
+
+**2. Command Generation**
+Once the intent is known, the spreadsheet's current data and the identified action are sent back to the AI. The AI then generates a precise set of instructions — such as which cells to update, what styles to apply, or what chart data to use. This step figures out the *how*.
+
+**3. Execution**
+The generated instructions are applied directly to the spreadsheet. The result appears instantly in the grid, and a confirmation message is shown in the AI panel. Every change is also added to the undo history, so nothing is permanent.
+
+### Writing Effective Prompts
+
+AI responses are only as good as the prompt you provide. Vague requests like *"fix this"* give the AI very little context. More specific prompts like *"highlight all values in column B that are greater than 500 in red"* produce reliable, accurate results.
+
+### Scope
+
+AI Assist only operates on the **currently active sheet**. It cannot read from or apply changes across multiple sheets in a single prompt.
+
+---
+
+## Limitations
+
+Understanding the current limitations of AI Assist helps you plan your integration and set accurate expectations for end users.
+
+* **Backend server is required**: AI Assist relies on a running backend service to process prompts. You must configure a valid `requestUrl` that points to an active Node.js or ASP.NET Web API server. The feature will not work in offline environments or when the server is unreachable.
+
+* **Operates on the active sheet only**: AI actions are scoped to the sheet that is currently open and selected. If you need the same change applied to multiple sheets, you must submit a separate prompt for each sheet individually.
+
+* **Prompt clarity affects result quality**: The AI interprets your request as written, so the quality of the output depends on how clearly the prompt is phrased. Broad or ambiguous prompts such as *"fix this"* may not produce the intended result. For consistent and accurate outcomes, use specific instructions — for example, *"bold the header row and apply a blue background to cells A1 through E1"*.
+
+* **Single-file scope**: AI Assist works exclusively within the currently loaded spreadsheet. It cannot read data from or apply changes to other Excel or CSV files that are not open in the same session.
+
+---
+
+## See Also
+* [Charts](../charts-and-visualizations.md)
+* [Data Binding](../data-binding)