User Guide

Everything you need to know to build, manage, and share apps on Web-Nothing. This guide follows your journey from sign-up to sharing a polished public app.

---

1. Signing In

Web-Nothing uses Google sign-in. Visit web-nothing.vercel.app and click Build your first app -- free. You will be prompted to sign in with your Google account. Your account is created automatically on first login.

If the platform is in invite-only mode, you will see a waitlist form on the homepage instead. Enter your email, select your industry, and optionally enter an invite code if you have one. If you have a valid invite code, you gain instant access. Otherwise, an admin will review your request and you will receive an email when approved.

Once signed in, you are redirected to your Workspace -- the central hub for building and managing apps.

---

2. The Workspace Dashboard

The workspace dashboard is where you create new apps and discover templates.

Creating an App

1. Type a description of what you want in the prompt bar (up to 2,000 characters). For example:

   "Build me a todo app with tasks, due dates, and priority levels..."

2. Optionally, choose an AI model from the dropdown to the right of the prompt bar. The platform default (Gemini 2.5 Flash) is free and works well for most cases.

3. Click Build. The AI generates your app in seconds, and you are taken to the app editor.

Example Prompts

Below the prompt bar, 6 clickable example prompts help you get started quickly:

• Sales dashboard with pipeline, KPI charts, and calendar
• Salon booking system with day calendar and payment links
• Expense tracker with pie charts, trends, and PDF export. Green theme
• Project board with kanban view, status badges, and tabs
• Order dashboard with product images and revenue charts
• Tutoring portal with class schedule and public parent view

Click any example to populate the prompt bar, then click Build.

API Catalog

When your prompt mentions specific services (like "weather" or "news"), the platform automatically detects relevant APIs and shows them in a suggestion strip below the prompt bar. Each API pill shows whether it is free or requires an API key. Click a pill to include that API in your app, or click Browse all to open the full API catalog.

Featured Templates

Below the prompt area, up to 6 popular templates from the marketplace are displayed. Each shows the template name, description, install count, and author. Click Install to create a copy in your workspace instantly.

---

3. Template Marketplace

The marketplace is a browsable catalog of pre-built app templates created by the community and the Web-Nothing team. Access it from the sidebar (Marketplace) or from the homepage.

Browsing Templates

• Search: Type keywords to find templates by name or description.
• Category filter: Filter by one of 8 categories:
  • Operations, Sales & CRM, Finance, Marketing, Booking, HR & Education, Personal, Project Management
• Sort: Switch between Popular (most installed) and Newest (recently published).

Template Detail Pages

Click a template name to view its detail page with a full description, install count, author, and tags.

Installing a Template

Click Install on any template card. The template is cloned into your workspace with sample data included. You are taken directly to the app editor where you can customize it using prompts or Agent Chat.

---

4. The App Editor

After creating or installing an app, you land in the app editor. This is where you view, modify, and manage your app.

App Header

At the top of the editor:

• App name -- click the name to rename it inline. Press Enter to save, Escape to cancel.
• Description and version -- shown below the name (e.g., "Task tracker with priorities - v3").
• Public stats -- if the app has a public page enabled, view counts, submission counts, and last activity date are shown.

Toolbar Buttons

The header contains several action buttons:

Secondary Toolbar

Below the header, the secondary toolbar offers data export and version history:

• Export JSON -- download all your app's data as a JSON file
• Export CSV -- download each data table as a separate CSV file
• Export PDF -- generate a formatted PDF report of all data tables
• History -- view version history and revert to any previous version (shows current version number)

Modifying Your App

At the bottom of the editor, the modify bar lets you change your app using natural language:

1. Type what you want to change (e.g., "Add a status column to the tasks table").
2. Choose a model from the dropdown if you want to use a different AI.
3. Click Modify. The AI updates your app and you see the changes instantly.

The modify bar also detects API references and shows API catalog suggestions, just like the dashboard prompt bar.

Working with Data

Your app's data is displayed through the rendered UI (tables, forms, charts, etc.). You can:

• Add records -- use form submit buttons or "Add" buttons in your app
• Edit records -- click on editable fields in data tables (inline editing)
• Delete records -- use delete buttons in data tables (with confirmation)

All data changes are saved automatically.

---

5. Agent Chat

Agent Chat is a built-in conversational assistant for modifying your app through natural language.

Opening Agent Chat

Click the Agent Chat button in the toolbar. The editor splits into two panels: your rendered app on the left and the chat panel on the right.

If you installed the app from a template, the agent automatically sends a welcome message asking how you would like to customize it.

What You Can Do

• Add, rename, or remove data tables and fields
• Reorganize the layout (tabs, columns, cards)
• Add charts, badges, stat cards, and other components
• Configure actions (buttons, API calls, email notifications)
• Modify existing components (change labels, types, visibility)

For a full walkthrough, see the Agent Chat Guide.

---

6. Branding

Customize how your app looks with the branding panel. Click Branding in the toolbar to open it.

Primary Color

Choose a primary color that affects the overall theme of your app:

• Click the color picker to choose any color visually
• Type a hex code directly (e.g., #10b981 for green)
• Pick from 8 quick-select presets: blue, green, purple, amber, red, cyan, pink, orange
• Click Clear to remove the custom color and use the default blue

Banner Image

Upload a banner image that appears at the top of your app's public page:

• Click Upload image and select a JPEG, PNG, GIF, or WebP file (max 3.5 MB)
• A preview appears after upload
• Click the X button on the preview to remove the banner

Click Save Branding to apply your changes.

---

7. Version History

Every time you modify your app (via the modify bar or Agent Chat), a new version is saved. Click History in the toolbar to see all versions.

Each version shows:

• Version number (e.g., v1, v2, v3)
• Prompt that created this version (or "Initial version" for the first)
• Change summary -- a description of what changed
• Timestamp

To restore a previous version, click Revert next to that version. The app immediately updates to the selected version, and a new version entry is created for the revert action.

---

8. Public Pages

Share your app with anyone -- no sign-in required for visitors.

Enabling a Public Page

1. Click Public ON in the app editor toolbar.
2. A shareable link appears: Open public link.
3. Choose an access level from the dropdown:

Public Page Appearance

The public page header adapts to your branding:

• Banner image -- if you uploaded a banner, it appears as a full-width header with your app name overlaid
• Gradient -- if you set a primary color but no banner, a gradient header in your brand color is shown
• Default -- if no branding is set, a clean white header with your app name is displayed

Every public page includes a Download PDF button and a Powered by Web-Nothing link.

Hiding Admin Tabs From Public Visitors

Apps using Sidebar Layout or Tabs can mark individual nav items as public. Anything not marked public is hidden from anonymous visitors but stays visible in your owner workspace.

• Sidebar layout: in navItemsJson, add "public": true to nav items that should be visible on the public page (e.g. customer-facing menu, booking, parent portal). Items without this flag default to admin-only and are hidden from public visitors. Their underlying panels do not render either, so admin content cannot leak.
• Tabs: labels accepts either the legacy string array ["A","B"] (all tabs visible to everyone, back-compat) or an object array [{"label":"A","public":true},{"label":"B"}]. Once you switch to the object form, default-deny applies — only items with public: true show on the public page.
• If every nav item is admin-only, public visitors see a "no public content" placeholder rather than an empty shell.

This is independent of allowed actions. Use Allowed Actions to control what visitors can do; use the public nav flag to control what they can see.

Exposing Actions to Anonymous Visitors

An action only becomes callable from a public page after it is added to the app's allowed actions whitelist. Visitors hitting an action that is not whitelisted get a 403 "Action not available" response — even when the action exists in your app and is wired into a button.

Important: this whitelist is part of the app's public access settings, not part of the action definition itself. Adding flags like public: true, allowAnonymous, or exposed to an action when describing your app has no effect. Use one of the three paths below instead.

To expose an action:

• Owner via UI: open the app editor and use the Public Access panel to tick the actions you want anonymous visitors to call.
• Owner via API: PUT /api/apps/{appId} (Bearer platform token) with { "publicAllowedActions": ["create_orders"] }.
• Agent via MCP: call apps_set_public_config on the platform MCP endpoint (POST /api/mcp with a platform token) — it is not exposed on a single app's per-app endpoint, so an App-scoped token can't see it. See the MCP integration guide for the full tool signature. The tool also covers publicEnabled, publicVisibleSchemas, publicHiddenFields, publicEditableFields, publicFilterConfig, unsafePublicReadSchemas, and publicAccessCode.

When you flip publicEnabled from off to on for the first time, every schema in publicVisibleSchemas must have row-scope coverage — set customerScoped: true on the schema (recommended for "my orders" / "my bookings" patterns), or add a publicFilterConfig entry, or explicitly opt in via unsafePublicReadSchemas for catalog-style data. Without coverage you get a 400 response listing the uncovered schemas; this prevents accidentally leaking every customer's rows to every visitor.

Public Endpoints (for Direct Integrations)

Most public-page interactions go through buttons and components that the platform wires up automatically. If you're integrating a custom client (mobile app, embed widget, agent), these are the HTTP endpoints behind the public surface:

The action endpoint requires the envelope above (actionId + params). Sending fields at the top level (e.g. { "actionId": "...", "name": "X" } instead of { "actionId": "...", "params": { "name": "X" } }) is rejected with 400 "Invalid envelope". The data endpoints take fields directly without an envelope.

Validation errors come back as 400 with a developer-readable message (e.g. "multiRecord requires args.parent object. Send body as { actionId, params: { parent: {...}, children: [...] } }."). Internal errors stay 500 with a generic message to avoid leaking platform details.

Filter Tokens

When a visitor submits data through a public form, they receive a unique filter token. This token:

• Persists in their browser session, so they see their own submitted data on return visits
• Is included in the page URL so it can be bookmarked or shared
• Controls which records are visible when row-level filtering is enabled

This enables patterns like "submit a request and track its status" without requiring visitor accounts.

Customer-Scoped Data (Recommended for Food Ordering, Bookings, Customer Portals)

For the standard "customer sees only their own orders / appointments / quotes" pattern, mark the relevant schema as customer-scoped. The platform then automatically:

• Issues an anonymous browser-session cookie on first interaction with your public page (no login)
• Tags every record the visitor creates with their session id
• Filters reads on data-table, status pages, and other components so each visitor sees only the rows they created

You don't need to wire up any URL parameters or filter tokens manually — the cart submission, order-status page, and any list view of the scoped schema "just work" per visitor.

Set this in the schema definition:

• In an AI prompt: tell the AI "make orders customer-scoped" or "each customer should only see their own orders".
• As an agent: set customerScoped: true on the table (or use the schema-update tool to add it to an existing table).

Cookie clear or new device behaves as a new customer (prior orders are no longer visible from that browser; they remain in the database). If you want a customer to retrieve a specific order across devices, share the order id via the order-confirmation receipt — page-level URL binding (?order_id=...) still works alongside the cookie.

Booking Apps With Slot-Conflict Detection

For appointment-style apps (tutoring, salon, fitness class, restaurant table reservation), add an availabilityCheck config to the slot's datetime field. The platform then:

• Server-side rejects double-bookings atomically (race-condition safe — if two customers race for the same slot, one wins cleanly and the other gets a polite "already booked" error).
• Greys out booked times in the date-picker on the customer-facing page so they see availability before clicking submit.
• Enforces lead-time bounds (e.g. "minimum 60 minutes advance booking", "maximum 90 days ahead") on both the input UI and the server.

Configurable via availabilityCheck:

• partitionField — for partitioned resources like tutors / stylists / hairdressers. Two customers booking different staff at the same time don't conflict.
• capacity — for group bookings (yoga class with 20 spots, restaurant table seating four). Default 1 (1-on-1).
• excludeWhen — cancelled / no-show records release the slot. Configure with the field name and the values that should NOT count: excludeWhen: { field: "status", in: ["cancelled","no_show"] }.
• minLeadTimeMinutes / maxLeadTimeDays — booking-window bounds. Server clock authoritative.
• durationField + defaultDurationMinutes — for variable-duration slots (60-minute haircut vs 30-minute trim).
• businessHours — opening hours and closed days. Give each day of the week its open/close windows (e.g. Tue–Sat 10:00–19:00, closed Sunday and Monday); split a day into two windows for a lunch break. Bookings outside opening hours, or on a closed day, are rejected automatically. Leave it off for 24/7 availability.
• timezone — the time zone your opening hours are in (e.g. "Europe/London", "America/New_York", "Asia/Hong_Kong"). Set this so a "10:00–19:00" day means 10am–7pm local time, with daylight-saving handled for you. Without it, opening hours are read in UTC — set it for any business not operating in UTC.

Tell the AI "TutorHub-style booking — students pick a tutor and a 60-minute slot, cancellations free the slot, minimum 1-hour advance booking, open Tue–Sat 10am–7pm London time" and it will wire availabilityCheck — including opening hours and time zone — automatically. The customer page surfaces booked slots without exposing customer identity (slot density is the visible signal — privacy preserved).

Letting customers actually book (the public submit form). The date-picker only shows availability — to take a booking you also need a public form that submits a record. The simplest free-booking setup is: a form with the slot date-picker plus the customer's details (name, email), wired to the booking table's "create" action, with that action allowed on the public page (the "Submit" public mode) and the table set to customer-scoped so each visitor only sees their own bookings. Ask for "a public booking form where a customer picks a slot, enters their name and email, and submits" and the platform builds exactly that — every booking still passes the server-side conflict, lead-time, and opening-hours checks. Only reach for a cart (multi-item) when you're taking payment to confirm the slot (see Payments); a plain free booking does not need one.

Live Workflow Status (Order Tracking)

If your app has cross-app workflows (e.g. a customer order in a public app fires a record into an admin/kitchen app), you can show the customer a live status badge:

1. Add a workflow-status component to the customer-facing nav, bound to the customer's order id.
2. Toggle "Show workflow status to public visitors" in app settings (off by default for privacy).
3. The badge polls every 2 seconds and shows: queued → processing → succeeded / failed. It stops polling when the workflow finishes or after 5 minutes.

Error messages on the public page are sanitized to short, customer-safe phrases — internal details never leak.

Publish Safety Rail

If your app has a publicly readable schema without any of the above (no customer-scoped flag, no filter config, no explicit "this is intentionally a public listing" opt-in), the platform blocks the publish and tells you exactly which schema needs a coverage choice. This catches the most common silent leak — a builder marks orders as public-readable to show the order-status page but forgets to scope it, and every visitor would otherwise see every other customer's orders.

---

9. MCP Integration (Agent Access)

Every app can be made accessible to external AI agents via the Model Context Protocol (MCP). This means tools like Claude, ChatGPT, or custom agents can read, create, and modify data in your app programmatically.

Enabling Agent Access

Your app must be in Live mode to use MCP (click Go Live in the toolbar). Free tier apps get a 30-day MCP trial; paid tiers get permanent access.

Click Agent ON in the toolbar to enable the MCP endpoint for this app.

Viewing the MCP Endpoint

Click the MCP button in the toolbar (visible when Agent is ON) to see:

• Endpoint URL -- the MCP endpoint for this app
• Agent token management -- create and manage access tokens

Managing Agent Tokens

Tokens authenticate external agents. From the MCP panel:

1. Click + Create Token to generate a new token
2. Copy the token immediately -- it is shown only once and cannot be retrieved later
3. Each token shows its name, expiration date, and last used date
4. Click Revoke to permanently deactivate a token

---

10. API Connectors

If your app uses external APIs (e.g., weather data, news feeds, payment gateways), the app editor shows a Connector Bindings panel. This appears automatically when your app has API-connected actions.

Setting Up Connectors

Each API action uses a "connector slot" that needs to be linked to an actual connector:

1. Click Configure Connectors to expand the panel
2. For each slot, select a connector from the dropdown
3. If you need a new connector, click + New Connector and fill in:
   • Name -- a label for this connector (e.g., "OpenWeather API")
   • Base URL -- the API's root URL (e.g., https://api.openweathermap.org)
   • Auth Type -- None, Bearer Token, API Key, or Basic Auth
   • Credentials -- your API key or token (encrypted at rest with AES-256-GCM)

You can create up to 20 connectors per account.

---

11. Publishing to the Marketplace

Share your app with the community by publishing it as a template.

1. Click Publish in the app editor toolbar.
2. Select a category from the 8 available categories.
3. Add up to 10 tags to help users discover your template.
4. Your app must meet quality requirements:
   • Name: at least 3 characters
   • Description: at least 30 characters
   • At least 1 data table with 2 or more fields
   • At least 2 actions
5. Click Publish to submit. Your template appears in the marketplace for others to install.

---

12. AI Models & Settings

Access settings from the sidebar: AI Models & Keys.

Default AI Model

Choose which model the AI uses when generating or modifying your apps:

• Gemini 2.5 Flash -- free, the platform default. No API key needed
• GPT 5.4 -- premium model, available on paid tiers or via BYOK
• BYOK (Bring Your Own Key) -- use your own API key to unlock additional models:

Managing API Keys

To unlock BYOK models:

1. Select a provider from the dropdown
2. Paste your API key
3. Click Add Key -- the key is validated automatically
4. If valid, it appears in your saved keys list with a green status indicator
5. To remove a key, click Remove next to it

All API keys are encrypted at rest with AES-256-GCM -- they are never stored in plain text. Only the last few characters are shown for identification.

OpenRouter

OpenRouter gives you access to 200+ models from a single API key. After adding an OpenRouter key:

• Choose from 4 curated presets in the model dropdown
• Or select Custom Model ID and enter any model ID from openrouter.ai/models

---

13. Spark Companion

Every Web-Nothing user has a unique AI companion called a Spark. Your Spark is determined when you create your account and revealed when you choose to discover it.

Discovering Your Spark

In the sidebar (or in Settings), you will see a Discover Your Spark button. Click it to reveal your companion. Each Spark has:

• A unique name and emoji
• Rarity tier (common to legendary)
• Species and element type
• Personality traits and a quote
• Stats (Insight, Charm, Power, Speed, Luck)

Your Spark appears in the sidebar after hatching. It is purely cosmetic and adds a personal touch to your workspace.

---

14. Plans & Pricing

Web-Nothing has a 5-tier monthly subscription system. Visit the Pricing page for full details.

Free Tier ($0)

Every account starts free with:

• 2 dev apps + 1 live app
• 10 MB image storage per app
• Gemini 2.5 Flash AI model (20 basic prompts/month)
• Public shareable pages (with watermark)
• Template marketplace access
• API connectors and webhooks
• Data export (JSON, CSV, PDF)
• 30-day MCP trial on live apps

Paid Tiers

All paid tiers include: permanent MCP access, branding removal (Starter+), GPT 5.4 access, and priority support.

Dev / Live Mode

Apps start in Dev mode (watermark banner, 1,000 visits/month, 30-day MCP trial). Click Go Live in the workspace toolbar to publish. Live mode removes the dev watermark, enables unlimited visits (paid tiers), and permanent MCP access. Branding removal requires Starter tier or above.

Prompt Packs

Need more prompts mid-cycle? Buy one-time prompt packs from the Pricing page:

• Basic Pack ($1) -- 50 extra basic prompts
• Premium Pack ($1) -- 5 extra premium prompts
• Combo Pack ($5) -- 300 basic + 15 premium prompts

Prompt pack credits reset when your subscription renews.

Manage Subscription

Click Manage Subscription on the Pricing page to access the Stripe Customer Portal where you can upgrade, downgrade, or cancel your plan.

---

15. Sending Feedback

A floating ? button appears in the bottom-right corner of every workspace page. Click it to send feedback to the Web-Nothing team.

Choose a feedback type:

Write a description (up to 2,000 characters) and click Submit. The team is notified instantly.

---

16. Sidebar Navigation

The workspace sidebar provides quick access to all areas:

To delete an app, hover over it in the sidebar and click the X button. You will be asked to confirm before deletion.

On mobile, the sidebar collapses automatically. Tap the menu icon in the top header to toggle it.

---

Next Steps