Frontend Tools

The chat UI includes built-in tools that execute entirely in the browser using WebAssembly (WASM). When an LLM returns tool calls, they are executed client-side with results displayed inline as interactive artifacts and sent back to the LLM to continue the conversation.

Available Tools

Python Interpreter

The Python interpreter uses Pyodide, the CPython interpreter compiled to WebAssembly. Code runs in a Web Worker to prevent blocking the main thread.

Pre-installed Packages

Additional packages are automatically installed via micropip when imported.

Capabilities

• Standard output: Captured via print() statements
• Return values: Final expression value returned to model
• Matplotlib figures: Automatically captured as PNG images
• Package installation: Auto-detects imports and loads packages

Example Usage

import pandas as pd
import matplotlib.pyplot as plt

# Create sample data
data = {'Month': ['Jan', 'Feb', 'Mar', 'Apr'],
        'Sales': [100, 150, 120, 180]}
df = pd.DataFrame(data)

# Create visualization
plt.figure(figsize=(8, 5))
plt.bar(df['Month'], df['Sales'], color='steelblue')
plt.xlabel('Month')
plt.ylabel('Sales ($)')
plt.title('Monthly Sales')
plt.tight_layout()
plt.show()

print(f"Total sales: ${df['Sales'].sum()}")

Configuration

JavaScript Interpreter

The JavaScript interpreter uses QuickJS, a small embeddable JavaScript engine compiled to WebAssembly. Execution is fully sandboxed with no access to browser APIs.

Capabilities

• Console output: console.log(), console.error(), console.warn()
• Return values: Final expression value returned to model
• ES2020 support: Modern JavaScript features

Limitations

• No access to DOM, fetch, setTimeout, or browser APIs
• No external module imports
• Memory limit: 16 MB
• Timeout: 30 seconds

Example Usage

// JSON data processing
const data = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
];

const average = data.reduce((sum, p) => sum + p.score, 0) / data.length;
const highest = data.reduce((max, p) => (p.score > max.score ? p : max));

console.log(`Average score: ${average.toFixed(1)}`);
console.log(`Highest scorer: ${highest.name} (${highest.score})`);

// Return summary
({ average, highest: highest.name, count: data.length });

SQL Query

The SQL tool uses DuckDB WASM, an analytical SQL database compiled to WebAssembly. Query uploaded files directly using SQL.

Supported File Types

Capabilities

• Full SQL syntax with DuckDB extensions
• Aggregations, joins, window functions
• Results displayed as interactive tables
• Up to 50 rows sent back to the model (full results shown in UI)

Example Usage

-- Analyze sales data from uploaded CSV
SELECT
    region,
    COUNT(*) as order_count,
    SUM(amount) as total_sales,
    AVG(amount) as avg_order
FROM 'sales_data.csv'
GROUP BY region
ORDER BY total_sales DESC

Configuration

Charts

The chart tool uses Vega-Lite, a high-level grammar for interactive visualizations. The LLM provides a Vega-Lite specification and the chart renders inline.

Supported Chart Types

Example Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Monthly Revenue",
  "data": {
    "values": [
      { "month": "Jan", "revenue": 45000 },
      { "month": "Feb", "revenue": 52000 },
      { "month": "Mar", "revenue": 48000 }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": { "field": "month", "type": "nominal", "title": "Month" },
    "y": { "field": "revenue", "type": "quantitative", "title": "Revenue ($)" },
    "color": { "value": "steelblue" }
  }
}

Features

• Interactive: Hover tooltips, pan, zoom (where supported)
• Export: Download as PNG or SVG
• View spec: Toggle to see the Vega-Lite JSON
• Vega Editor: Open in the online Vega Editor

HTML Preview

The HTML tool renders HTML content in a sandboxed iframe. Use it for formatted reports, interactive demos, or styled content.

Security

HTML runs in a strictly sandboxed iframe:

Features

• Preview mode: Rendered HTML display
• Source mode: View raw HTML code
• Copy: Copy HTML to clipboard
• Open in tab: View in full browser tab
• Fullscreen: Maximize within the app

Example Usage

<div style="font-family: system-ui; padding: 20px; max-width: 600px;">
  <h1 style="color: #2563eb; margin-bottom: 8px;">Report Summary</h1>
  <p style="color: #6b7280; margin-bottom: 16px;">Generated on January 7, 2026</p>

  <table style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr style="background: #f3f4f6;">
        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #e5e7eb;">Metric</th>
        <th style="padding: 12px; text-align: right; border-bottom: 2px solid #e5e7eb;">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Total Users</td>
        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">1,234</td>
      </tr>
      <tr>
        <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">Active Sessions</td>
        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e5e7eb;">456</td>
      </tr>
    </tbody>
  </table>
</div>

Wikipedia

The Wikipedia tool fetches articles from Wikipedia using the MediaWiki API. Content is retrieved directly from Wikimedia servers with full CORS support.

Actions

Search Example

{
  "action": "search",
  "query": "machine learning",
  "limit": 5
}

Returns matching articles with titles and descriptions for the model to choose from.

Get Article Example

{
  "action": "get",
  "query": "MIT",
  "language": "en"
}

Returns the full article including:

• Wikitext: Complete article source (infoboxes, sections, references)
• Sections: Table of contents with section numbers
• Categories: Article categories
• Wikidata properties: Structured facts from linked Wikidata entity

Multi-language Support

The tool queries the specified language edition of Wikipedia (e.g., de.wikipedia.org for German).

Artifact Display

Article artifacts include:

• Rendered Wikipedia HTML with infobox, images, and tables
• Collapsible table of contents
• Wikidata properties table
• Categories
• License information and attribution notice

Wikidata

The Wikidata tool fetches structured data from Wikidata, the free knowledge base that provides structured data for Wikipedia and other projects.

Actions

Search Example

{
  "action": "search",
  "query": "Albert Einstein",
  "type": "item",
  "limit": 5
}

Returns matching entities:

{
  "results": [
    {
      "id": "Q937",
      "label": "Albert Einstein",
      "description": "German-born physicist (1879–1955)"
    },
    { "id": "Q1234567", "label": "Albert Einstein (crater)", "description": "..." }
  ]
}

Get Entity Example

{
  "action": "get",
  "query": "Q937"
}

Returns structured entity data:

• Labels and descriptions in the requested language
• Aliases: Alternative names
• Claims: Property-value pairs (inception, official website, coordinates, etc.)
• Wikipedia links: Links to Wikipedia articles in different languages

Entity Types

Property Labels

The tool automatically fetches human-readable labels for property IDs:

Artifact Display

Entity artifacts include:

• Entity label and description
• Aliases
• Properties table with human-readable labels
• Links to Wikipedia articles
• Link to Wikidata page

Rate Limiting

Both Wikipedia and Wikidata tools share a rate limiter to respect Wikimedia API guidelines:

Enabling Tools

Tools are enabled per-conversation via the toolbar in the chat interface.

Tool Selection

1. Click the Tools button in the chat input toolbar
2. Toggle individual tools on/off
3. Selected tools are sent to the model as available functions

Tool Dependencies

Execution Flow

1. User sends message with tools enabled
2. Model generates tool_calls in response
3. Frontend executes tools client-side:
   - Python/JS: Web Worker execution
   - SQL: DuckDB WASM query
   - Charts: Vega-Lite render
   - HTML: Sandboxed iframe
4. Results displayed as artifacts
5. Results sent back to model
6. Model continues with tool results
7. Repeat until model provides final response

Artifacts

Tool executions produce artifacts - rich output objects displayed in the UI:

Artifacts are displayed inline in the conversation and can be expanded to fullscreen.

Multi-Turn Execution

Tools support multi-turn execution where the model iteratively refines its approach:

Round 1: Model calls code_interpreter with analysis code
         → Code executes, returns error "KeyError: 'date'"

Round 2: Model adjusts code to use correct column name
         → Code executes successfully, returns results

Round 3: Model calls chart_render with visualization
         → Chart renders inline

Final:   Model provides summary with insights

The execution timeline shows all rounds, allowing users to see the model's reasoning process.

Performance Considerations

First Execution

Best Practices

1. Keep code focused: Shorter scripts execute faster
2. Avoid large packages: Some Python packages are slow to load
3. Use appropriate tools: SQL is faster than Python for tabular data
4. Limit result size: Large outputs slow down the model response