Merge pull request #2406 from syncfusion-content/EJ2-1015637-agent-builder

1015637: Added docs for agentic UI builder for react PDF Viewer

Author: AnanthaGokulaRaman

Document-Processing-toc.html

@@ -993,6 +993,7 @@
                                     <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/remix">Remix</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/gatsby">Gatsby</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/agentic-builder">Agentic UI Builder</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/agentic-builder.md

@@ -0,0 +1,89 @@
+---
+layout: post
+title: Create a React PDF Viewer with Agentic UI Builder | Syncfusion
+description:  Learn how to use the React PDF Viewer component of Syncfusion Essential JS 2 with Agentic UI Builder.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Create a React PDF Viewer with Agentic UI Builder
+
+This article explains how to build a Syncfusion® React PDF Viewer by entering natural-language instructions into the [**Syncfusion® React Agentic UI Builder**](https://www.syncfusion.com/explore/mcp-servers/) (which runs on Syncfusion's MCP Server). Describe your requirements, and the tool will generate a complete PDF Viewer implementation.
+
+## Prerequisites
+
+- Ensure the **React Agentic UI Builder** extension is installed in your IDE. See the official [installation guide](https://ej2.syncfusion.com/react/documentation/mcp-server/installation).
+- Have an existing React project ready (JavaScript or TypeScript, any supported version) before using the Agentic UI Builder.
+
+## Usage
+
+After installation, open your React project in your IDE, launch the AI assistant, and run the ```#sf_react_ui_builder``` command describing the UI you want. For example:
+
+**Example:**
+
+```
+#sf_react_ui_builder Create standalone React PDF Viewer using the Bootstrap 5 theme with the default modules. Install the required packages, import the theme CSS in the correct order, and initialize the PDF Viewer.
+```
+
+The UI Builder generates complete implementations including layout, components, and styling. A preview of the generated output appears below:
+
+![PDF Viewer generated by UI builder tool](../images/agentic-builder-output.png)
+
+## Individual Tools
+
+You can directly call individual tools using their specific tool names when you need focused assistance. This is helpful when you want targeted support from a particular tool.
+
+### Layout Tool (`#sf_react_layout`)
+
+This tool provides a collection of pre-built, responsive UI layout templates and blocks commonly used across different page sections and design patterns.
+
+**When to use:** For creating page structures, responsive layouts, or using ready-made UI patterns.
+
+**Example:**
+
+```
+#sf_react_layout Add a navigation bar and footer for PFD Viewer
+```
+
+![PDF Viewer with navigation bar generated by layout tool](../images/agentic-builder-layout.png)
+
+### Component Tool (`#sf_react_component`)
+
+This tool offers quick reference details for Syncfusion React components, including their properties, events, methods, and basic usage examples.
+
+**When to use:** When you need essential API information or structure details to correctly implement a specific component.
+
+**Example:**
+
+```
+#sf_react_component Integrate a tab component in the existing PDF Viewer setup
+```
+
+![PDF Viewer in tabs generated by component tool](../images/agentic-builder-component.png)
+
+### Style Tool (`#sf_react_style`)
+
+This tool provides options for configuring themes, setting up styling, and integrating icons for Syncfusion React components. It supports multiple themes such as Tailwind 3 CSS, Bootstrap 5.3, Material 3, and Fluent 2, along with light and dark mode setups and consistent icon usage.
+
+**When to use:** When applying themes, customizing colors, modifying component appearance, or adding icons to the UI.
+
+**Example:**
+
+```
+#sf_react_style Change the theme to tailwind 3 for the PDF Viewer setup
+```
+
+![PDF Viewer tailwind 3 theme generated by style tool](../images/agentic-builder-style.png)
+
+### Tips & Best Practices
+
+- Turn on **Agent mode** in your IDE to enable smooth, multi-step operations with confirmation prompts.
+- Use higher-capability models (**Claude Sonnet 4.5 or newer, GPT-5**) as they typically produce more accurate, higher-quality code.
+- If a step times out or becomes unresponsive, cancel it and retry.
+- Review the generated code and commands before applying them in a production environment.
+
+### See Also
+
+- For examples of prompt patterns and customization options for layouts, components, and styles, refer to the [prompt Library](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/prompt-library).