Skip to Content
Template from a PDF or image

Template from a PDF or image

You already have the document: an invoice your accounting tool prints, a receipt, a certificate, or a design exported from Figma or Canva. An AI agent connected to oJo can rebuild it as an HTML template, so your code fills it with new data on every render.

Before you start

  • An AI client connected to the oJo MCP server, such as Claude, ChatGPT, Cursor or Claude Code. If you run the server locally with npm, use version 0.9.0 or later.
  • The document as a PDF or an image. Export a Figma frame or a Canva design as PDF or PNG first.

1. Give the document to your agent

Attach the file and ask for a template. In clients that list MCP prompts, choose template_from_document first, so the agent follows the steps below.

Turn this invoice into an oJo template. The invoice number, date, customer and line items
change on every invoice. Our logo and the payment terms stay the same.

Saying what changes and what stays saves a round of fixes.

2. What the agent builds

  • The page size of the original, in a CSS @page rule for a PDF, or as the viewport for an image.
  • The layout in HTML and CSS: header, blocks, tables, totals, footer. Fonts load from a URL such as Google Fonts. A logo goes in by its https URL, or as a data: URI when it has none.
  • Placeholders for what changes, such as {{invoice.number}} and {{#each items}}...{{/each}} for line items. See Template Helpers.
  • Sample defaults with neutral values. Names, addresses, email addresses, phone numbers, account numbers and tax IDs from your document are replaced before anything is saved.

3. Check it against the original

The agent sends you a preview link. Open it next to the original and ask for fixes in plain words, such as “the totals table is too wide” or “use the serif font from the header”. Previews are free.

For a PDF, the agent also runs check_pdf, which returns the page count and any warnings without a credit. If a long table breaks badly, see Multi-page PDFs.

4. Save and render

When the preview matches, the agent saves the template with a name you will recognise. Render it from your code:

curl --request POST \
  --url https://api.ojo.so/v1/pdf/template \
  --header 'Authorization: Bearer <your API key>' \
  --header 'Content-Type: application/json' \
  --data '{"templateId": "<Template ID>", "modify": {"invoice": {"number": "INV-2026-0143"}}}'

Or ask the agent: “Render my Invoice template for INV-2026-0143 to Acme Inc.” See Create PDF from Template.

Your AI client reads the document, so it goes to your AI provider. oJo receives only the HTML and the sample defaults the agent saves. Check the defaults with get_template if the document held customer data.

When it does not match

  • Text wraps differently. The original used a font the agent could not load. Name the font, or give a link to its file.
  • A scanned document. The agent reads the text from the image, so check numbers and spelling in the preview.
  • Many pages with the same layout. Ask for one page with a repeating block, not one template per page.
Securityn8n