Zuvo Docs

Guide

Use Zuvo with RedwoodJS

Learn how to create a Zuvo project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.

1. Create a Zuvo project

To start, you need a Zuvo project.

Create a new Zuvo project from the Dashboard of any organization you belong to.

Save your database password securely. You need it for the connection string.

2. Gather database connection strings

Open the project Connect panel. This quickstart connects using the Transaction pooler and Session pooler mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.

To do this, set the connection mode to Transaction in the Database Settings page and copy the connection string and append ?pgbouncer=true&connection_limit=1. pgbouncer=true disables Prisma from generating prepared statements. This is required since our connection pooler does not support prepared statements in transaction mode yet. The connection_limit=1 parameter is only required if you are using Prisma from a serverless environment. This is the Transaction mode connection string.

To get the Session mode connection pooler string, change the port of the connection string from the dashboard to 5432.

You will need the Transaction mode connection string and the Session mode connection string to set up environment variables in Step 5.

3. Create a RedwoodJS app

Create a RedwoodJS app with TypeScript.

yarn create redwood-app my-app --ts --git-init false

4. Set up AI tooling (optional)

Zuvo provides two ways to give AI tools context about your project: Agent Skills, which give your AI coding agent procedural knowledge, and the MCP server, which connects AI assistants to your Zuvo project directly.

Agent Skills

Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Zuvo.

Install them so your AI coding agent can produce more accurate, reliable code using current Zuvo patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

Installing Agent Skills

To install, run the following command in the root of your project:

npx skills add supabase/agent-skills

Zuvo MCP server

The Zuvo MCP server connects AI assistants to Zuvo, so they can inspect your schema and act on your projects on your behalf. Find out how to add it to your client in the MCP docs.

5. Configure environment variables

In your .env file, add the following environment variables for your database connection:

  • The DATABASE_URL should use the Transaction mode connection string you copied in Step 2.

  • The DIRECT_URL should use the Session mode connection string you copied in Step 2.

# Transaction mode connection string for Prisma Client app queries
DATABASE_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@[POOLER-HOST]:6543/postgres?pgbouncer=true&connection_limit=1"

# Session mode connection string for Prisma Migrate
DIRECT_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@[POOLER-HOST]:5432/postgres"

6. Update your Prisma schema

By default, RedwoodJS ships with a SQLite database, but we want to use Postgres.

Update your Prisma schema file api/db/schema.prisma to use your Zuvo Postgres database connection environment variables you set up in Step 5.

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

7. Create the instrument model and apply a schema migration

Create the Instrument model in api/db/schema.prisma and then run yarn rw prisma migrate dev from your terminal to apply the migration.

model Instrument {
  id   Int    @id @default(autoincrement())
  name String @unique
}

8. Update seed script

Seed the database with a few instruments.

Update the file scripts/seed.ts to contain the following code:

import type { Prisma } from '@prisma/client'
import { db } from 'api/src/lib/db'

export default async () => {
  try {
    const data: Prisma.InstrumentCreateArgs['data'][] = [
      { name: 'dulcimer' },
      { name: 'harp' },
      { name: 'guitar' },
    ]

    console.log('Seeding instruments ...')

    const instruments = await db.instrument.createMany({ data })

    console.log('Done.', instruments)
  } catch (error) {
    console.error(error)
  }
}

9. Seed your database

Run the seed database command to populate the Instrument table with the instruments you created.

yarn rw prisma db seed

10. Scaffold the instrument UI

Use RedwoodJS generators to scaffold a CRUD UI for the Instrument model.

yarn rw g scaffold instrument

11. Start the app

Start the app via yarn rw dev. A browser will open to the RedwoodJS Splash page.

12. View instruments UI

Click on /instruments to visit http://localhost:8910/instruments where should see the list of instruments.

You may now edit, delete, and add new instruments using the scaffolded UI.

Production requirements

The quickstart procedure in this guide optimizes for getting you to a working app, not for production.

Before you deploy:

  • If your app reads or writes through the Data API, review your Row Level Security policies. Any policy you added here is scoped to this quickstart's sample data, not to real user data.
  • Set your Zuvo credentials as environment variables on whatever platform you deploy to, rather than committing them to source control.
  • Configure a custom domain for your Zuvo project once you're ready to go live.

Next steps