AI SDK PDF Support Example

AI SDK PDF Support Example is a Next.js starter from Vercel Labs that sends PDF documents to a Google or Anthropic AI provider through Vercel's AI SDK and the useObject hook, then streams the model's structured response back into the app.

What is the AI SDK PDF Support Example?

The AI SDK PDF Support Example is a Next.js application published by Vercel Labs under the repository ai-sdk-preview-pdf-support. Its single job is to show how a PDF is attached as a message, passed to a large-language-model provider such as Google or Anthropic, and rendered as a structured object using the AI SDK's useObject hook. The input is a PDF file plus a prompt; the output is the provider's streamed structured response displayed inside the Next.js UI. The project is bootstrapped with create-next-app, runs on Next.js, and depends on the AI SDK documented at sdk.vercel.ai/docs.

Key Features

• Next.js project scaffold — installable with a single create-next-app command for npm, Yarn, or pnpm that clones the ai-sdk-preview-pdf-support example into a new folder.
• Vercel AI SDK integration — uses the open-source AI SDK as a provider-agnostic layer, so the same interface can target more than one model vendor.
• useObject hook — the client-side React hook that consumes a streamed, schema-shaped object response instead of plain text, which is what makes structured output possible.
• PDF message input — PDF documents are submitted as chat messages to the model, demonstrating document attachments rather than plain-text prompts.
• Google and Anthropic providers — the example is wired for Google (via the GOOGLE_API_KEY environment variable) and Anthropic, so you use whichever credentials you hold.
• Environment file setup — a checked-in .env.example lists the required keys; you copy it to .env and fill in your own values.
• One-click Vercel deploy — a Deploy with Vercel button clones the repository and prompts for the required API keys during setup.
• Local dev scripts — npm install followed by npm run dev starts the development server on your machine.

Who should use the AI SDK PDF Support Example?

• Next.js developers learning the AI SDK: read a small, working reference for attaching a document to a model call and streaming structured results back.
• Engineers prototyping document understanding: start from a runnable base instead of wiring PDF upload, provider calls, and streaming from scratch.
• Teams comparing model vendors: point the same app at Google or Anthropic by changing which API key is set.
• Demo builders: deploy a hosted copy to Vercel and share a URL with colleagues.

What can you do with it?

• Build a PDF question-answering prototype: attach a PDF, send it to Google or Anthropic, and render the structured answer through useObject.
• Compare provider output on the same document: run a PDF through one vendor, then swap the key in .env and rerun against the other.
• Stand up a shareable hosted demo: use the Vercel deploy button to clone and deploy the repository with your own keys.

How does the example work?

1. Sign up with the AI provider you want to use and obtain an API key.
2. Copy the values shown in .env.example into a new .env file.
3. Run npm install to pull dependencies, then npm run dev to launch the development server.
4. Open the app, submit a PDF, and watch the useObject hook stream the model's structured response.

FAQ

Is the AI SDK PDF Support Example free to use?

Yes. It is an open-source example repository published on GitHub under the Vercel Labs organization. You pay nothing for the code itself, but you still need your own API key from Google or Anthropic, and any usage charges come from that provider.

Which AI providers does it support?

The example is written for Google and Anthropic. The Vercel deploy flow prompts for a GOOGLE_API_KEY, and the .env.example file documents the keys needed for whichever provider you choose. It is not tied to a single vendor.

What does the useObject hook do here?

useObject is the AI SDK hook that receives a streamed response shaped as an object rather than free-form text. In this example it lets the app render the model's answer about the submitted PDF as structured, incrementally updated data.

How do I run it locally?

Bootstrap the project with the create-next-app command shown for npm, Yarn, or pnpm, add your provider key to a .env file based on .env.example, then run npm install and npm run dev to start the development server.