Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated May 6, 2024

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