|
| 1 | +--- |
| 2 | +title: Syncfusion Angular PDF Viewer MCP Server Setup | Syncfusion |
| 3 | +description: Discover the MCP server's advantages, installation requirements, and integration guidance for Angular PDF Viewer. |
| 4 | +platform: document-processing |
| 5 | +control: PDF Viewer |
| 6 | +documentation: ug |
| 7 | +domainurl: ##DomainURL## |
| 8 | +--- |
| 9 | + |
| 10 | +# Syncfusion Angular PDF Viewer MCP Server |
| 11 | + |
| 12 | +Syncfusion<sup style="font-size:70%">®</sup> Angular PDF Viewer MCP Server accelerates Angular PDF Viewer application development by providing deep knowledge directly in your AI-powered IDE. [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) (MCP) integration enables quick access to documentation, API references, and code-generation features from within the development environment. |
| 13 | + |
| 14 | +These tools speed up development and reinforce best practices for Angular PDF Viewer integration. |
| 15 | +> The previously available **Agentic UI Builder** (`#sf_angular_ui_builder`) has been upgraded to an **Agent skill-based experience** and is no longer part of the MCP Server. To learn more about the new **Agentic UI Builder**, see the [documentation](./ui-builder-skill). The **AI Coding Assistant** (#sf_angular_assistant) has been **renamed** to **search_docs** (`#search_docs`) to ensure the tool name follows MCP naming conventions. |
| 16 | +
|
| 17 | +## Key Benefits |
| 18 | + |
| 19 | +- **Expert PDF Viewer Knowledge** - Deep understanding of the Angular PDF Viewer component and its implementation patterns. |
| 20 | +- **Unlimited Usage** - No request limits, time restrictions, or query caps. |
| 21 | +- **Privacy-Focused** - The tools operate based on the user's query and do not store any content, data, or prompts. |
| 22 | + |
| 23 | +## Installation |
| 24 | + |
| 25 | +### Prerequisites |
| 26 | + |
| 27 | +Before beginning, ensure the following prerequisites are met: |
| 28 | + |
| 29 | +- [Node.js 18+](https://nodejs.org/en/download) with **npm** or **yarn** |
| 30 | +- A **compatible MCP client** (VS Code, Syncfusion<sup style="font-size:70%">®</sup> Code Studio, Cursor, JetBrains, etc.) |
| 31 | +- An active [Syncfusion<sup style="font-size:70%">®</sup> API key](https://syncfusion.com/account/api-key) |
| 32 | +- An **Angular application** (existing or new); see [Angular PDF Viewer documentation](./getting-started) |
| 33 | +- An active Syncfusion<sup style="font-size:70%">®</sup> license (any of the following): |
| 34 | + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) |
| 35 | + - [Free Community License](https://www.syncfusion.com/products/communitylicense) |
| 36 | + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) |
| 37 | + |
| 38 | +### Getting Your API Key |
| 39 | + |
| 40 | +Generate the Syncfusion<sup style="font-size:70%">®</sup> API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: |
| 41 | + |
| 42 | +````json |
| 43 | +"env": { |
| 44 | + "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" |
| 45 | +} |
| 46 | +```` |
| 47 | + |
| 48 | +> Alternatively, the API key can also be set directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. Using a file path is recommended to keep the key out of source control. |
| 49 | +
|
| 50 | +### Setting Up in MCP Clients |
| 51 | + |
| 52 | +Create a configuration file in your project folder to install the server for your workspace. **Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file.** |
| 53 | + |
| 54 | +{% tabs %} |
| 55 | +{% highlight bash tabtitle="VS Code" %} |
| 56 | + |
| 57 | +// Create a `.vscode/mcp.json` file in your workspace: |
| 58 | + |
| 59 | +{ |
| 60 | + "servers": { |
| 61 | + "sf-angular-mcp": { |
| 62 | + "type": "stdio", |
| 63 | + "command": "npx", |
| 64 | + "args": ["-y", "@syncfusion/angular-mcp@latest"], |
| 65 | + "env": { |
| 66 | + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" |
| 67 | + // or |
| 68 | + // "Syncfusion_API_Key": "YOUR_API_KEY" |
| 69 | + } |
| 70 | + } |
| 71 | + } |
| 72 | +} |
| 73 | + |
| 74 | +{% endhighlight %} |
| 75 | +{% highlight bash tabtitle="Code Studio" %} |
| 76 | + |
| 77 | +// Create a `.codestudio/mcp.json` file in your workspace: |
| 78 | + |
| 79 | +{ |
| 80 | + "servers": { |
| 81 | + "sf-angular-mcp": { |
| 82 | + "type": "stdio", |
| 83 | + "command": "npx", |
| 84 | + "args": ["-y", "@syncfusion/angular-mcp@latest"], |
| 85 | + "env": { |
| 86 | + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" |
| 87 | + // or |
| 88 | + // "Syncfusion_API_Key": "YOUR_API_KEY" |
| 89 | + } |
| 90 | + } |
| 91 | + } |
| 92 | +} |
| 93 | + |
| 94 | +// After creating the file, click Start in the inline action to install the server. |
| 95 | + |
| 96 | +{% endhighlight %} |
| 97 | +{% highlight bash tabtitle="Cursor" %} |
| 98 | + |
| 99 | +// Create a `.cursor/mcp.json` file in your workspace: |
| 100 | + |
| 101 | +{ |
| 102 | + "mcpServers": { |
| 103 | + "sf-angular-mcp": { |
| 104 | + "command": "npx", |
| 105 | + "args": ["-y", "@syncfusion/angular-mcp@latest"], |
| 106 | + "env": { |
| 107 | + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" |
| 108 | + // or |
| 109 | + // "Syncfusion_API_Key": "YOUR_API_KEY" |
| 110 | + } |
| 111 | + } |
| 112 | + } |
| 113 | +} |
| 114 | + |
| 115 | +{% endhighlight %} |
| 116 | +{% highlight bash tabtitle="JetBrains" %} |
| 117 | + |
| 118 | +// Open AI Assistant chat, type /, and select Add Command. |
| 119 | +// Click ➕ Add on the MCP settings page. |
| 120 | +// Choose STDIO and select JSON configuration: |
| 121 | + |
| 122 | +{ |
| 123 | + "mcpServers": { |
| 124 | + "sf-angular-mcp": { |
| 125 | + "command": "npx.cmd", |
| 126 | + "args": [ |
| 127 | + "-y", |
| 128 | + "@syncfusion/angular-mcp@latest" |
| 129 | + ], |
| 130 | + "env": { |
| 131 | + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" |
| 132 | + // or |
| 133 | + // "Syncfusion_API_Key": "YOUR_API_KEY" |
| 134 | + } |
| 135 | + } |
| 136 | + } |
| 137 | +} |
| 138 | + |
| 139 | +// Click OK, then click Apply. The server starts and shows Connected status. |
| 140 | + |
| 141 | +{% endhighlight %} |
| 142 | +{% endtabs %} |
| 143 | + |
| 144 | +**Verifying Installation** Check your editor's MCP Server list for `sf-angular-mcp` with a **Connected** status to confirm a successful installation. |
| 145 | + |
| 146 | +## Common use cases |
| 147 | + |
| 148 | +The examples below showcase how the `search_docs` tool handles real-world Angular PDF Viewer development scenarios. The tool can be invoked directly, as shown in the examples below, for specific needs. Alternatively, an AI assistant can automatically invoke it based on the request. |
| 149 | + |
| 150 | +**Get Started** |
| 151 | + |
| 152 | +Use `search_docs` to get contextual guidance, code snippets, and configuration examples for the Angular PDF Viewer component. |
| 153 | + |
| 154 | +{% promptcards %} |
| 155 | +{% promptcard Standalone Component Configuration %} |
| 156 | +#search_docs How do I configure the Syncfusion Angular Standalone PDF Viewer Component? |
| 157 | +{% endpromptcard %} |
| 158 | +{% endpromptcards %} |
| 159 | + |
| 160 | +**Implement Features** |
| 161 | + |
| 162 | +Get step-by-step help for adding specific features to the Angular PDF Viewer. |
| 163 | + |
| 164 | +{% promptcards %} |
| 165 | +{% promptcard Form Designer %} |
| 166 | +#search_docs How can I enable Form Designer in Angular PDF Viewer? |
| 167 | +{% endpromptcard %} |
| 168 | +{% endpromptcards %} |
| 169 | + |
| 170 | +{% promptcards %} |
| 171 | +{% promptcard Fit to Viewport %} |
| 172 | +#search_docs Provide API for Fit the entire page to the viewport in Angular PDF viewer |
| 173 | +{% endpromptcard %} |
| 174 | +{% endpromptcards %} |
| 175 | + |
| 176 | +{% promptcards %} |
| 177 | +{% promptcard Programmatic Printing %} |
| 178 | +#search_docs how to programmatically trigger printing in the Angular PDF Viewer? |
| 179 | +{% endpromptcard %} |
| 180 | +{% endpromptcards %} |
| 181 | + |
| 182 | +**Configuration & Troubleshooting** |
| 183 | + |
| 184 | +Get help configuring network behavior and resolving loading issues in the Angular PDF Viewer. |
| 185 | + |
| 186 | +{% promptcards %} |
| 187 | +{% promptcard Retry Timeout %} |
| 188 | +#search_docs How to Configure Retry Timeout for Angular PDF Viewer Requests. |
| 189 | +{% endpromptcard %} |
| 190 | +{% endpromptcards %} |
| 191 | + |
| 192 | +{% promptcards %} |
| 193 | +{% promptcard Document Loading Issue %} |
| 194 | +#search_docs Document not Loading Newer version in Angular PDF Viewer. |
| 195 | +{% endpromptcard %} |
| 196 | +{% endpromptcards %} |
| 197 | + |
| 198 | +## Best Practices |
| 199 | + |
| 200 | +To get the most out of the Syncfusion<sup style="font-size:70%">®</sup> Angular PDF Viewer MCP Server: |
| 201 | + |
| 202 | +- **Be Specific** - Include the component and use case in your queries (for example, *"Load a PDF from a remote URL into the Angular PDF Viewer and enable annotation export"*). |
| 203 | +- **Provide Context** - Include applicable versions, expected outcomes, and any requirements or limitations that may affect the request. |
| 204 | +- **Use Descriptive Queries** - Avoid overly brief or ambiguous requests. Providing sufficient detail helps improve the accuracy and relevance of the response. |
| 205 | +- **Stay Consistent** - Keep file organization, naming conventions, and coding standards consistent throughout your Angular project. |
| 206 | +- **Start Fresh for New Topics** - Begin a new chat when switching to a different feature or task to maintain clean context. |
| 207 | +- **Use Advanced AI Models** - For the best results, use advanced AI models such as the latest-generation **Claude**, **GPT**, or **Gemini** models. |
| 208 | +- **For Troubleshooting** - Use AI suggestions for common issues; consult the [official documentation](./getting-started) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. |
| 209 | +- **Minimize Active Tools** - Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. |
| 210 | + |
| 211 | +> Always review AI-generated code before using it in production. |
| 212 | +
|
| 213 | +## Troubleshooting |
| 214 | + |
| 215 | +The table below lists frequently encountered issues and suggested resolutions to help diagnose and address common setup or usage challenges. |
| 216 | + |
| 217 | +| Issue | Solution | |
| 218 | +|-------|----------| |
| 219 | +| **Server failed to start** | Verify Node.js 18+ is installed, check JSON syntax in the config file, and restart your IDE. | |
| 220 | +| **Invalid API key** | Verify your key is active at the [Syncfusion Account Page](https://syncfusion.com/account/api-key). | |
| 221 | +| **Incorrect API key config** | For the file path: verify file location and content. For inline key: check the key is correctly updated. | |
| 222 | +| **Wrong config file location** | VS Code: `.vscode/mcp.json` • Code Studio: `.codestudio/mcp.json` • Cursor: `.cursor/mcp.json` in the workspace root. | |
| 223 | +| **Check IDE logs** | VS Code / Code Studio: Output panel → "MCP" • Cursor: Developer Console for MCP errors. | |
| 224 | + |
| 225 | +## Privacy & Security |
| 226 | + |
| 227 | +The Syncfusion<sup style="font-size:70%">®</sup> MCP Servers are designed with privacy considerations: |
| 228 | + |
| 229 | +* The tools process requests according to the user's query without storing any content or prompts. |
| 230 | +* User prompts are not stored or used for other purposes. |
| 231 | +* Prompts are not used to train Syncfusion models. |
| 232 | +* The assistant provides context; the final output is produced by the selected AI model. |
| 233 | + |
| 234 | +The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. |
| 235 | + |
| 236 | +## See also |
| 237 | + |
| 238 | +- [Model Context Protocol](https://modelcontextprotocol.io/docs/2026-07-28/getting-started/intro) |
0 commit comments