AI code assistants can accelerate the integration of advanced PDF capabilities into web applications. This guide explains how to prompt a large language model (LLM) 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.

What is vibe coding?

Vibe coding involves guiding an LLM to generate or refactor code in real time. You can do this within:

• An integrated development environment (IDE)
• Web-based platforms such as Replit(opens in a new tab) or Lovable.dev(opens in a new tab)
• A command-line interface using tools such as Claude Code(opens in a new tab).

LLMs can make mistakes, especially during initial use. As you improve your prompts, the output will also improve. Use the example prompt in this guide as a starting point.

Key capabilities of the Nutrient Web SDK viewer

• Instant PDF rendering — WebAssembly build runs fully client‑side, with no server roundtrips.
• Prompt‑driven setup — Hand Web SDK’s official documentation to your LLM and let it scaffold the code.
• Framework‑agnostic — Works consistently across all major frameworks and libraries, including:
  • React + Vite
  • NextJS
  • Vue
  • Svelte
  • Nuxt
  • TypeScript
  • JavaScript
  • Angular
  • Electron
  • ASP.NET
  • Blazor
  • jQuery
  • PHP
  • Laravel
  • PWA
  • Flutter
• Rich editing and annotation — Out‑of‑the‑box toolbars for highlights, form filling, signatures, and more.
• Production‑ready — Accessibility, localization, dark mode, and cross‑browser support.

How vibe coding works with the Nutrient Web SDK viewer

1. Sign up — Start with a free trial. Note that PDFs rendered using the free trial include a watermark. For production use, sign up to create an account on Nutrient Portal(opens in a new tab) and grab your license key.

2. Teach the LLM — Follow the steps below to provide context and documentation to the language model:

   • Write a software design specification to describe the application you want to build. You can use Google AI Studio(opens in a new tab) to create the specification. Here’s a template(opens in a new tab) to get you started.

     Pro tip: Use one chat window to generate the specification and another to critique and refine it. Iterate until you’re satisfied.

   • Choose a development environment such as Replit(opens in a new tab), Lovable.dev(opens in a new tab), or Claude Code(opens in a new tab). This guide will use Claude Code(opens in a new tab).
   • Paste the software design specification document created above in a file named claude.md within your project.
   • Enable Agent mode in your IDE and set its context to the claude.md file. Choose a model such as Claude Opus 4, Gemini 2.5 Pro, or GPT-4.1. Keep in mind that cutting-edge AI models evolve rapidly, so it’s always a good idea to check for the latest versions.
   • Feed the following URLs to the model:
     • Nutrient Web SDK top-level guide
     • API reference
     • Getting started guides

       Pro tip: Ask the model to crawl and review these resources to understand the SDK’s classes and methods.

3. Prime the prompt — Use the template below to set up your initial prompt:

   ## Role
   You are a senior frontend developer.
   
   ## Instructions
   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.
   Treat `PSPDFKit.` and `NutrientViewer.` as interchangeable.
   
   ## Task
   1. Create a minimal React + Vite application (or another framework if preferred).
   2. Integrate Nutrient Web SDK using the documentation provided. If a license key isn't available, use an empty string.
      > Pro tip: Use the [Nutrient CDN link](https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js) to include SDK files and assets.
   3. Render a [sample PDF file](https://demo-files.nutrient.io/quick-start.pdf) in the browser on localhost.

Troubleshooting

If the Agent omits an import or uses an incorrect method name, do the following:

• Copy the relevant code snippet from the official guides.
• Share the snippet or a screenshot of the snippet with the Agent.
• Ask the Agent to identify and correct the error based on the official documentation.

Prompts for viewer customization

Task	One-line prompt to instruct the LLM
Toggle dark mode	Add a button that switches the viewer between light and dark themes.
Limit toolbars	Hide all annotation tools except the highlighter and free text note.
Integrate SDK into a React web app	Wrap the viewer in a functional React component with properties such as container, initialViewState, customFonts, and editableAnnotationTypes.
Localize UI	Load the German language pack (or any of your preferred languages) and default the viewer to it.
Signature capture	Add a Sign button that inserts a hand-drawn signature on the current page.

Next steps

• Integrate AI-powered document understanding in your viewer
• Combine server-side rendering with client-side viewing
• Browse code samples

FAQs