Neon Database

Frontend allows you to connect to a cloud database solution powered by PostgreSQL with Neon. Once connected, you can interact with your database directly through the AI chat or use the Database viewer to manage your data.

Connecting Your Database

When you connect a Neon database to your project, Frontend automatically provisions a Neon PostgreSQL database for you. Once connected, the Frontend AI will be able to perform actions on your database like creating new tables or querying your data.

Connection String

Neon requires a PostgreSQL connection string built from environment variables. Add the following environment variables to your project:

• DB_USERNAME - Your Neon database username
• DB_PASSWORD - Your Neon database password
• DB_HOST - Your Neon database host
• DB_TABLE - Your Neon database name

Then construct the connection string in your code:

const connection = `postgresql://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}/${process.env.DB_TABLE}?channel_binding=require&sslmode=require`;

Example Usage

app/api/db/route.ts

import { NextResponse } from 'next/server';
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
import { sql } from 'drizzle-orm';

export async function POST(request: Request) {
  try {
    const { query } = await request.json();

    if (!query) {
      return NextResponse.json(
        { error: 'SQL query is required' },
        { status: 400 }
      );
    }

    const connection = `postgresql://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}/${process.env.DB_TABLE}?channel_binding=require&sslmode=require`;
    const client = neon(connection, {
      disableWarningInBrowsers: true, // We run Next.js in the browser
    });
    const db = drizzle(client);

    // Execute raw SQL using drizzle's sql template
    const result = await db.execute(sql.raw(query));

    return NextResponse.json({ data: result });
  } catch (error) {
    console.error('Database query error:', error);
    return NextResponse.json(
      { error: 'Failed to execute query' },
      { status: 500 }
    );
  }
}

Working with Your Database

After connecting your database, you have two ways to interact with it:

AI Chat

You can run queries and execute commands directly from the AI chat. Simply describe what you want to do with your data, and the AI will generate and execute the appropriate SQL queries. For example:

• “Create a table for storing user contacts”
• “Insert a new user into the users table”
• “Show me all orders from the last 30 days”
• “Update the status of order #123 to shipped”

Database Viewer

Use the Database viewer to visually manage your data. The viewer allows you to:

• Browse tables and view their structure
• View, add, edit, and delete records
• Execute custom SQL queries
• Export data as needed

Use Cases

A Neon database opens up many possibilities for your agents:

• Storing contacts - Build contact forms that save submissions to your database
• User data - Store user profiles, preferences, and account information
• Stripe e-commerce - Track products, orders, customers, and inventory alongside your Stripe integration
• Agent memory - Persist conversation history, user context, and agent state
• Content management - Store blog posts, articles, and media references
• Complex applications - Build full-featured agents with persistent data storage