Added the overview for DocumentSDK AI Tools

Document-Processing-toc.html

@@ -9,7 +9,7 @@
 	<li>
 		<a href="/document-processing/System-Requirements">System Requirements</a>
 	</li>
-	<li>AI Tools
+	<li><a href="/document-processing/Skills/overview">AI Tools</a>
 		<ul>
 			<li>Skills
 				<ul>

Document-Processing/Skills/overview.md

@@ -0,0 +1,58 @@
+---
+layout: post
+title: Overview | AI Tools | Syncfusion
+description: Syncfusion Document SDK AI Tools simplify document processing, editing, and integration, helping you to build smarter applications easily.
+platform: document-processing
+control: AI Tools
+documentation: ug
+---
+
+# AI-Powered Development with Syncfusion Document Processing Components
+
+AI assistants often struggle with specialized document processing libraries, causing issues like incorrect namespaces, missing dependencies, and outdated API usage. This disconnect arises from relying on generalized knowledge instead of library-specific context. Syncfusion AI Tools bridge this disconnect by grounding AI in real document APIs, enabling accurate creation, editing, conversion, and data extraction. With ready-to-use integrations, developers can build reliable, production-ready document workflows faster and with less complexity.
+
+## AI-Driven Solutions
+
+The following AI tools are available to help you process documents efficiently.
+
+- [Agent Skills](#agent-skills)
+- [AI Agent Tools](#ai-agent-tools)
+- [MCP Server](#mcp-server)
+- [Agentic UI Builder](#agentic-ui-builder)
+
+### Agent Skills
+
+Enhance your AI assistant (GitHub Copilot, Cursor, Claude, and more) with real Syncfusion API knowledge-eliminating hallucinated methods. Install once using npx skills add syncfusion/document-sdk-skills and generate accurate, production-ready document code directly within your IDE.
+
+[Learn more](https://help.syncfusion.com/document-processing/skills/document-sdk).
+
+### AI Agent Tools
+
+Enable AI agents to autonomously handle document tasks at runtime-such as creating reports, converting files, and extracting form data-without requiring you to write complex processing logic. Simply add the [Syncfusion.DocumentSDK.AI.AgentTools](https://www.nuget.org/packages/Syncfusion.DocumentSDK.AI.AgentTools) NuGet package and let your agent manage document workflows seamlessly.
+
+[Learn more](https://help.syncfusion.com/document-processing/ai-agent-tools/overview).
+
+### MCP Server
+
+Integrates with Visual Studio, VS Code, and JetBrains Rider to accelerate development. Ask how to implement any feature and instantly receive documentation-backed, copy‑paste‑ready C# code tailored to Syncfusion APIs.
+
+[Learn more](https://help.syncfusion.com/document-processing/mcp-server/ai-coding-assistant/overview).
+
+### Agentic UI Builder
+
+Transforms natural-language prompts into production-ready UIs using real Syncfusion<sup>&reg;</sup> components. Generates structured, responsive layouts with maintainable architecture. Integrates with AI-powered IDEs to produce accurate code following best practices, accessibility guidelines, and enterprise UI standards-helping developers move quickly from idea to fully functional interfaces within their workflow.
+
+Learn more about:
+- [PDF Viewer UI Builder](https://help.syncfusion.com/document-processing/skills/pdf-viewer-sdk/ui-builder-skills)
+- [DOCX Editor UI Builder](https://help.syncfusion.com/document-processing/skills/docx-editor-sdk/ui-builder-skills)
+- [Spreadsheet UI Builder](https://help.syncfusion.com/document-processing/skills/spreadsheet-editor-sdk/ui-builder-skills)
+
+## When to Use
+
+
+| AI Tool | When to Choose / Best Scenario |
+|--------|---------------------------------|
+| Agent Skills | When you want accurate, IDE‑level code generation using Syncfusion APIs with minimal setup. |
+| AI Agent Tools | When building applications where AI agents must automate document workflows at runtime. |
+| MCP Server | When you need instant, documentation-backed code guidance directly within your development environment. |
+| Agentic UI Builder | When you want to quickly generate production-ready UIs for document workflows from prompts. |

Document-Processing/mcp-server/ai-coding-assistant/getting-started/documentsdk.md

@@ -43,19 +43,7 @@ Syncfusion<sup>&reg;</sup> offers unlimited access to this MCP server. There are
 
 This ensures users can fully leverage Syncfusion<sup>&reg;</sup> components to enhance their development experience without limitations.
 
-## Installation and setup
-
-Before you can invoke the ```SyncfusionDocumentSDKAssistant``` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients:
-
-### Generic MCP Server Settings
-
-  *	**npm package name**: ```@syncfusion/documentsdk-assistant```
-  *	**Type**: stdio (standard input/output transport)
-  *	**Command**: npx
-  *	**Arguments**: -y
-  *	**Server name**: syncfusionDocumentSDKAssistant
-
-#### API Key Configuration		
+## API Key Configuration		
 
 Login to your [Syncfusion account](http://syncfusion.com/account/) and generate an API Key from the [API Key page](https://www.syncfusion.com/account/api-key). Replace `YOUR_API_KEY_FILE_PATH` or `YOUR_API_KEY` in the configuration files with your generated key.
 
@@ -84,21 +72,18 @@ There are two options:
 
 <a href="https://www.npmjs.com/package/@syncfusion/documentsdk-assistant">SyncfusionDocumentSDKAssistant</a> can be configured in various MCP clients. Below are setup instructions for popular environments:
 
-### Syncfusion<sup>&reg;</sup> Code Studio
+## Setting up in MCP Clients
 
-  *	In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the ```Custom Servers``` tab.
-  *	Enter the Server Name as ```documentsdk-mcp```, choose Server Type as npm package, and set the NPM Package name to ```@syncfusion/documentsdk-assistant```.
-  *	Add an environment variable as ```Syncfusion_API_Key``` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**.
-  *	Once installed, the server will appear in the User Installed Server list and will be added to the **config.yaml** file.
-  *	The server is now ready for use in Code Studio. For more details, refer to the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers).
+Create a configuration file in your project folder to install the server for your workspace as shown below:
 
-For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers).
+**Important:** Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file.
 
-### VS Code (GitHub Copilot MCP)
-  * To configure an MCP server for a specific workspace, you can create a ```.vscode/mcp.json``` file in your workspace folder.
+{% tabs %}
 
-~~~json
-  {
+{% highlight json tabtitle="VS Code" %}
+// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration:
+
+{
   "servers": {
    "syncfusion-documentsdk-assistant": {   
     "type": "stdio",
@@ -115,21 +100,34 @@ For additional details, see the Code Studio [documentation](https://help.syncfus
     }
    }
   }
-~~~ 
-
-  * After updating the configuration in mcp.json, you’ll notice a “Start” option at the top of the config. This allows you to easily start the <a href ="https://www.npmjs.com/package/@syncfusion/documentsdk-assistant">SyncfusionDocumentSDKAssistant</a> server directly from the settings interface without additional commands.
+{% endhighlight %}
 
-  * Confirm that <a href ="https://www.npmjs.com/package/@syncfusion/documentsdk-assistant">SyncfusionDocumentSDKAssistant</a> is being used (this does not happen automatically). Look for a statement in the output, which is similar to:
+{% highlight json tabtitle="Syncfusion Code Studio" %}
+// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration:
 
-      * ```SyncfusionDocumentSDKAssistant is running...``` (in VS Code)
-  * For more details, refer to the official <a href = "https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022"> Visual Studio documentation</a>.
-
-### Cursor
+{
+  "servers": {
+   "syncfusion-documentsdk-assistant": {   
+    "type": "stdio",
+    "command": "npx",
+    "args": [
+     "-y",
+     "@syncfusion/documentsdk-assistant@latest" 
+    ],
+    "env": {
+     "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH",
+      // or
+     "Syncfusion_API_Key": "YOUR_API_KEY"
+     }
+    }
+   }
+  }
+{% endhighlight %}
 
-To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder.
+{% highlight json tabtitle="Cursor" %}
+// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration:
 
-~~~json 
-  {
+{
    "mcpServers": {
     "syncfusion-documentsdk-assistant": {
      "type": "stdio",
@@ -146,17 +144,14 @@ To configure an MCP server for a specific workspace, you can create a .cursor/mc
     }
    }
   }
-~~~ 
-For more details, refer to the <a href = "https://docs.cursor.com/en/context/mcp#using-mcp-json">Cursor documentation</a>.
-
-### JetBrains IDEs
+{% endhighlight %}
 
-  * Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
-  * Click + Add to add a new MCP server configuration.
-  * In the New MCP Server dialog, switch the dropdown as ```As JSON``` and add the following config:
+{% highlight json tabtitle="JetBrains IDEs" %}
+// Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
+// Click + Add to add a new MCP server configuration.
+// In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
 
-~~~json
-  {
+{
    "mcpServers": {
     "syncfusion-documentsdk-assistant": {
      "command": "npx",
@@ -172,13 +167,11 @@ For more details, refer to the <a href = "https://docs.cursor.com/en/context/mcp
     }
    }
   }
-~~~
-
-  * Click OK and Apply.
+{% endhighlight %}
 
-For further assistance, see the <a href ="https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server">JetBrains documentation</a>.
+{% endtabs %}
 
-> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
+**Verify Installation:** Check your editor's MCP Server list for `syncfusion-documentsdk-assistant` with "Connected" status to confirm successful installation.
 
 ## Usage
 
@@ -198,7 +191,7 @@ To activate the SyncfusionDocumentSDKAssistant MCP server:
 
 ### Mode availability
 
-Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients.
+Syncfusion® MCP Servers provide full access to all AI interaction modes - Ask/Chat, Edit, and Agent - across supported MCP clients.
 
 ### Best Practices for Effective Usage
 
@@ -219,12 +212,16 @@ Here are some effective ways to use <a href ="https://www.npmjs.com/package/@syn
 
 ## Troubleshooting
 
-If you encounter issues:
+If you encounter issues during installation or while using the MCP server, refer to the solutions below:
 
-  *	Verify your API key is correctly configured.
-  *	Ensure the MCP server is enabled in your client’s tools selection.
-  *	Check that you’re using a compatible MCP client version.
-  *	Try restarting your development environment.
+| Issue | Solution |
+|-------|----------|
+| Clear npm cache | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues |
+| Server failed to start | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE |
+| Invalid API key | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) |
+| Incorrect API key config | For the file path: Verify file location and content. For inline key: Check key is properly updated |
+| Wrong config file location | VS Code: `.vscode/mcp.json` <br/> Code Studio: `.codestudio/mcp.json` <br/> Cursor: `.cursor/mcp.json` <br/> JetBrains: Settings → Tools → AI Assistant → MCP in the workspace root |
+| Check IDE logs | VS Code/Code Studio: Output panel → "MCP" • Cursor: Developer Console for MCP errors • JetBrains: IDE logs |
 
 ## Support