# JSON Render PDF Pattern

> AI pattern for generating PDFs from prompts with streaming JSON previews

An interactive architectural pattern showing how to generate styled PDFs from natural language prompts using AI SDK and json-render. It streams structured document specifications in real time, giving users a side-by-side view of the generated JSON and an interactive PDF preview.

Website: https://aisdkagents.com/patterns/json-render-pdf

## What it is for

- Generate professional invoices and reports from natural language prompts
- Study an implementation of streaming JSON document specs to react-pdf
- Iteratively refine resumes, letters, and business documents through a chat interface

## Features

- Three-panel UI featuring a chat interface, streaming JSON spec, and live PDF preview
- Template presets for common formats including Invoices, Quarterly Reports, and Resumes
- Interactive PDF viewer controls including zoom, page navigation, and download
- Built using Vercel AI SDK, json-render/react-pdf, and shadcn/ui components

## Pricing

Free

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Platforms: Web
- For: Full-stack AI developers and designers building document generation workflows
- Alternative to: Puppeteer, react-pdf
- Tags: react pdf, ai sdk, pdf generation, json render, streaming

## Why it was saved

- [@nolansym, 23 February 2026](https://x.com/nolansym/status/2026008880837202420): A repeatable full-stack AI pattern the user wants to study or rebuild: chat-driven PDF generation with structured JSON spec, streaming into a live PDF viewer.

## Compare

- [Alternatives to Puppeteer](https://xiry.app/alternatives/puppeteer.md)

## Related

- [@json-render/react-pdf](https://xiry.app/resources/json-render-react-pdf): Render structured JSON specifications into PDFs using React PDF (GitHub repo, Open source)
- [Next.js PDF Invoice Route Handler Pattern](https://xiry.app/resources/next-js-pdf-invoice-route-handler-pattern): Server-side PDF generation pattern for Next.js App Router using React streaming (Tip, Free)
- [Vercel Chat SDK Patterns and Code Snippets](https://xiry.app/resources/vercel-chat-sdk-patterns-and-code-snippets): Code patterns for building cross-platform chat bots with Vercel Chat SDK (Tip, Open source)
- [json-render](https://xiry.app/resources/json-render): Generative UI framework rendering LLM JSON streams into predefined components safely (Web app, Open source)
- [prompt-kit Primitives](https://xiry.app/resources/prompt-kit-primitives): Fullstack building blocks for AI apps installable with shadcn CLI (Web app, Open source)
- [Chat SDK 101](https://xiry.app/resources/chat-sdk-101): Unified TypeScript SDK overview for multi-platform chat bot development (Tip, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/json-render-pdf-pattern

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.