Docs
Start building
How-to Guides

Add a database and real data

From "store this" to browsing rows, without leaving the workspace.

1 min read · 3 sections

Most apps hit the moment where fake data has to become real. This guide takes a TipJar-style project from no persistence to a browsable database.

Ask for it

In the Code chat:

Store each tip: creator, sender address, amount, timestamp. Show the latest ten on the dashboard.

The agent designs the table, wires the queries, and updates the UI. The first time a project needs real data, Modus provisions the database: connect Supabase with one OAuth click when prompted, or let it use a container-local SQLite file for something lighter. (Bring your own Postgres with a connection string if you already have one.)

See what it built

Open the Database panel in Code:

  • Schema: an ER diagram of your tables and the relationships between them.
  • Data: browse rows in a grid; add, edit, delete, filter, and bulk-select.
  • SQL: run any query and get columns, rows, and timing back.

Trust but verify

Two habits pay off:

  • Watch for the drift banner. If the live schema changes outside Modus's view (a migration run elsewhere, a column added by hand), a drift banner surfaces it; apply the change to bring Modus's view back in sync.
  • Edit data in the panel, structure in the chat. Fixing one row by hand is what the data grid is for. Changing what the app stores is a chat instruction, so the code and the schema move together.

Full reference: Database.