Vibe code with Nutrient Web SDK
This guide shows how to use AI code assistants to vibe code(opens in a new tab) with Nutrient Web SDK to:
- Embed Nutrient Web SDK viewer to render, annotate, and edit PDFs directly in the browser.
- Customize the viewer’s user interface (UI) and behavior with minimal human-written code.
You can test the SDK capabilities in our playground.
Prefer to jump straight into code? View the example repo on GitHub.
How AI-powered coding works with Nutrient Web SDK
Set up your environment — Choose a development environment such as Claude Code(opens in a new tab), Replit(opens in a new tab), or Lovable.dev(opens in a new tab). This guide focuses on the CLI tool Claude Code(opens in a new tab).
Prime the prompt — Use the template below to set up your initial prompt, adjusting it as desired:
1. Use the documentation from these URLs: [Nutrient Web SDK top-level guide](https://www.nutrient.io/guides/web/), [API reference](https://www.nutrient.io/api/web/), and [getting started guides](https://www.nutrient.io/sdk/web/getting-started/). Read and crawl them thoroughly to understand available classes and methods.2. Create a minimal React + Vite application.3. Integrate Nutrient Web SDK using the documentation provided. Use an empty string for the license key.> Pro tip: Refer to the [troubleshooting guide](https://www.nutrient.io/guides/web/troubleshooting/common-issues/) to find solutions if you encounter any issues when integrating Nutrient Web SDK.4. Display a [sample PDF](https://www.nutrient.io/downloads/nutrient-web-demo.pdf) in the browser on localhost.
Alternatively you can include the prompt above in your
CLAUDE.md(opens in a new tab) file, alongside any other prompts for your project. Note that PDFs rendered in trial mode include a watermark. For production use, contact our Sales team.
SDK customization prompts
Once the basic setup is complete, you can try the following sample prompts to customize the Nutrient Web SDK viewer as per your needs.
| Task | One-line prompt to instruct the LLM |
|---|---|
| UI customization | |
| Toggle dark mode | Add a button that switches the viewer between light and dark themes. For more information, refer to the toggle dark mode guide. |
| Limit toolbars | Hide all annotation tools except the highlighter and free text note. For more information, refer to the limit toolbars guide. |
| Localize the UI | Load the German language pack (or any of your preferred languages) and default the viewer to it. For more information, refer to the localization guide. |
| Features and functionality | |
| Signature capture | Add a Sign button that inserts a hand-drawn signature on the current page. For more information, refer to the signature capture guide. |
| Form filling | Enable interactive PDF form filling with validation and data persistence. For more information, refer to the form filling guide. |
| Annotation tools | Set up comprehensive annotation toolbars with highlights, notes, stamps, and drawing tools. For more information, refer to the annotation tools guide. |
| Document editing | Enable PDF document editing features like merging, splitting, and reordering pages. For more information, refer to the document editing guide. |
When Claude Code makes errors or uses outdated code, manually copy the correct code snippet from the official guides and paste it in your prompt with instructions like “Use this exact code instead” to correct the implementation.
Next steps
You can also explore the following resources to enhance your Nutrient Web SDK experience: