Use Amazon Q Developer with Amplify

Amazon Q Developer is a generative artificial intelligence (AI) powered conversational assistant that can help you understand, build, extend, and operate AWS applications. You can ask questions about AWS architecture, your AWS resources, best practices, documentation, support, and more. Amazon Q is constantly updating its capabilities so your questions get the most contextually relevant and actionable answers. When used in an integrated development environment (IDE), Amazon Q provides software development assistance. Amazon Q can chat about code, provide inline code completions, generate net new code, scan your code for security vulnerabilities, and make code upgrades and improvements, such as language updates, debugging, and optimizations.

Q Developer in the IDE provides inline code suggestions in real time. As you write code, Amazon Q automatically generates suggestions based on your existing code and comments. When you start typing out single lines of code or comments, Amazon Q makes suggestions based on your current and previous inputs. Inline suggestions are automatically enabled when you download the Amazon Q extension.

Setting up Q Developer

Amazon Q is available as an extension in Visual Studio Code and a plugin in JetBrains. Amazon Q is also available in the AWS Toolkit for Visual Studio. To get started, please visit Install Amazon Q Developer.

Use Q Developer - Inline code suggestions in your Amplify project

Amplify generates two folders in your backend directory, auth and data, which contain TypeScript AWS CDK definitions for each of these resources. We’ll build out the schema for our API through the help of Amazon Q Developer's inline code suggestion capabilities.

Step 1: Open amplify/data/resource.ts and comment out the default schema for Todo provided.

amplify/data/resource.ts
import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
// const schema = a.schema({
//   Todo: a
//     .model({
//       content: a.string(),
//     .authorization(allow => [allow.publicApiKey()]),

Step 2: In a new line below the commented schema, enter a comment to generate the schema using natural language. For example, generate a restaurant model with the following fields: id, name, description, address, image, rating, style. Rating can be a float value. Authorization should allow public. Press Enter for a new line and wait for Amazon Q Developer to generate inline code suggestion for your schema.

amplify/data/resource.ts
import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
// const schema = a.schema({
//   Todo: a
//     .model({
//       content: a.string(),
//     .authorization(allow => [allow.publicApiKey()]),
// generate a restaurant model with the following fields: id, name, description, address, image, rating, style. Rating can be a float value. Authorization should allow public.

Step 3: Select the inline code suggestion generated by Amazon Q developer. The inline code suggestion feature assists you in defining the schema and hover over the output to select from other options.

Note: You can also trigger inline code suggestion feature by invoking Amazon Q Developer manually using Option+C keyboard shortcut in VS Code. For more commands, please refer to the Commands tab in the Amazon Q extension.

Step 4: Make any required changes to the schema and save the amplify/data/resource.ts file. This will trigger a sandbox deployment and your new data model will be deployed

Use Q Developer - workspace in your Amplify project

Adding @workspace to your question in Amazon Q automatically incorporates the most relevant parts of your workspace code as context, using an index that updates periodically. For more information on @workspace functionality, please visit Amazon Q Developer - Workspace Context.

The files below provide detailed guides that can be included as context with the @workspace command, enhancing Amazon Q's accuracy in generating AWS Amplify Gen 2 code.

Download the files and follow the steps below to use the @workspace in your Amplify project

Step 1: Create a folder in the root of your project and give a descriptive name such as context. Add the files downloaded above to this folder.

Step 2: Open Amazon Q Developer Chat in your IDE and type @workspace to enable workspace indexing. Follow Amazon Q's prompts to set up indexing for your project directory.

Step 3: After successful indexing, reference the markdown file content in your queries to Amazon Q. Examples:

Terminal

@workspace follow AMPLIFYRULES to develop a data model schema for a freelance marketplace using Amplify Gen 2. Include models for freelancers, clients, projects, bids, and reviews. Use Amplify Gen 2 to fetch a list of projects

Terminal

@workspace follow AMPLIFYRULES to design a data schema for an event management application using Amplify Gen 2. Include models for users, events, and tickets. Show me how to use Amplify Gen 2 to fetch a list of events.