diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/code-studio-marketplace.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/code-studio-marketplace.png new file mode 100644 index 000000000..bd5286120 Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/code-studio-marketplace.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-custom-server.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-custom-server.png new file mode 100644 index 000000000..4f7c71ab9 Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-custom-server.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-npm-package.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-npm-package.png new file mode 100644 index 000000000..2997f721d Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-npm-package.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-runtime-window.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-runtime-window.png new file mode 100644 index 000000000..9099a577e Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-runtime-window.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-server-installed.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-server-installed.png new file mode 100644 index 000000000..707d13f43 Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-server-installed.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-start-pdfviewer.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-start-pdfviewer.png new file mode 100644 index 000000000..ce6e8d5a2 Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-start-pdfviewer.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-syncfusion-api-key.png b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-syncfusion-api-key.png new file mode 100644 index 000000000..3e1928b7b Binary files /dev/null and b/Document-Processing/ai-coding-assistant/MCP-Server/images/pdfviewer/mcp-syncfusion-api-key.png differ diff --git a/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md b/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md index 39fa46515..3b58f7f77 100644 --- a/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md +++ b/Document-Processing/ai-coding-assistant/MCP-Server/pdfviewersdk.md @@ -86,10 +86,19 @@ There are two options: ### 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**. + * In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace + ![Code Studio Marketplace](images/pdfviewer/code-studio-marketplace.png) + * Go to the ```Custom Servers``` tab and click **Add MCP Servers** + ![Custom Server Tab](images/pdfviewer/mcp-custom-server.png) + * In the dialog that appears, select **Accept and Continue** to launch the runtime window for configuring the PDF Viewer SDK MCP. + ![Run Time Window](images/pdfviewer/mcp-runtime-window.png) + * Choose the NPM package installation mode. Enter the command **@syncfusion/pdfviewersdk-assistant** in the runtime window and press **Enter** + ![NPM package](images/pdfviewer/mcp-npm-package.png) + * When prompted, click allow in the opened options and select **Direct API key**. Enter the API key generated from the [Syncfusion API key](https://www.syncfusion.com/account/api-key), then press **Enter**. + ![Syncfusion API key](images/pdfviewer/mcp-syncfusion-api-key.png) + * Provide server name such as ```syncfusion-pdfviewersdk-assistant```, then press **Enter**. The PDF Viewer SDK MCP server will get installed. * Once installed, the server will appear in the User Installed Server list and will be added to the **config.yaml** file. + ![PDF Viewer MCP server](images/pdfviewer/mcp-server-installed.png) * 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). @@ -119,7 +128,7 @@ 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 SyncfusionPDFViewerSDKAssistant server directly from the settings interface without additional commands. - +![Start PDF Viewer AI Assistant](images/pdfviewer/mcp-start-pdfviewer.png) * 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) @@ -216,7 +225,7 @@ Here are some effective ways to use [SyncfusionPDFViewerSDKAssistant](https://ww * "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." + * "Provide code to restrict zoom levels between 150% and 300% in JavaScript PDF Viewer." ## Troubleshooting