Derek

Posted on May 29

AI Agent for Order/Invoice/Contract Generation: From Natural Language to PDF — An All-in-One Solution

#agents #automation #invoice #pdf

Generating business documents like purchase orders, invoices, and contracts used to be either a tedious manual layout job or a technically demanding coding task involving API integration. Now, with the AI Agent + ComPDF Generation API combo, you simply describe your needs in natural language. The AI Agent automatically creates the HTML template and JSON data file — then you can preview and verify the output in the ComPDF online Demo, or even have it generate a full visual application that calls the ComPDF Generation API. Zero code required throughout the entire process. Sign up for ComPDF Cloud and get 200+ free processing credits every month.

Workflow Overview: From Natural Language to PDF

The entire workflow consists of just four steps:

Step 1 → Tell the AI Agent your document requirements — it auto-generates the HTML template and JSON data
Step 2 → Validate the output in the ComPDF online Demo — iterate instantly by asking the AI to make changes
Step 3 → Have the AI Agent (any AI Agent works; this example uses OpenCode) generate a visual application that calls the API
Step 4 → Sign up for ComPDF Cloud to get your API Key — 200+ free credits every month

Below, we walk through the full flow using a cross-border trade scenario.

Step 1: Use Natural Language to Have the AI Agent Generate Templates and Sample Data

Send Your Requirements to the AI Agent

Open any AI Agent (such as OpenCode, Claude, ChatGPT, Copilot, etc.) and send the following instruction:

I run a foreign trading company. I need an HTML template and JSON data for a purchase order in English. The template should include: company logo placeholder, customer information, item list (name, unit price, quantity, subtotal), shipping cost, tax, and grand total. The JSON data should simulate a real international trade order.

The AI Agent will immediately return two files: order_template.html and order_data.json. You can open both files to check if they meet your business needs, and ask the AI to make any adjustments — such as inserting your company logo in the top-right corner.

Order Template Generated by the AI Agent

Below is the core HTML template code generated by the AI Agent:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@page { size: A4; margin: 20mm 15mm; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1a202c; font-size: 13px; line-height: 1.5; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; border-bottom: 3px solid #1a365d; padding-bottom: 20px; }
.logo { width: 120px; height: 60px; background: #1a365d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; border-radius: 4px; }
.doc-title { text-align: right; }
.doc-title h1 { font-size: 26px; color: #1a365d; letter-spacing: 2px; }
.doc-title p { color: #718096; font-size: 12px; }
.info-grid { display: flex; justify-content: space-between; margin-bottom: 25px; }
.info-box { width: 48%; }
.info-box h3 { font-size: 11px; color: #1a365d; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }
.info-box p { font-size: 12px; color: #4a5568; margin: 2px 0; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th { background: #1a365d; color: #fff; padding: 10px 8px; font-size: 12px; text-align: left; letter-spacing: 0.5px; }
td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
td.num { text-align: right; }
.totals { width: 320px; margin-left: auto; margin-top: 10px; }
.totals table { margin: 0; }
.totals td { padding: 6px 10px; border: none; font-size: 12px; }
.totals .label { font-weight: bold; color: #4a5568; }
.totals .value { text-align: right; }
.totals .grand-total td { font-size: 16px; font-weight: bold; color: #1a365d; border-top: 2px solid #1a365d; padding-top: 8px; }
.footer { margin-top: 40px; padding-top: 15px; border-top: 1px solid #e2e8f0; font-size: 11px; color: #a0aec0; text-align: center; }
</style>
</head>
<body>
<div class="header">
<div class="logo">ABC TRADING</div>
<div class="doc-title">
<h1>PURCHASE ORDER</h1>
<p>Order No: {{order_number}} | Date: {{order_date}}</p>
</div>
</div>

<div class="info-grid">
<div class="info-box">
<h3>Seller</h3>
<p><strong>{{seller.name}}</strong></p>
<p>{{seller.address}}</p>
<p>{{seller.city}}, {{seller.country}}</p>
<p>Tel: {{seller.phone}} | Email: {{seller.email}}</p>
</div>
<div class="info-box">
<h3>Ship To</h3>
<p><strong>{{buyer.name}}</strong></p>
<p>{{buyer.address}}</p>
<p>{{buyer.city}}, {{buyer.country}}</p>
<p>Tel: {{buyer.phone}}</p>
</div>
</div>

<table>
<tr>
<th style="width:40px">#</th>
<th>Item Description</th>
<th style="width:60px">Qty</th>
<th style="width:50px">Unit</th>
<th style="width:90px" class="num">Unit Price (USD)</th>
<th style="width:100px" class="num">Total (USD)</th>
</tr>
{{#each items}}
<tr>
<td>{{inc @index}}</td>
<td><strong>{{name}}</strong><br><span style="color:#718096;font-size:11px">{{sku}}</span></td>
<td>{{qty}}</td>
<td>{{unit}}</td>
<td class="num">{{format_price unit_price}}</td>
<td class="num"><strong>{{format_price total}}</strong></td>
</tr>
{{/each}}
</table>

<div class="totals">
<table>
<tr><td class="label">Subtotal</td><td class="value">${{format_price subtotal}}</td></tr>
<tr><td class="label">Shipping ({{shipping.method}})</td><td class="value">${{format_price shipping.cost}}</td></tr>
<tr><td class="label">Insurance</td><td class="value">${{format_price insurance}}</td></tr>
<tr class="grand-total"><td>TOTAL AMOUNT</td><td class="value">${{format_price grand_total}}</td></tr>
</table>
</div>

<p style="margin-top:15px;font-size:11px;color:#718096;">
<strong>Terms:</strong> {{payment_terms}}<br>
<strong>Delivery:</strong> {{delivery_date}} via {{shipping.method}}<br>
<strong>Incoterms:</strong> {{incoterms}}
</p>

<div class="footer">
ABC Trading Co., Ltd. | 123 Trade Street, Los Angeles, CA 90001, USA | www.abctrading.com
</div>
</body>
</html>

Template highlights:

Uses Mustache-style variable placeholders ({{order_number}}, {{seller.name}}, etc.)
Supports {{#each items}} loop rendering for the item list
CSS styles fully cover print layout (@page size: A4)
Includes company brand color (deep blue #1a365d) and professional fonts

Corresponding JSON Data Sample

Simulates a real electronic components international trade order containing 4 items with a grand total of \$113,590.00.

{
  "order_number": "PO-2026-0589",
  "order_date": "May 25, 2026",
  "seller": {
    "name": "ABC Trading Co., Ltd.",
    "address": "123 Trade Street, Suite 400",
    "city": "Los Angeles",
    "country": "United States",
    "phone": "+1 (213) 555-0198",
    "email": "orders@abctrading.com"
  },
  "buyer": {
    "name": "Shenzhen ElecTech Co., Ltd.",
    "address": "No. 88 Tech Road, Nanshan District",
    "city": "Shenzhen",
    "country": "China",
    "phone": "+86 755 8888 6666"
  },
  "items": [
    { "name": "Industrial Touch Screen Display 10.1\"", "sku": "TSD-101-IPS", "qty": 500, "unit": "pcs", "unit_price": 85.50, "total": 42750.00 },
    { "name": "Raspberry Pi Compute Module 4 (8GB)", "sku": "RPI-CM4-8G", "qty": 1000, "unit": "pcs", "unit_price": 45.00, "total": 45000.00 },
    { "name": "USB-C Power Supply 65W", "sku": "PS-65W-USBC", "qty": 800, "unit": "pcs", "unit_price": 12.80, "total": 10240.00 },
    { "name": "Industrial Enclosure IP65", "sku": "ENC-IP65-304", "qty": 300, "unit": "pcs", "unit_price": 38.20, "total": 11460.00 }
  ],
  "subtotal": 109450.00,
  "shipping": { "method": "Sea Freight (FOB Los Angeles)", "cost": 3250.00 },
  "insurance": 890.00,
  "grand_total": 113590.00,
  "payment_terms": "T/T 30% deposit, 70% against copy of B/L",
  "delivery_date": "July 15, 2026",
  "incoterms": "FOB Los Angeles"
}

Continue Generating Invoice and Contract Templates

Keep the same conversation going and send the next instruction:

Based on the same trade scenario, generate an HTML template and JSON data for a Proforma Invoice, including invoice number, invoice date, payment terms, and bank information.

The AI Agent will generate the invoice template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@page { size: A4; margin: 18mm 15mm; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1a202c; font-size: 13px; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.logo-area { display: flex; align-items: center; gap: 12px; }
.logo { width: 55px; height: 55px; background: #1a365d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 10px; border-radius: 50%; text-align: center; line-height: 1.2; }
.company-info h2 { font-size: 16px; color: #1a365d; }
.company-info p { font-size: 11px; color: #718096; }
.doc-badge { background: #1a365d; color: #fff; padding: 8px 25px; text-align: center; border-radius: 4px; }
.doc-badge h1 { font-size: 20px; letter-spacing: 3px; }
.doc-badge p { font-size: 11px; opacity: 0.8; }
.ribbon { background: #ebf4ff; padding: 12px 15px; border-left: 4px solid #1a365d; margin: 15px 0; display: flex; justify-content: space-between; font-size: 12px; color: #2d3748; }
.info-grid { display: flex; justify-content: space-between; margin-bottom: 20px; }
.info-box { width: 48%; padding: 12px; background: #f7fafc; border-radius: 4px; }
.info-box h3 { font-size: 10px; color: #1a365d; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.info-box p { font-size: 11px; color: #4a5568; margin: 1px 0; }
table { width: 100%; border-collapse: collapse; margin: 15px 0; }
th { background: #1a365d; color: #fff; padding: 9px 8px; font-size: 11px; text-align: left; }
th.num { text-align: right; }
td { padding: 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
td.num { text-align: right; }
tr:nth-child(even) td { background: #f7fafc; }
.totals-box { width: 350px; margin-left: auto; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; }
.totals-box table { margin: 0; }
.totals-box td { padding: 7px 12px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
.totals-box tr:last-child td { border-bottom: none; }
.totals-box .grand-total { background: #1a365d; color: #fff; }
.totals-box .grand-total td { font-size: 15px; font-weight: bold; border-bottom: none; }
.bank-info { margin-top: 25px; padding: 12px 15px; background: #fffff0; border: 1px solid #ecc94b; border-radius: 4px; font-size: 11px; color: #744210; }
.bank-info h4 { font-size: 11px; margin-bottom: 4px; }
.footer { margin-top: 25px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 10px; color: #a0aec0; text-align: center; }
</style>
</head>
<body>
<div class="header">
<div class="logo-area">
<div class="logo">ABC<br>TRADING</div>
<div class="company-info">
<h2>ABC Trading Co., Ltd.</h2>
<p>123 Trade Street, Los Angeles, CA 90001, USA</p>
<p>Tax ID: US-XX-XXXXXXX | Tel: +1 (213) 555-0198</p>
</div>
</div>
<div class="doc-badge">
<h1>INVOICE</h1>
<p>{{invoice_number}}</p>
</div>
</div>

<div class="ribbon">
<span><strong>Invoice Date:</strong> {{invoice_date}}</span>
<span><strong>Due Date:</strong> {{due_date}}</span>
<span><strong>PO Reference:</strong> {{po_reference}}</span>
</div>

<div class="info-grid">
<div class="info-box">
<h3>Bill To</h3>
<p><strong>{{buyer.name}}</strong></p>
<p>{{buyer.address}}</p>
<p>{{buyer.city}}, {{buyer.country}}</p>
<p>Attn: {{buyer.contact}}</p>
</div>
<div class="info-box">
<h3>Ship To</h3>
<p>{{shipping.consignee}}</p>
<p>{{shipping.port_of_loading}} → {{shipping.port_of_discharge}}</p>
<p>Via: {{shipping.method}}</p>
<p>ETD: {{shipping.etd}}</p>
</div>
</div>

<table>
<tr>
<th style="width:35px">#</th>
<th>Description</th>
<th style="width:55px">Qty</th>
<th style="width:85px" class="num">Unit Price</th>
<th style="width:95px" class="num">Amount (USD)</th>
</tr>
{{#each items}}
<tr>
<td>{{inc @index}}</td>
<td><strong>{{name}}</strong><br><span style="color:#718096;font-size:10px">HS Code: {{hs_code}} | {{sku}}</span></td>
<td class="num">{{qty}}</td>
<td class="num">{{format_price unit_price}}</td>
<td class="num"><strong>{{format_price total}}</strong></td>
</tr>
{{/each}}
</table>

<div class="totals-box">
<table>
<tr><td style="width:180px">Subtotal</td><td class="num">${{format_price subtotal}}</td></tr>
<tr><td>Freight ({{shipping.method}})</td><td class="num">${{format_price shipping_cost}}</td></tr>
<tr><td>Insurance (0.8%)</td><td class="num">${{format_price insurance}}</td></tr>
<tr><td>Total Amount Due</td><td class="num" style="font-weight:bold">${{format_price grand_total}}</td></tr>
<tr class="grand-total"><td>AMOUNT IN WORDS</td><td class="num" style="font-size:11px">{{amount_in_words}}</td></tr>
</table>
</div>

<div class="bank-info">
<h4>Banking Details</h4>
<p>Bank of America | Account: 1234-5678-9012-3456 | SWIFT: BOFAUS3N | Routing: 026009593</p>
</div>

<div class="footer">
This invoice is valid for payment within 30 days. Please quote invoice number for all correspondence.
</div>
</body>
</html>

Then generate the contract template:

Generate an HTML template and JSON data for an international sales contract, including contract terms, both parties' information, signature fields, and trade terms.

In less than 5 minutes, all three sets of templates and data are ready — completed entirely through natural language.

Step 2: Validate the Output in the ComPDF Online Demo

1. Access the ComPDF Generation API Online Demo

Open your browser and visit the free online Automated PDF Document Generation demo page provided by ComPDF. It features:

HTML Source Editor — paste or modify templates directly
JSON Data Editor — paste data to auto-bind template variables
"Generate PDF" Button — one-click API call to generate the PDF
PDF Preview & Download — view online or save locally

2. Upload Templates and Data for Validation

The operation is very simple:

Copy the entire order_template.html content generated by the AI Agent and paste it into the Demo's HTML editor
Copy the entire order_data.json content and paste it into the JSON data area
Click the "Generate PDF" button

The ComPDF Generation API renders the template in real time, fills in the data, and produces a standard PDF file.

The generated output — Purchase Order PDF example:



Invoice PDF example:



Contract PDF example:



As you can see, all styles — fonts, colors, tables, borders — are perfectly preserved. The output quality fully meets business document standards.

Iterative Refinement: Edit Directly or Ask the AI Agent

Not satisfied with the output? The ComPDF Demo page offers two ways to make changes:

Method 1: Edit directly. Modify the CSS or structure directly in the Demo's HTML editor, then click Generate again to see the changes in real time. For example, adjust font sizes, change table column widths, or swap the color scheme.

Method 2: Ask the AI Agent to modify (recommended). Describe your changes in natural language, for instance:

Please insert my company logo in the top-right corner of the order template. The company name is ABC Trading Co., Ltd. Change the theme color to deep blue #1a365d. Add a sequence number column to the item table.

The AI Agent will immediately understand your requirements, update the template, and return the new code. Simply copy the new code into the Demo page and regenerate.

Step 3: Have the AI Agent Generate a Visual Application That Calls the ComPDF API for Automated Document Generation

This is the highlight of the workflow — the AI Agent doesn't just generate files; it creates a complete, runnable application for you.

Send the Final Instruction

Send the following instruction to the AI Agent (when the AI asks for authentication credentials, you can sign up for ComPDF Cloud to obtain them):

Build a program that calls the ComPDF Generation API to automatically create invoices/orders/contracts, and generate a visual interface for it.

Visual Interface Generated by the AI Agent

The AI Agent will generate a complete web application interface, as shown below (this interface was generated by the AI — you can simply ask the AI to create any page you want; the entire process is as easy as sending a message):



The interface consists of three core areas:

Document Type Switcher — one-click toggle between Purchase Order / Invoice / Sales Contract
HTML Template + JSON Data Editor — split-pane layout, supports direct editing or file upload
Result Area — displays the generated filename with a download button

Fill in your ComPDF API Key, click the "Generate PDF" button, and the API call progress will be displayed in real time:

Program Logic

The application's logic is straightforward:

You input HTML template + JSON data
            ↓
    Click "Generate PDF" button
            ↓
    Front-end sends data to ComPDF Generation API
            ↓
    API generates PDF file in real time
            ↓
    Page displays filename with download button

The entire process completes in seconds. It supports one-click switching between three document types — Order, Invoice, and Contract — with pre-loaded templates and data for each, ready to use out of the box.

API Key Configuration

In the generated application, you'll need to configure your own API Key. Here's how to get one:

Go to https://api.compdf.com/signup
Register for a ComPDF Cloud account (just your email)
Retrieve your API Key from the console
Paste it into the API Key input field in the application

Free users get 200+ file processing credits per month, which is more than enough for personal testing and daily use. If you need higher throughput, cost-effective paid plans are available.

ComPDF Generation API Core Capabilities

Understanding the technology behind the scenes will help you get the most out of this solution.

High-Fidelity HTML/CSS to PDF Rendering

The core capability of the ComPDF Generation API is generating PDFs from HTML/CSS templates. It faithfully preserves all style attributes — fonts, colors, layouts, tables, images, and more — and supports CSS @page rules for print layout control. This means every design detail in the AI Agent-generated template is accurately reproduced in the PDF output.

Template Variables and Data Binding

Supports using {{variable_name}} placeholders in HTML templates, dynamically filled with JSON data. One template paired with different JSON data can generate thousands of differentiated documents — ideal for batch-generating invoices or order confirmations for different customers.

Batch Processing and Asynchronous Tasks

Supports submitting up to 500 document generation tasks in a single request. Results are retrieved via callback or polling after asynchronous processing completes. For business scenarios requiring large-scale invoice or contract generation, this significantly improves processing efficiency.

Effectiveness Comparison: Natural Language + AI Agent vs. Traditional Approach

Dimension	Traditional Approach	AI Agent Approach
Writing HTML Template	Manual coding, 30-60 min	Natural language description, generated in seconds
Constructing JSON Data	Manual construction, 15-30 min	AI auto-generates sample data
Writing API Call Code	1-2 hours	AI Agent completes automatically
Building Front-end UI	2-4 hours	AI Agent generates automatically
Total Time	4-8 hours	15-30 minutes
Technical Barrier	Requires full-stack dev skills	Zero code, natural language only

Free Credits Value

200+ free processing credits per month — calculated at one PDF per credit — is sufficient for personal testing and small team daily use. Building the same capability the traditional way requires purchasing servers, deploying services, and maintaining systems — with costs and technical barriers far exceeding this approach.

Best Practices & Advanced Tips

How to Write Effective AI Agent Instructions

The more specific your instructions, the more precise the generated template. We recommend including the following elements:

Document Type — Order/Invoice/Contract/Quotation, etc.
Business Scenario — International trade/E-commerce/Domestic trade/Service contract, etc.
Field Checklist — Which data fields should be included
Visual Preferences — Colors/Fonts/LOGO position, etc.
Language Requirement — Chinese/English/Bilingual

Example: "Generate an English proforma invoice template for a Shenzhen-based tech company, including product name, HS code, quantity, unit price, and total. Theme color is blue, logo in the top-left."

Template Reuse Tips

When designing templates, hard-code fixed information like company name, logo, and address directly into the HTML, and use variable placeholders for dynamic content like order number, customer name, and item list. This way, the same template paired with different JSON data can serve different customers and orders.

Migrating from Demo Validation to Production

After validation in the ComPDF online Demo, deploy the AI Agent-generated visual application to your own server, or use platforms like Vercel / Netlify for one-click hosting. In production, we recommend storing templates in a database or object storage and linking them with your business system's order data to create a fully automated document generation pipeline.

FAQs

I have no programming experience. Can I use this solution?

Absolutely. The entire workflow revolves around interacting with the AI Agent using natural language. You only need to describe what you want, and the AI Agent handles all the technical work. The ComPDF online Demo also requires zero programming knowledge.

How exactly are the 200+ free credits calculated?

After registering for ComPDF Cloud, you automatically receive 200+ free file processing credits every month. Each call to the Generation API to produce one PDF file counts as one credit. If you need more, cost-effective paid plans are available.

What deployment methods does the AI Agent-generated program support?

The AI Agent typically generates a backend based on Python Flask/FastAPI or Node.js Express, paired with an HTML/React front-end. It can run locally or be deployed to cloud platforms like Vercel, Netlify, or Railway.

Does it support generating PDFs with Chinese content?

Yes. The ComPDF Generation API fully supports Chinese font rendering. Simply specify a Chinese font (such as SimSun, Microsoft YaHei) or use a generic font-family in your HTML template to generate high-quality Chinese documents.

Conclusion: Start Your AI Document Automation Journey

Three steps to get started:

Sign up for ComPDF Cloud — get your API Key for free
Describe your needs to the AI Agent in natural language — generate templates and data
Validate in the ComPDF online Demo — or let the AI Agent generate a visual application directly

From zero to your first PDF — just a few minutes.

Beyond orders, invoices, and contracts, this solution is equally suitable for quotations, packing lists, bills of lading, customs declarations, and other international trade documents. You can also try using the AI Agent to generate more complex templates — such as multilingual templates, multi-currency invoices, or data reports with charts. The flexibility of the ComPDF Generation API combined with the creativity of the AI Agent opens up possibilities far beyond your imagination.

DEV Community