diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index f141cb0b5..79eec4871 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -22,6 +22,9 @@
  • Spreadsheet Editor SDK
    • +
  • + PDF Viewer SDK +
  • diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md b/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md new file mode 100644 index 000000000..39fa46515 --- /dev/null +++ b/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md @@ -0,0 +1,241 @@ +--- +layout: post +title: SyncfusionPDFViewerSDKAssistant MCP Server Setup – Syncfusion +description: Explore the MCP server’s benefits, setup needs, and integration guidance for Syncfusion PDFViewerSDK. +platform: document-processing +control: AI coding assistant +documentation: ug +--- + +# SyncfusionPDFViewerSDKAssistant MCP Server + +## Overview + +The SyncfusionPDFViewerSDKAssistant is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent, context-aware coding assistance for Syncfusion **PDFViewerSDK** across all supported platforms are Windows Forms, WPF, JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, Blazor, MAUI and Flutter. +It integrates seamlessly with [MCP clients](https://modelcontextprotocol.io/clients) to provide intelligent assistance for building applications with Syncfusion® components. + +### Key Benefits + +- Instant code generation & explanations for Syncfusion® PDFViewerSDK component. +- Detailed component documentation and usage examples. +- Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using SyncfusionPDFViewerSDKAssistant, ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the ```SyncfusionPDFViewerSDKAssistant``` 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/pdfviewersdk-assistant``` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionPDFViewerSDKAssistant + +#### 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. + +There are two options: + +* **Using an API Key File (Recommended)** + + Store your API key in a separate file and reference its path in the `Syncfusion_API_Key_Path` environment parameter. This approach is more secure as you don't expose the key directly in configuration files. + + **Supported file formats:** `.txt` or `.key` file + +~~~json + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" // "D:\\syncfusion-key.txt" (or) "D:\\syncfusion-key.key" + } +~~~ +* **Direct API Key** + + Paste your `Syncfusion_API_Key` directly in the configuration file's environment parameter. + +~~~json + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } +~~~ + +[SyncfusionPDFViewerSDKAssistant](https://www.npmjs.com/package/@syncfusion/pdfviewersdk-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: + +### Syncfusion® Code Studio + + * In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the ```Custom Servers``` tab. + * Enter the Server Name as ```pdfviewersdk-mcp```, choose Server Type as npm package, and set the NPM Package name to ```@syncfusion/pdfviewersdk-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). + +For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers). + +### 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. + + ```json + { + "servers": { + "syncfusion-pdfviewersdk-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/pdfviewersdk-assistant@latest" + ], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH", + // or + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } + } + ``` + +* 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 SyncfusionPDFViewerSDKAssistant server directly from the settings interface without additional commands. + +* Confirm that [SyncfusionPDFViewerSDKAssistant](https://www.npmjs.com/package/@syncfusion/pdfviewersdk-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: + * ```SyncfusionPDFViewerSDKAssistant is running...``` (in VS Code) + +* For more details, refer to the official Visual Studio documentation. + +### Cursor + +To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-pdfviewersdk-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/pdfviewersdk-assistant@latest" + ], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH", + // or + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` +For more details, refer to the Cursor documentation. + +### 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-pdfviewersdk-assistant": { + "command": "npx", + "args": [ + "-y", + "@syncfusion/pdfviewersdk-assistant@latest" + ], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH", + // or + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +* Click OK and Apply. + +For further assistance, see the JetBrains documentation. + +> 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) + +## Usage + +To activate the SyncfusionPDFViewerSDKAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionPDFViewerSDKAssistant' + * '/syncfusion-pdfviewersdk-assistant' + * '/syncfusion-pdfviewersdk' + * '@syncfusion-pdfviewersdk' + * '@ask_syncfusion_pdfviewersdk' + + In VS Code, you can also use #SyncfusionPDFViewerSDKAssistant to explicitly invoke the MCP server. + +2. Grant the SyncfusionPDFViewerSDKAssistant MCP server a permission to run for this session, workspace, or always. +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +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 + +1. ```Be specific```: Mention both platform and component (e.g., "How do I apply conditional formatting to highlight duplicate values in a React Syncfusion Spreadsheet?"). +2. ```Provide context```: Include details about your use case for more targeted solutions. +3. ```Use descriptive queries```: Avoid vague questions that lack necessary context. +4. ```Start fresh for new topics```: Begin a new chat session when switching components or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionPDFViewerSDKAssistant](https://www.npmjs.com/package/@syncfusion/pdfviewersdk-assistant): + + * "Provide code for viewing PDF files using the PDF Viewer in a Blazor Web App." + * "Show me a code snippet to load a PDF from Google Drive into Syncfusion PDF Viewer using React" + * "How do I toggle the annotation toolbar using Angular PDF Viewer" + * "Explain how to open the thumbnail panel programmatically in Syncfusion PDF Viewer using Vue." + * "Provide code to restrict zoom levels between 150% and 300% in Javascript PDF Viewer." + +## Troubleshooting + +If you encounter issues: + + * 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. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Community forum](https://www.syncfusion.com/forums/pdf-viewer-sdk) +* [Request feature or report bug](https://www.syncfusion.com/feedback/pdf-viewer-sdk) +* Live chat + +## See also + + * [Syncfusion PDFViewerSDK Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/overview)