Get started with Firebase SQL Connect using AI agents

This quickstart shows you how to use Firebase SQL Connect with your AI coding tool to rapidly build full-stack, relational applications. By equipping your agent with Firebase Agent Skills, you won't need to write boilerplate database code or configure endpoints manually. You will learn how to set up your local project, configure your AI assistant, and use a single prompt to generate a secure PostgreSQL schema, GraphQL operations, and a complete React frontend. You can use what you learn here to build frontends for any of the platforms Firebase SQL Connect supports.

Before you begin

To complete this quickstart, ensure your environment is set up with the following. If you need step-by-step help for your specific operating system, see the standard setup guide:

  • Node.js: Install Node.js to run the Firebase CLI and power your generated React frontend.

  • Firebase CLI: Install the Firebase CLI globally:

    npm install -g firebase-tools

  • AI Coding Tool: Install a modern AI-powered editor (such as Antigravity, Android Studio, Cursor, or Windsurf).

Set up your workspace

First, open your preferred AI coding tool and create a new project directory. Open your tool's integrated terminal and run the initialization command:

firebase init dataconnect

This command guides you through initializing your project. When prompted, choose the options to:

  • Create a new Firebase project
  • Skip Gemini schema generation
  • Create a new Cloud SQL instance
  • Create a React template
  • Select Yes to install Agent Skills for Firebase

Generate your app with AI

With Firebase Agent Skills installed, your AI assistant can generate your SQL Connect schema, operations, and frontend code directly from a high-level prompt.

Copy and paste one of the following prompts into your AI assistant to generate your backend, database relationships, and React frontend:

Example 1: Movie review app

Prompt:

Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.

Example 2: E-commerce storefront

Prompt:

Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.

Example 3: Multi-author blog

Prompt:

Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.

What your AI Assistant creates

When you run these prompts, your AI assistant automatically handles the technical heavy lifting:

  • Database Schema (dataconnect/schema/schema.gql): Translates your requirements into relational tables using the @table directive, automatically managing foreign keys and primary keys.
  • GraphQL Operations (dataconnect/[connector_name]/*.gql): Generates the exact queries and mutations required by your app, secured by the @auth directive.
  • Generated SDK (src/dataconnect/): Uses the Firebase CLI to instantly generate a strictly-typed client SDK based on your schema and operations.
  • React Frontend (src/): Wires up a complete, beautifully styled React application that uses your generated SDK to talk to your new backend.

Deploy to production

To deploy your schema, queries, and mutations to production, run the following command in your terminal:

firebase deploy --only dataconnect

After deploying, visit the Firebase console to view your live schema and run operations directly against your Cloud SQL instance.

Next steps

Now that you've completed the quickstart, here are some next steps:

  • Explore a quickstart app repository and build a SQL Connect app by following our codelabs.
  • Add data to your database, and monitor your SQL Connect service in the Firebase console.
  • Learn more about schema, query and mutation development.
  • Learn more about client SDKs and Admin SDKs.