Creating Live Pages

Overview

A Live Page is a dynamic HTML page that combines traditional web technologies with AI-powered backend management and a powerful JavaScript data layer. Unlike static pages, Live Pages can dynamically manage data through CRUD operations and adapt their content and functionality based on user interactions.

Core Architecture

Canvas and Documents

The Live Page architecture consists of:

Canvas: Serves as the main HTML content of your page. When creating your Live Page, you only need to paste the body content (starting with a <div> instead of <body>) into the canvas. The HTML document structure, DOCTYPE, and head elements are automatically provided by the framework.
Documents: Function as a virtual file system containing configurations and supporting files
Data Layer: A JavaScript library (pt) that provides CRUD operations for managing entities and data

Important: When pasting HTML code into the canvas, start with a <div> element instead of <body>, and omit the DOCTYPE, <html>, <head>, and <title> tags as these are automatically handled by the Live Pages framework.

Quick Start

Basic Data Operations

The pt JavaScript library is automatically available in your Live Page. Here's a quick example:

// List entities with filters
const tasks = await pt.list({
    entityNames: ['task'],
    filters: { status: 'active' },
    limit: 20
});

// Add new entity
const newTask = await pt.add('task', {
    text: 'Buy groceries',
    completed: false
});

// Get single entity by ID
const task = await pt.get(123);

// Update entity
await pt.edit(123, {
    ...task.data,
    completed: true
});

// Delete entity
await pt.delete(123);

// Send message to chat
await pt.addMessage('Task completed!');

// Upload files to chat
const formData = new FormData();
formData.append('files', fileInput.files[0]);
await pt.uploadFiles(formData, 'Uploaded from Live Page');

// Send push notification
await pt.sendNotification(123, 'New Task', 'You have been assigned a task');

// Search documents
const results = await pt.searchDocuments('project requirements', 'DOCUMENTS_ONLY');

// Get document text
const doc = await pt.getDocumentText(456);

// Save document
await pt.saveDocument('report.pdf', 'PDF', 'application/pdf', '# Report\n\nContent here...');

Simple Todo Example

<div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">My Tasks</h1>

    <div class="flex gap-2 mb-4">
        <input
            type="text"
            id="taskInput"
            class="flex-1 px-3 py-2 border rounded"
            placeholder="New task..."
        >
        <button
            onclick="addTask()"
            class="bg-blue-500 text-white px-4 py-2 rounded"
        >
            Add
        </button>
    </div>

    <div id="tasksList"></div>
</div>

<script>
async function loadTasks() {
    const entities = await pt.list({
        entityNames: ['task'],
        filters: { completed: false }
    });

    const tasks = entities.filter(e => e.entity_name === 'task');

    document.getElementById('tasksList').innerHTML = tasks.map(task => `
        <div class="bg-white p-4 rounded shadow mb-2 flex justify-between">
            <span>${task.data.text}</span>
            <button onclick="deleteTask(${task.id})" class="text-red-500">
                Delete
            </button>
        </div>
    `).join('');
}

async function addTask() {
    const text = document.getElementById('taskInput').value.trim();
    if (!text) return;

    await pt.add('task', {
        text: text,
        completed: false
    });

    document.getElementById('taskInput').value = '';
    await loadTasks();
}

async function deleteTask(taskId) {
    await pt.delete(taskId);
    await loadTasks();
}

// Load tasks on page load
document.addEventListener('DOMContentLoaded', loadTasks);
</script>

Setup Requirements

No Special Configuration Needed

The data layer system requires no special chat configuration:

No need to disable History and Memory: The system doesn't rely on LLM parsing
No GOAL setup required: Data operations are handled by JavaScript
No prompt engineering: Direct JavaScript API calls handle all data manipulation
Automatic timestamps: The system automatically manages created_at and updated_at timestamps at the entity level

Important Notes

Timestamps are automatic: Don't add created_at or updated_at to your data objects - they're managed at the entity level
Creator tracking: The creator_user_id field is automatically set when you create an entity, tracking who created it
Entity structure: Your data goes in the data property, with system metadata at the entity level
No initialization needed: The pt library is automatically available and initialized

Entity Structure

Entities returned by pt.list() and pt.get() have this structure:

{
    id: 123,                    // Unique entity ID
    entity_name: 'task',        // Type of entity
    data: {                     // Your actual data
        text: 'Buy groceries',
        completed: false
    },
    creator_user_id: 456,       // User ID who created this entity
    created_at: '2024-03-15T10:30:00+00:00',  // Managed automatically
    updated_at: '2024-03-15T10:35:00+00:00'   // Managed automatically
}

Styling with Tailwind CSS

Live Pages have full support for Tailwind CSS, a utility-first CSS framework. Tailwind CSS is pre-loaded and available for use without any additional setup.

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-2">Welcome</h2>
    <p class="text-blue-100">This is styled with Tailwind CSS</p>
</div>

Responsive Design

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white p-6 rounded-lg shadow">Card 1</div>
    <div class="bg-white p-6 rounded-lg shadow">Card 2</div>
    <div class="bg-white p-6 rounded-lg shadow">Card 3</div>
</div>

Next Steps

Explore these detailed guides to build more sophisticated Live Pages:

Core Topics

Data Management API Reference - Complete guide to all pt API methods and operations
Filtering and Querying - Advanced server-side filtering with operators like $contains, $in, $or, and more
Pagination - Implement efficient pagination for large datasets
Working with Chat Members - Integrate chat members into your Live Pages

Design and Examples

Styling with Tailwind CSS - Component examples and responsive design patterns
Complete Examples - Full implementations including todo apps, dashboards, and more

Advanced Topics

Performance and Best Practices - Error handling, optimization, caching, using Goals for automation, and troubleshooting

Common Use Cases

Live Pages are ideal for:

Task Management: Todo lists, project trackers, sprint boards with notifications
Data Dashboards: Analytics, reporting, monitoring with export to PDF/Excel
Content Management: Article management, blog systems with document search
Forms and Surveys: Data collection and processing with automated notifications
Inventory Systems: Product catalogs, stock management with reports
Customer Support: Ticket tracking, issue management with user notifications
Document Library: Search, view, and create documents in various formats
Knowledge Base: Semantic search across documentation with RAG
Report Generation: Automated creation of PDFs, Word documents, and spreadsheets
Team Collaboration: Real-time updates with push notifications to team members
Invoice Processing: Upload invoices, AI extracts data and stores in database automatically
Resume Screening: Batch upload resumes, AI parses and creates candidate records
Expense Management: Upload receipts, AI categorizes and tracks expenses
Meeting Analysis: Upload meeting notes/recordings, AI extracts action items
Data Migration: Upload spreadsheets, AI validates and imports data with error handling
Competitive Research: AI searches web and compiles competitor intelligence automatically
Lead Generation: AI finds potential customers and stores contact information

Key Features

Real-time Updates: Data syncs automatically across the chat
Server-side Filtering: Efficient querying with MongoDB-style operators
Pagination Support: Handle large datasets efficiently
Chat Integration: Access chat members and their information
Send Messages: Communicate back to the chat from your Live Page
File Upload: Upload files directly to the chat with drag & drop support
AI-Powered Database Operations: Send natural language instructions to have AI extract data and manage database entities automatically
Intelligent File Processing: Upload files with instructions and let AI extract structured data and store it in the database
Push Notifications: Send notifications to specific users
Document Search: Semantic search across documents and collections using RAG
Document Management: View document content and create documents in various formats (TXT, MD, PDF, DOCX, CSV, XLSX)
No Backend Setup: Everything works out of the box
Tailwind CSS: Modern, responsive styling without custom CSS

09 November 2025