Smart Ticket | Smartchart开发手册

Introduction #

Smart ticket submission demonstrates the complete chain of “LLM + chart tool calling” in SmartChart: user uploads invoice image -> LLM recognizes and reviews content -> triggers tool call ({"tool":"VV_ReimbursementForm",...}) -> chart dataset renders reimbursement form. Datasets named with VV prefix are “Visualization Variant” datasets, specifically for rendering visual results - a SmartChart agent tool calling convention.

Use Cases #

Connecting LLM + data + charts + forms + reach
Invoice review example

Usage #

Create LLM data source, using dashAI to call Alibaba DashScope

dashAI supports qwen model, auto-switches to vl model for image uploads (default qwen-vl, changeable via {“vmodel”:“qwen-vl-max”})

Create agent dataset with dashAI data source, named “Invoice Assistant”

# You are an invoice review expert
## Core Capabilities
### Feature 1: Invoice Review
If user uploads an invoice, identify content and review. Rules: amount cannot exceed 200
Must output at least: company, business category, amount

### Feature 2: Generate Reimbursement Form
Based on identified invoice info, output JSON format (JSON only), xx to be replaced:
{"tool":"ReimbursementForm","msg":"generate form","param":{"company":"xx","supplier":"xx","category":"xx","amount":"xx"}}

# User question:
$prompt

Create another dataset named “ReimbursementForm”

Note: Since it’s a visualization dataset, type must be: Component

Dataset content:

dataset={
    "applicant":"$username",
    "company":"$company",
    "category":"$category",
    "amount":"$amount",
    "supplier":"$supplier"
}

Chart content:

Note: Chart content can be generated by LLM first, then paste CSS and HTML

let dataset=__dataset__;
let css =`.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.container h1 {
    text-align: center;
    color: #1a73e8;
    margin-bottom: 25px;
}
.container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.container th {
    background-color: #f8f9fa;
    text-align: left;
    padding: 12px 15px;
    border: 1px solid #ddd;
    font-weight: bold;
}
.container td {
    padding: 10px 15px;
    border: 1px solid #ddd;
}
.container .section-header {
    background-color: #e8f0fe;
    font-weight: bold;
    font-size: 1.1em;
}
.container .required {
    color: #d93025;
}
.container .field-label {
    font-weight: 500;
}`;
ds_loadcss(css,100);
let table=`
<div class="container">
    <h1>Expense Reimbursement Form</h1>   
    <table>
        <tr>
            <th colspan="4" class="section-header">Basic Info</th>
        </tr>
        <tr>
            <td class="field-label">Form No:</td>
            <td></td>
            <td class="field-label">Applicant:</td>
            <td>${dataset.applicant}</td>
        </tr>
        <tr>
            <td colspan="4" class="section-header">Expense Info</th>
        </tr>
        <tr>
            <td class="field-label required">*Company:</td>
            <td>${dataset.company}</td>
            <td class="field-label">Category:</td>
            <td>${dataset.category}</td>
        </tr>
        <tr>
            <td class="field-label required">*Amount:</td>
            <td>$${dataset.amount}</td>
            <td class="field-label">Supplier:</td>
            <td>${dataset.supplier}</td>
        </tr>
    </table>
    <button onclick="alert('Submitted')">Submit</button>
    <button onclick="alert('Printed')">Print</button>
</div>`;
dom__name__.innerHTML=table;

Use @ in homepage AI Q&A module to summon “Invoice Assistant”