Skip to content

Your First Look at the Interface

Now that you understand the building blocks (tables, rows, columns), let's take a tour of the actual interface you'll use. This guide shows you exactly where to click and what to expect—no coding required!


The Dashboard: Your Home Base

When you first log in, you'll see your Dashboard—the central hub where all your tables live. Think of it like your email inbox, but instead of emails, you see all your different automation projects.

Your Tables

Manage all your automation workflows

Total Tables
5
Currently Running
4
In Queue
28

Customer Support

AI-powered support chatbot

Running
Queued: 3
Total rows247
ActivityActive
Sub-tables:Ticket History

Sales Leads

Auto-qualification pipeline

Queued: 5
Total rows89
ActivityActive
E-commerce(2)
2 running 8 queued

Order Processing

End-to-end order fulfillment

Running
Queued: 8
Total rows432
ActivityActive
Sub-tables:Order ItemsShipment Tracking

Inventory Sync

Real-time inventory updates

Total rows156
Marketing(1)
1 running 12 queued

💡 Understanding the Dashboard:
Status badges show real-time activity: green spinner = running, amber clock = queued
Sub-tables appear as small pills below each table card
Categories help organize your tables - click to expand/collapse folders
Statistics bar shows overall activity across all your tables
• Click any card to open that table and see all rows and columns

What You See on the Dashboard

  • All your tables displayed as cards in a grid layout
  • Status badges showing real-time activity:
    • Green spinner = actively running tasks
    • Amber clock + number = tasks waiting in queue
  • Sub-tables appear as small pills below each table card
  • Categories help organize your tables into folders (click to expand/collapse)
  • Statistics bar at the top shows overall activity across all tables
  • "Create New Table" button to start building new automations
  • Three-dot menu on each card for options (Edit, Clone, Export, Delete)

Real-time updates: The badges update automatically via WebSocket connection—no need to refresh! You'll see the green spinner animate when tasks are processing, and the queued count changes as tasks move through the pipeline.


Inside a Table: The Main View

When you click on a table card, you'll see the Table View—this is where the magic happens. You'll see all your rows and columns in a familiar spreadsheet-like grid.

Lead Enrichment Pipeline

Enrich inbound leads with company data

ID
Email📝 Manual
Email Valid
Company Data 2
Score
1
john@acme.com
Valid
Acme Corp
85
2
sarah@tech.io
Processing...
Queued
3
mike@startup.ai
Valid
Startup AI
72
4
invalid-email
Failed
Skipped
Showing 1-4 of 142 rows

💡 Understanding Cell States:

IDLE - Not started
RUNNING - Processing
DONE - Complete
FAILED - Error occurred
SKIPPED - Condition not met
QUEUED - Waiting

Understanding the Grid

The grid shows your data in a spreadsheet-like format:

System Columns (always on the left):

  • ID - Unique row number with drag handle for reordering
  • Added By - Who created this row
  • Created At - When the row was created

Your Columns (you define these):

  • Manual columns (like "Email") - You can type directly into these cells
  • Calculated columns (like "Email Valid", "Company Data") - Automatically filled by your automation

Column Headers show:

  • Column name and type icon
  • Real-time status: spinning icon when running, clock icon with count when queued
  • Click the status indicator to jump directly to running or queued tasks!
  • Three-dot menu with options:
    • Configure column - Edit settings
    • Add Column - Insert new column to left or right
    • Re-run - Re-run empty cells, failed cells, or all cells
    • Clear - Clear cell range or entire column
    • Cancel - Cancel queued tasks (range or all)
    • Delete column - Remove permanently

Cell States are color-coded:

  • Gray with ○ = Ready (waiting to start)
  • Gray with ⏱ (pulsing) = Queued (in the queue)
  • Gray with ⚙️ (spinning) = Running (processing now)
  • Yellow with ⏸ = Rate Limited (temporarily throttled)
  • Gray with ⏳ (pulsing) = Scheduled (waiting for event)
  • Normal data display = Completed (finished successfully - shows the actual result)
  • Blue badge with ⚡ = Unsuccessful (error occurred - click eye icon for details)
  • Gray with ⚙️ = Skipped (Condition failed) (condition not met)
  • Gray with ⊘ = Skipped (Dependencies not present) (required data missing)

The Buttons You'll Use Most

Showing 1-50 of 142 rows

💡 The toolbar gives you quick access to key actions:
Top toolbar: Configure your automation (columns, triggers, filters, dashboards)
Bottom toolbar: Manage your data (add rows, import/export)
Filter button turns blue when filters are active, showing the count

Top Toolbar (Configuration)

These buttons help you set up and configure your automation:

+ Add Column - This is where you build your automation! Each column is an action—like "AI response," "Send email," "Search database," etc.

  • Opens a type selector showing all available column types
  • Creates a new step in your workflow
  • You'll use this a LOT when building

Add Trigger - Connect your table to the outside world—website chat, WhatsApp, email, forms, APIs, and more.

  • Opens trigger selector (webhook, email, IMAP, cron, etc.)
  • This is how new rows get created automatically
  • Use when you want your automation to run automatically

X Triggers - Shows current trigger count, click to view/manage all triggers

  • See which triggers are active
  • Edit or delete existing triggers
  • Check this to see what's feeding data into your table

X Dashboards - Access analytics dashboards associated with this table

  • Create visual summaries of your data
  • Charts, metrics, recent activity
  • Great for monitoring at a glance

Filter - Show only specific rows based on conditions

  • Turns blue when filters are active (shows count)
  • Create complex filter expressions with AND/OR logic
  • Use to focus on specific items: "only failed rows", "today's orders", "VIP customers"

Bottom Toolbar (Data Management)

These buttons help you manage your data:

+ Add Row - Manually create a new row

  • Perfect for testing your automation
  • Enter data into manual columns
  • Calculated columns will automatically process

Upload CSV - Bulk import rows from a spreadsheet

  • Upload Excel or CSV files
  • System auto-maps columns
  • All rows start processing immediately

Export - Download your data

  • Export as CSV or JSON
  • Includes all columns and current states
  • Great for backups or analysis

Inspecting Errors and Details

When something goes wrong, the interface makes it easy to debug:

Inspecting Failed Cells

Click the eye icon on a failed cell to see error details:

Failed

💡 Debugging Failed Cells:
• Click the eye icon on any failed cell to see full error details
• The error panel shows the message, stack trace, and timestamp
• You can re-run the cell to retry or clear it to reset
• This makes debugging your automation much easier!

Click the eye icon on any "Unsuccessful" cell to see:

  • Error title and description
  • Technical details (status code, HTTP method, URL if applicable)
  • Response body and headers (for API calls)
  • Stack trace showing where the error occurred
  • Input data that was used
  • Timestamp of when it failed
  • Options to re-run or clear the cell

This makes debugging much easier than digging through logs!


Real-Time Updates: Watch Your Automation Live

One of the most powerful features is live updates without page refresh.

What you'll see:

  • Cells change as they process: Gray "Ready" → Gray "Queued" (pulsing clock) → Gray "Running" (spinning gear) → Normal data display (Completed)
  • New rows appear instantly when triggers fire
  • Status badges update in real-time
  • Smooth animated transitions

How it works:

  • WebSocket connection provides instant updates
  • Multiple users can view the same table simultaneously
  • All changes sync automatically
  • No "refresh to see changes" needed!

Pro tip: Watch the column headers—the running spinner and queued count update live. You can click these indicators to navigate directly to the running or queued tasks!


Here are a few quick navigation tips to help you move around efficiently:

Basic Navigation

  • Back Button (←) - Always in the top left, returns to dashboard
  • Browser back/forward - Works as expected with URL-based routing
  • Breadcrumbs - Shows where you are (Dashboard → Table → Details)

Deep Linking

You can bookmark or share specific views:

  • /taibles - Dashboard overview
  • /taibles/{id} - Specific table
  • /taibles/{id}?parentRow={rowId} - Sub-table filtered by parent
  • /taibles/{id}?highlightRunning=true&focusRow={id}&focusColumn={name} - Jump to specific running task

Keyboard Shortcuts

Power users can navigate faster:

Navigation:

  • Tab / Shift+Tab - Move between cells
  • Arrow keys - Navigate grid
  • Enter - Edit cell or move down
  • Escape - Cancel edit

Actions:

  • Ctrl/Cmd+C - Copy
  • Ctrl/Cmd+V - Paste
  • Ctrl/Cmd+F - Open filter
  • Ctrl/Cmd+K - Add column
  • Ctrl/Cmd+R - Re-run cell
  • Delete - Delete selected rows

Press Ctrl/Cmd+/ to see the full shortcut list!


Mobile and Tablet Support

The interface adapts to different screen sizes:

  • Desktop: Full grid with all columns, sidebars slide in alongside
  • Tablet: Horizontal scrolling for columns, sidebars overlay
  • Mobile: Same grid view with scrolling, touch-friendly tap targets, simplified navigation

Everything works on mobile—you can monitor and manage your automations from anywhere!


Working Efficiently: Tips and Tricks

Scanning Your Automation

Quick health check:

  1. Scan down columns - Normal data display = good, blue "Unsuccessful" badges = issues
  2. Check status badges - See running and queued counts at a glance
  3. Use filters - Filter to show only "Unsuccessful" cells to find problems quickly

Finding and Fixing Problems

  1. Filter to failed cells - Click "Filter" button and filter to show only "Unsuccessful" cells
  2. Click eye icon - Inspect error details on failed cells
  3. Fix configuration - Click gear icon on column header to adjust settings
  4. Re-run - Right-click → "Re-run Cell(s)" or use column menu → "Re-run"
  5. Monitor - Watch cells update as they succeed

Organizing Your View

  • Hide intermediate columns - They still execute, but cleaner view
  • Reorder columns - Drag column headers (input → processing → output makes sense)
  • Use categories - Group related tables in folders on dashboard
  • Create filters - Save common filter views ("Failed Rows", "Completed Today", "High Priority")

Understanding Sidebars and Panels

The interface includes several panels that slide in when needed:

Column Configuration Sidebar

Opens when you click "+ Add Column" or the gear icon on a column header.

What you'll see:

  • Basic Settings: Column name, display label, description
  • Type Configuration: Specific to the column type (AI settings, integration accounts, etc.)
  • Run Configuration: When should this column execute? (on new rows, on dependencies, manually, on schedule)
  • Dependencies: Which other columns must complete first?
  • Condition: Optional rule for when to run (skip if email is invalid, etc.)
  • Rate Limiting: Throttle execution to avoid hitting API limits

Triggers Sidebar

Opens when you click "X Triggers" button.

What you'll see:

  • List of all active triggers
  • Each shows: name, type icon, status (active/inactive), recent activity
  • Actions: Edit, toggle on/off, delete
  • Add Trigger button to create new ones

Filter Panel

Opens when you click "Filter" button.

What you'll see:

  • Visual filter builder
  • Add conditions: Column → Operator → Value
  • Combine with AND/OR logic
  • Example: Status equals "qualified" AND Lead Score > 50
  • Save View to reuse this filter later

That's It! You're Ready to Build

You Now Know the Interface!

You've learned:

  • ✅ What the Dashboard looks like and how status badges work
  • ✅ How to navigate the grid view and understand cell states
  • ✅ Which buttons to click for different tasks
  • ✅ How to inspect errors and debug issues
  • ✅ How real-time updates work via WebSocket
  • ✅ Keyboard shortcuts and navigation patterns
  • ✅ How to work efficiently with filters and organization

Next Step: Build Your First AI Agent

In Part 2, we'll walk through building a real customer support chatbot from scratch—step by step, no coding required. You'll have a working agent in 30 minutes!


Next: Building Your First AI Agent — Now that you know the interface, let's build something real!

Built with VitePress