Skip to main content

🎓 Tutorial

Watch this comprehensive tutorial to get started with Totalum:

What is Totalum?​

Totalum is a revolutionary platform that combines AI-powered development with a low-code database builder. It's designed for anyone who wants to build full-stack web applications quickly - whether you're a non-technical user or an experienced developer.

Why Choose Totalum?​

Totalum is the only platform that offers a complete full-stack solution with:

  • ✨ AI Agent Builder - Create entire Next.js applications using natural language
  • 🗄️ Visual Database Builder - Design and manage your database without writing SQL
  • 🎨 Beautiful Auto-generated Backoffice - Get a fully functional admin panel automatically
  • 🚀 One-Click Deployment - Deploy to Cloudflare automatically (no external accounts needed)
  • 🔌 Built-in Integrations - AI LLMs, PDF generation, OCR, email sending, and more

Everything in one place. No need for multiple third-party services.

Getting Started - User Guide​

1. Project Section​

This is where the magic happens! In the Project section, you'll find:

  • Live Preview: See your application in real-time as it's being built
  • AI Chat: Simply describe what you want to build, and Totalum Agent will create it for you
    • Example: "Create a task management app with user authentication"
    • Example: "Add a customer database with invoicing features"
    • Example: "Build a blog with image galleries"
  • Quick Edit Mode: Click the "Edit" button to directly modify visible text and images on the preview without prompting the AI (perfect for quick tweaks!)
  • Logs: Access frontend and backend logs (top-left corner) to troubleshoot issues
  • Deploy: One-click deployment with custom domain support
  • Mobile/Desktop Preview: Test your app on different screen sizes

💡 Tip: The AI Agent understands context and can fix bugs, add features, or answer questions about your project!

2. Data Section​

Your auto-generated backoffice for managing all your data:

  • Multiple Views: Visualize your data as:
    • 📊 Table View (with built-in tree relations viewer)
    • 📋 Kanban Board (perfect for task management)
    • 🖼️ Gallery (ideal for image collections)
    • 📅 Calendar (for event management)
  • Easy CRUD Operations: Create, read, update, and delete records with a beautiful interface
  • Smart Filtering: Filter and sort your data effortlessly
  • Relations Explorer: Navigate between related data visually

No coding required - just click and manage your data!

3. Code Section​

For those who want to see under the hood:

  • File Explorer: Navigate through your entire Next.js project structure
  • Code Viewer: View all source code files
  • Download Source Code: Get the complete source code (available with paid plans)

You own your code - export it and use it anywhere!

4. Settings Section​

Manage your project configuration:

  • Database Structure: View and manually edit your database schema (or let the AI do it)
  • Backoffice Configuration: Customize how your data pages look and behave
  • API Keys: Generate API keys to access your data programmatically
  • Backups: Automatic hourly backups keep your data safe
  • User Management: Add admin users to your backoffice
  • Deleted Data History: Recover accidentally deleted data

5. Account Section​

Manage your Totalum account:

  • Profile Settings: Update your personal information
  • Plan & Billing: View your subscription, invoices, and upgrade options
  • Project Management: Create new projects or switch between existing ones

Visit https://accounts.totalum.app to access your account.

How Totalum Works​

  1. Chat with the AI: Tell Totalum Agent what you want to build
  2. AI Creates Your App: The agent builds your Next.js application with database, frontend, and backend
  3. Manage Your Data: Use the auto-generated backoffice to add and manage content
  4. Deploy: One-click deployment to production with custom domain support

That's it! No need to learn complex frameworks or manage multiple services.

Need Help?​

👨‍💻 For Developers - Technical Details

Technology Stack​

Totalum Agent is a full-stack AI coding agent specialized in:

  • Frontend: React, Next.js 15.5.4
  • Backend: Next.js API Routes, TypeScript
  • Authentication: BetterAuth
  • Payments: Stripe integration
  • Database API: Totalum SDK (auto-generated from your database structure)
  • Package Management: Full npm ecosystem support (200+ tools available)

Totalum AI Agent Capabilities​

The Totalum Agent is a first-class coding agent that:

  • ✅ Uses best practices and writes clean, maintainable code
  • ✅ Creates production-ready designs with excellent SEO
  • ✅ Has internet search capabilities for up-to-date information
  • ✅ Supports MCP (Model Context Protocol) for extended functionality
  • ✅ Automatically accesses frontend and backend logs for debugging
  • ✅ Runs in a dedicated isolated Linux sandbox for maximum performance and security
  • ✅ Manages context intelligently to maintain coherent codebases

What the Agent Can Do:​

  • Build complete frontend and backend features
  • Create and manage database structures via MCP
  • Perform CRUD operations on database records
  • Install and configure any npm library
  • Integrate AI LLMs, OCR, PDF generation, email sending
  • Create APIs and integrations
  • Fix bugs and optimize performance
  • Answer questions about your codebase

Database & API​

Auto-Generated Database API​

When you create or modify your database structure (via AI or manually), Totalum automatically generates a complete REST API for your data.

Totalum SDK​

The Totalum SDK (totalum-api-sdk) is an npm package that provides:

  • TypeScript Support: Full type safety and autocomplete
  • Easy API Consumption: Simple methods for all database operations
  • Advanced Filtering: Complex queries made simple
  • File Uploads: Handle file storage seamlessly
  • Email Sending: Built-in email functionality
  • AI Features: Access to LLMs, OCR, and PDF generation
  • And More: Everything you need for modern web applications

Learn more: Installation Guide

SDK Capabilities​

// CRUD Operations
await totalumClient.crud.getRecords('users', { filter: {...} });
await totalumClient.crud.createRecord('users', { name: 'John' });

// File Operations
await totalumClient.files.uploadFile(file);
await totalumClient.files.createPdfFromHtml({ html: '...' });

// AI Features
await totalumClient.ai.chatCompletion({ messages: [...] });
await totalumClient.ocr.scanDocument(fileId);

// Email
await totalumClient.email.send({ to: '...', subject: '...', body: '...' });

Deployment Architecture​

  • Platform: Cloudflare (automatic, no configuration needed)
  • Custom Domains: Fully supported
  • HTTPS: Automatic SSL certificates
  • Global CDN: Fast delivery worldwide
  • Serverless: Auto-scaling, no server management

Want to deploy elsewhere? Download your source code from the Code section and deploy anywhere you want!

Advanced Features​

Database Operations via MCP​

The Totalum AI Agent can:

  • Create/edit/delete database tables and fields
  • Define relationships (one-to-many, many-to-many)
  • Set up indexes and constraints
  • Perform CRUD operations on records
  • Execute complex filters and queries

Logs & Debugging​

Access real-time logs from the Project section:

  • Frontend Logs: React errors, console output, network requests
  • Backend Logs: API responses, server errors, database queries

Find the logs button in the top-left corner of the Project section.

Source Code Access​

  • View Code: Browse your entire codebase in the Code section
  • Download: Export your complete Next.js project (paid plans)
  • Full Ownership: Use the code however you want - it's yours!

Tech Stack Limitations​

Totalum Agent specializes in the JavaScript/TypeScript ecosystem with Next.js. It does not support:

  • ❌ PHP, Python, Ruby, Java, .NET, Go, Rust, or other backend languages
  • ❌ Other frontend frameworks (Vue, Angular, Svelte, etc.)

If you need these technologies, Totalum might not be the right fit for your project.

Best Practices​

  1. Be Specific: The more detailed your prompts, the better the AI agent performs
  2. Iterate: Build features incrementally and test as you go
  3. Use the Backoffice: Manage data through the auto-generated backoffice instead of hardcoding
  4. Check Logs: When debugging, always check the logs first
  5. Quick Edits: Use Edit Mode for simple text/image changes instead of prompting
  6. API Keys: Keep your API keys secure - never expose them in frontend code

Resources for Developers​

  • API Documentation: Complete reference for all Totalum API endpoints
  • SDK Documentation: Installation | Usage
  • Code Examples: Throughout this documentation
  • Support: [email protected]

Why Totalum is Different​

Most AI coding assistants require you to:

  • ❌ Set up your own hosting
  • ❌ Configure databases separately
  • ❌ Build your own admin panels
  • ❌ Manage multiple third-party services
  • ❌ Handle deployments manually

Totalum provides everything:

  • ✅ AI agent + database + backoffice + deployment = All-in-one
  • ✅ No external accounts needed (except for your Totalum account)
  • ✅ Production-ready from day one
  • ✅ Full source code access - you own what you build

Ready to build? Visit https://accounts.totalum.app to get started!