AWS Database Blog

Vibe code with AWS databases using Vercel v0

Developers are realizing the power of generative AI-assisted development tools. This new generation of development tools can use the power of large language models (LLMs) that understand natural language prompts and turn them into fully functional code. One such category of tools is generative UI. With generative UI tools, developers can create full stack applications with a modern UI by simply expressing their desired outcome in a natural language.

In this post, we explore how you can use Vercel’s v0 generative UI to build applications with a modern UI for AWS purpose-built databases such as Amazon Aurora, Amazon DynamoDB, Amazon Neptune, and Amazon ElastiCache.

Solution overview

v0 is a pair programmer from Vercel that lets you describe your ideas in natural language and generates both the code and UI for your project. v0 produces code using open-source technologies like React, Tailwind CSS, and Shadcn UI. You can deploy what you create with v0 to Vercel, or you can deploy the application code on the service of your choosing, such as Amazon Elastic Compute Cloud (Amazon EC2), Amazon Elastic Container Service (Amazon ECS), or Amazon Elastic Kubernetes Service (Amazon EKS).

In the following sections, we demonstrate how to start using v0, and provide several examples of creating applications using its generative UI features.

Prerequisites

To start, you must have a Vercel account. We recommend using OpenID Connect (OIDC) to securely interact between v0 and your AWS account, which we discuss in the next section.

If you plan to use virtual private cloud (VPC) based databases such as Amazon Aurora MySQL-Compatible Edition (or Amazon Aurora PostgreSQL-Compatible Edition) or ElastiCache, you must also have the necessary AWS database resources deployed in your AWS account. For example, if you plan to build an application for Aurora PostgreSQL-Compatible and the RDS Data API, you need an Aurora PostgreSQL cluster and the RDS Data API enabled.

You can create Amazon Aurora DSQL, DynamoDB, and Neptune applications from the v0 interface directly, because they don’t require a VPC and related resources such as a subnet or security groups.

Set up a secure OIDC connection with Vercel

When you build applications that use AWS resources such as Aurora, you make requests to AWS services that must be signed with an AWS access key. However, we strongly recommend that you don’t store AWS credentials long-term in applications outside AWS. Instead, configure your applications to request temporary AWS security credentials dynamically when needed using OIDC federation. The supplied temporary credentials map to an AWS role that only has permissions needed to perform the tasks required by the application.

Before you can use the OIDC authentication, you must complete the following steps:

  1. Configure the OIDC identity provider in your AWS account.
  2. Create an AWS Identity and Access Management (IAM) role and grant privileges needed to use AWS resources your will need to access in your application.
  3. Note the Amazon Resource Name (ARN) of the IAM role you just created.
  4. Add a trust policy. The following is an example policy: 
    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Federated": "arn:aws:iam::[YOUR AWS ACCOUNT ID]:oidc-provider/oidc.vercel.com/[TEAM_SLUG]"
      },
      "Action": "sts:AssumeRoleWithWebIdentity",
      "Condition": {
        "StringEquals": {
          "oidc.vercel.com/[TEAM_SLUG]:sub": "owner:[TEAM SLUG]:project:[PROJECT NAME]:environment:production",
          "oidc.vercel.com/[TEAM_SLUG]:aud": "https://vercel.com/[TEAM SLUG]"
        }
      }
    }
  ]
}

    A URL slug (TEAM SLUG in this case) is the part of a URL that identifies a specific page in human-readable keywords. It is typically located at the end of the URL and is designed to be straightforward to read and understand. For example, in the URL www.example.com/blog/url-slug-explained, url-slug-explained is the slug.

  5. Add IAM role ARN to your project using environment variables.

For detailed instructions, refer to Connect to Amazon Web Services (AWS).

Next, we review the process of building your application using v0.

Start your first vibe coding session with v0

In this section, we explore the steps to start a vibe coding session with v0.

Set up a v0 project

To create a project on the v0 dev console, choose New project. Let’s call it TodoAPP. In this example, we use Aurora PostgreSQL-Compatible, but you can follow the process with other AWS database services, such as DynamoDB.

Use a simple prompt

Start with a simple prompt such as the following:

Build a Todo app using Aurora PostgreSQL and RDS DATA API and OIDC credentials.

v0 will generate the code and give you a preview of the application.You will see a dialog for adding environment variables using the chat window. These environment variable values are used by the application to replace placeholder values such as the IAM role name, AWS Region, database name, and other relevant information needed to successfully complete a build.

We use the following values:

  • AWS_REGION – The Region name
  • AWS_ROLE_ARN – The IAM role ARN for OIDC authentication
  • RDS_RESOURCE_ARN – The Aurora cluster ARN
  • RDS_SECRET_ARN – The AWS Secrets Managers secret ARN used for DB authentication
  • RDS_DATABASE – The database name

Connect to a Git provider

Now that you have a v0 project, you can configure a Git repo so you can make changes, iterate your code, and durably sync the changes. Complete the following steps:

  1. On the Project settings menu, choose Git.
  2. Under Connected Git Repository, connect your code to your Git provider of choice.

Refer to Deploying Git Repositories with Vercel for detailed information.

Set up the test environment

In your development environment, complete the following steps to set up a local test environment:

  1. Install the Vercel CLI: 
    npm i -g vercel
  2. Clone the Git repo that you connected in the previous step. 
    git clone <repo url>
  3. Link the cloned repo with your working project using following command: 
    vercel link
  4. When prompted, provide your Vercel credentials and name your project.
  5. Pull the environment variables that you defined in your project, including the Vercel OIDC token: 
    vercel env pull

Now you are ready to iterate your application code design using v0.

Iterate on v0 to build an application

After you complete the preceding steps, you can continue refining your prompt and updating the application until it looks and behaves the way you want.

  1. Go back to the v0 console and open the project.
  2. Choose the last prompt to pick up from the last session.
  3. Choose the Git icon and push your code.
  4. In your dev environment, pull the latest code: 
    git pull
  5. Start a dev server using the following command: 
    pnpm run dev
  6. Validate your application by connecting to the dev URL in your browser. For example, http://localhost:3000.
  7. If you need to make changes to the code, iterate on the preceding steps until your application looks and operates how you want.

Deploy your application

When your code is ready, you can deploy your application directly on Vercel by choosing Publish and then choosing Deploy to Production.

You can also publish your code on your preferred service, such as an EC2 instance, Amazon ECS, Amazon EKS, or another host where the production build can run. To do so, simply build the production version using the following command and follow service-specific steps for deployment:

pnpm build

Next, we explore examples of how you can build full stack applications using AWS databases and v0.

Build a todo application for Aurora PostgreSQL-Compatible

In this section, we demonstrate how you can build a simple todo application using Aurora PostgreSQL-Compatible. The instructions also apply to Aurora MySQL-Compatible. We start by using the following prompt:

Build todo app: Aurora PostgreSQL + RDS Data API + AWS OIDC (IAM ARN). 
No JWT/user management. Auto-create todos table. 
Use env vars: AURORA_CLUSTER_ARN, AURORA_SECRET_ARN, AURORA_DATABASE_NAME.

Requirements:
RDS Data API: named parameters with name/value properties
SQL: :parameterName syntax (not ?)
Next.js App Router: await params in dynamic routes
Handle null results
Validate all SQL parameters

v0 will start generating the code. The following video demonstrates the end-to-end process.

Build a multi-Region todo application for Aurora DSQL

Aurora DSQL is a multi-Region active-active relational database with PostgreSQL dialect compatibility. In this example, we build a todo application that can be used from two Regions simultaneously. We start by using the use the following prompt for v0:

Todo app: Aurora DSQL+Vercel OIDC(IAM ARN). 
UI: 2 side-by-side panels showing region names. Add todos from either region, refresh sync. 
Auth: DsqlSigner(@aws-sdk/dsql-signer) hostname, token password, ssl:{rejectUnauthorized:true}, awsCredentialsProvider(@vercel/functions/oidc). 
DB: database name:postgres, User provides schema name + 2 regional endpoints.UUID PKs: gen_random_uuid(), No triggers.

The following video demonstrates the end-to-end process.

Build a note-taking application for DynamoDB

We build a simple note-taking application for DynamoDB using the following prompt:

Build a note taking app. The data for the notes should be shared in AWS DynamoDB, which you can access using OIDC provider. I will provide the role ARN and the Region.

The following video demonstrates the end-to-end process.

Build a real-time leaderboard application for ElastiCache Serverless

In this example, we build a real-time leaderboard application that showcases Valkey’s powerful data structures—specifically Sorted Sets for rankings and HyperLogLog for unique visitor counting.To work with v0 and ElastiCache, you must have the following additional prerequisites:

  • An ElastiCache Serverless cluster in your AWS account
  • Vercel Secure Compute configured (available with the Enterprise plan) for VPC connectivity
  • VPC peering set up between your ElastiCache VPC and Vercel’s Secure Compute
  • Security groups configured to allow traffic from Vercel’s gateway IPs

Use the following prompt to generate your ElastiCache Serverless application:

Real-time coding leaderboard app using AWS ElastiCache Serverless + io-valkey (TLS).
Features:
Live top 10 leaderboard (SORTED SET: ZADD/ZREVRANGE)
Visitor counter (HYPERLOGLOG: PFADD/PFCOUNT)
Score submission form
Connection test page (status/response times)
Load generation buttons
Docs: https://github.com/valkey-io/iovalkey#tls-options
Env: VALKEY_ENDPOINT, VALKEY_PORT (6379)

The following video demonstrates the end-to-end process.

Build a flight route finding application using Neptune

In this example, we use Amazon Neptune Analytics to build an application that finds potential flight routes from one airport to another airport. This application uses the AWS SDK for JavaScript v3 NeptuneGraphClient and a dataset from Practical Gremlin to build an application. Before starting this project, you must create a Neptune Analytics graph and load the air routes dataset. Then you can run the following openCypher command using the CLI, replacing the graph identifier and Region information with the information for the Neptune Analytics graph you created:

aws neptune-graph execute-query \ 
--graph-identifier <graph-id> \ 
--region <region> \ 
--query-string "CALL neptune.load({format: 'csv', source: 's3://aws-neptune-customer-samples-<INSERT YOUR REGION HERE>/sample-datasets/gremlin/air-routes/',region : '<INSERT YOUR REGION HERE>'})" \ 
--cli-read-timeout 0 --language open_cypher /tmp/out.txt

Now that we have finished the prerequisites, we are ready to have v0 generate our application. We use the following prompt:

Create a simple application that runs openCypher queries over an 
Amazon Neptune Analytics database using the AWS SDK. 
For this application, take in a start and end airport code and 
find any 10 paths with 2 hops or less between them and display the paths. 
The data loaded in the graph is from the Practical Gremlin book by Kelvin Lawrence.
Key Considerations:
When creating the application use the neptune-graph service and the ExecuteQueryCommand method and pass the envrionment variable "NEPTUNE_GRAPH_ID" as the graphIdentifier and 'OPEN_CYPHER' as the language.
When processing the resuls of the graph query you need to "await response.payload.transformToString()" and then load that into a JSON object

The following video demonstrates the end-to-end process.

Cleanup

If you don’t plan to use the applications you deployed on Vercel, make sure to delete the deployment. Delete any resources that you don’t intend to use such as the OIDC connections, IAM roles and any database instances.

Conclusion

The world of vibe coding is transformative. Generative UI tools such as Vercel’s v0 are on the frontier of democratizing design, helping developers translate natural language into code with unprecedented ease and creativity. In this post, we demonstrated how to securely configure and use the power of v0 to start on your vibe coding journey with AWS purpose-built databases.

Build your first GenUI application with Vercel v0 and AWS purpose-built databases. We can’t wait to see what new and innovative apps you build.

About the authors

Aditya Samant

Aditya Samant

Aditya is a database industry veteran with over two decades of experience working with commercial and open-source databases. He currently works at AWS as a Principal Database Specialist Solutions Architect. In his role, he works with customers designing scalable, secure, and robust cloud-native architectures. Aditya works closely with the service teams and collaborates on designing and delivery of new features for Amazon managed databases.

Dave Bechberger

Dave Bechberger

Dave is a Principal Graph Architect with the Amazon Neptune team. He has over two decades of experience in databases and distributed data applications. For the past decade he has focused on building graph-based distributed data applications. He used his years of experience working with customers to build graph database-backed applications as inspiration to co-author Graph Databases in Action by Manning.

Amrith Kumar

Amrith Kumar

Amrith is a DynamoDB Sr. Principal Engineer.

Swarnaprakash Udayakumar

Swarnaprakash Udayakumar

Swarnaprakash is a Principal Engineer at AWS, where he has been leading technical innovations across several AWS services over the past 11 years. Prakash led the technical strategy and execution for several key initiatives within the Amazon ElastiCache service such as Serverless, Auto-scaling and large cluster support.