1015637: Added content for sub tools of agentic UI builder

Author: BalajiLoganathanSF4826

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

@@ -12,12 +12,12 @@ domainurl: ##DomainURL##
 
 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
+## Prerequisites
 
-- Ensure the **React Agentic UI Builder** extension is installed in your IDE. See the official [Getting Started](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started) and [installation guide](https://ej2.syncfusion.com/react/documentation/mcp-server/installation).
+- 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
+## 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:
 
@@ -31,16 +31,58 @@ The UI Builder generates complete implementations including layout, components,
 
 ![PDF Viewer generated by UI builder tool](../images/agentic-builder-output.png)
 
-### Individual Tools
+## Individual Tools
 
-You can invoke specific tools by name for focused assistance; besides the main UI Builder, there are tools for layout, styling, and components. See the [individual tools documentation](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started#individual-tools) for details.
+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 **Claude Sonnet 4.5 or newer** models for best results; higher-capability models 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.
+- 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