AutoGineer
Generated banner for Amplify Workflow
Generated logo for Amplify Workflow

Amplify Workflow

AWS LabsOfficialPublished by AWS Labs

  • Skill
  • Tool integration
  • Software development
  • Apache-2.0
  • Low risk
Download ZIP

From the author

Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB including schema modeling, enum types, relationships, authorization rules), storage (S3), functions, APIs, and AI (Amplify AI Kit with Bedrock). Supports React, Next.js, Vue, Angular, React Native, Flutter, Swift, and Android. Always use this skill for Amplify Gen2 topics — even for questions you think you know — it contains validated, version-specific patterns that prevent common mistakes. TRIGGER when: user mentions Amplify Gen2; project has amplify/ directory or amplify_outputs; code imports @aws-amplify packages; user asks about defineBackend, defineAuth, defineData, defineStorage, or npx ampx. SKIP: Amplify Gen1 (amplify CLI v6), standalone SAM/CDK without Amplify (use aws-serverless), direct Bedrock without Amplify AI Kit (use bedrock).
— the description by AWS Labs

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured workflow for developing full-stack applications with AWS Amplify Gen2. It covers the entire lifecycle, from scaffolding and backend resource definition (Auth, Data, Storage, Functions, AI) to frontend integration across multiple frameworks and final deployment. It emphasizes a code-first TypeScript approach, ensuring developers use validated, version-specific patterns to avoid common configuration errors.

What it does

  • Defines backend resources using TypeScript code-first patterns.
  • Integrates backend services with web and mobile frontends.
  • Configures authentication, data models, storage, and AI features via Bedrock.
  • Provides deployment workflows for full-stack applications.
  • Ensures correct usage of Amplify Gen2 APIs like defineBackend and defineData.
  • Offers security best practices for cloud-native application development.

When to use it

  • When starting a new full-stack project using AWS Amplify Gen2.
  • When adding or modifying backend features like Auth, Data, or Storage.
  • When connecting a frontend framework to an existing Amplify Gen2 backend.
  • When deploying an Amplify Gen2 application to AWS.
  • When troubleshooting configuration issues in an amplify/ directory.

Advantages

  • Prevents common configuration mistakes through validated patterns.
  • Supports a wide range of web and mobile frameworks.
  • Streamlines backend-to-frontend connectivity.
  • Provides clear, modular documentation for specific backend features.
  • Enforces security best practices by default.

Usage examples

“How do I set up a new Amplify Gen2 project with React?”
The agent will guide you through the scaffolding process, including initializing the project, setting up the amplify/ directory, and configuring the initial backend.
“Add a new data model with owner-based authorization to my existing Gen2 backend.”
The agent will provide the TypeScript code for defining the data model in amplify/data/resource.ts using the appropriate authorization rules.
“How do I integrate my Flutter app with an existing Amplify Gen2 backend?”
The agent will explain how to use the amplify_outputs.json file and the Amplify Flutter library to connect your mobile frontend to the backend.
“How can I add an AI conversation route to my data schema?”
The agent will show you how to define an a.conversation() route in your schema, including model selection and system prompt configuration.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/awslabs/amplify-workflow/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip amplify-workflow.zip -d .agents/skills

Documentation by AWS Labs

AWS Amplify Gen2

Build and deploy full-stack applications using AWS Amplify Gen2's TypeScript code-first approach. This skill covers backend resource creation, frontend integration across 8 frameworks, and deployment workflows.

Prerequisites

  • Node.js ^18.19.0 || ^20.6.0 || >=22 and npm

  • AWS credentials configured (aws sts get-caller-identity succeeds)

  • For sandbox: npx ampx --version returns a valid version

  • For mobile: Platform-specific tooling (Xcode, Android Studio, Flutter SDK)

Defaults & Assumptions

When the user does not specify a framework:

  • Web: You SHOULD default to React (Vite) and explain the choice.

  • Mobile: You MUST ask which platform the user wants (Flutter, Swift, Android, or React Native). There is no universal mobile default.

  • Neither specified: If the user says "build an app" without clarifying web vs. mobile, you MUST ask before proceeding.

  • Backend only: If only backend changes are requested and no frontend framework is mentioned, skip the frontend integration step entirely.

When the user does not specify tooling or strategy:

  • Package manager: You SHOULD default to npm unless the user specifies yarn or pnpm.

  • Language: You SHOULD default to TypeScript. Gen2 backends are TypeScript-only; frontends SHOULD follow the project's existing language.

  • Next.js: You SHOULD default to App Router unless the user specifies Pages Router.

  • React Native: Ask the user whether they use Expo or bare React Native CLI.

  • Auth: You MUST ask which login method the user wants (email/password, social login, SAML, passwordless, etc.). Do not assume a default.

  • Data authorization: default to publicApiKey (allow.publicApiKey()) — this is the starter template default. When auth is added, switch to owner-based (allow.owner()) with defaultAuthorizationMode: 'userPool'.

Quick Start — Route to the Right Reference

Step 0: Read Core Reference (ALWAYS)

You MUST read the core reference for your target platform before reading any other reference file. These contain Gen2 detection, Amplify.configure() placement per framework, sandbox commands, required packages, and directory structure rules — patterns needed for all tasks, not just new projects.

  • Web (React, Next.js, Vue, Angular, React Native): You MUST read core-web.md

  • Mobile (Flutter, Swift, Android): You MUST read core-mobile.md

  • Backend only (no frontend work): Skip to Step 1.

Step 1: Identify the Task Type
TaskGo To
Create a new project→ scaffolding.md, then Step 2 and/or Step 3
Add or modify a backend feature→ Step 2 (Backend Features)
Connect frontend to existing backend→ Step 3 (Frontend Integration)
Deploy the application→ deployment.md
Step 2: Backend Features

You MUST read the corresponding reference for each backend feature:

FeatureReferenceWhen to Use
Authenticationauth-backend.mdEmail/password, social login, MFA, SAML/OIDC
Data Modelsdata-backend.mdGraphQL schema, DynamoDB, relationships, auth rules
File Storagestorage-backend.mdS3 uploads/downloads, access rules
Functions & APIfunctions-and-api.mdLambda, custom resolvers, REST/HTTP APIs, calling from client
AI Featuresai.mdConversation, generation, AI tools via Bedrock (backend config + React/Next.js frontend)
Geo, PubSub, CDKadvanced-features.mdBackend-only: custom CDK stacks, overrides, custom outputs. Backend + frontend: Geo, PubSub, Face Liveness

Each backend feature file is self-contained. Load only what you need.

Routing note: These files apply for both adding and modifying features. Route to the same file whether the user says "add auth" or "change auth config" — each reference covers the full define surface.

Step 3: Frontend Integration

After configuring backend resources, connect the frontend. Choose by platform and feature:

Web (React, Next.js, Vue, Angular, React Native):

FeatureReference
Auth UI & flowsauth-web.md
Data CRUD & subscriptionsdata-web.md
Storage upload/downloadstorage-web.md

Mobile (Flutter, Swift, Android):

FeatureReference
Auth UI & flowsauth-mobile.md
Data CRUD & subscriptionsdata-mobile.md
Storage upload/downloadstorage-mobile.md

Note: AI and Functions frontend patterns are included in ai.md and functions-and-api.md respectively — they are not split into separate web/mobile files.

Core Concepts

Amplify Gen2 Architecture

  • Code-first: All backend resources defined in TypeScript under amplify/

  • Main config: amplify/backend.ts imports and combines all resources via defineBackend()

  • Resource files: amplify/auth/resource.ts, amplify/data/resource.ts, amplify/storage/resource.ts, amplify/functions/<name>/resource.ts

  • Generated output: amplify_outputs.json — consumed by frontend Amplify.configure(). Gitignored — generated by npx ampx sandbox (local dev) or npx ampx pipeline-deploy (CI/CD), never committed.

Directory Structure
project-root/
├── amplify/
│   ├── backend.ts            # defineBackend({ auth, data, ... })
│   ├── auth/resource.ts      # defineAuth({ ... })
│   ├── data/resource.ts      # defineData({ schema })
│   ├── storage/resource.ts   # defineStorage({ ... })
│   └── functions/
│       └── my-func/
│           ├── resource.ts   # defineFunction({ ... })
│           └── handler.ts    # export const handler = ...
├── src/                      # Frontend code
├── amplify_outputs.json      # Generated — DO NOT edit or commit (gitignored)
└── package.json
Key APIs
PackagePurpose
@aws-amplify/backenddefineAuth, defineData, defineStorage, defineFunction, defineBackend
aws-amplifyFrontend: Amplify.configure(), generateClient(), auth/data/storage APIs
@aws-amplify/ui-reactPre-built UI: <Authenticator>, <StorageBrowser>
@aws-amplify/ui-react-aiAI UI: <AIConversation>, useAIConversation

Documentation & Resource Verification

When you need AWS documentation (advanced CDK constructs, service limits, provider-specific auth config):

  1. If AWS documentation tools are available (e.g., via AWS MCP), you SHOULD use them to search and retrieve relevant documentation pages.

  2. If AWS documentation tools are unavailable, you MUST fall back to web search or the aws CLI for resource verification.

Why conditional: Amplify Gen2 is code-first — the primary workflow is editing TypeScript files and running npx ampx commands. AWS MCP tools are useful for post-deployment verification but are not required.

Security Considerations

  • Use secret() for all credentials and API keys — never hardcode or use plain environment variables for sensitive values

  • Review allow.guest() exposure carefully — guest access is enabled by default and grants unauthenticated users access to IAM-authorized resources

  • Scope IAM policies to specific resource ARNs — avoid resources: ['*'] in production

  • Never log secrets or include them in error messages

  • Enable CloudTrail and CloudWatch alarms for monitoring Amplify-deployed resources; enable access logging on S3, AppSync, and API Gateway

  • Configure security headers for web apps — set CSP, HSTS, X-Frame-Options, and X-Content-Type-Options via customHeaders in amplify.yml

  • Attach AWS WAF to public-facing AppSync APIs and API Gateway endpoints for defense in depth

  • Enable throttling and rate limiting on API Gateway and AppSync APIs to prevent abuse

  • Use IAM roles with ephemeral credentials for CI/CD pipelines and Lambda execution roles — never long-lived access keys

  • Encrypt CloudWatch Logs groups with KMS (aws:kms) when they may contain PII, tokens, or secrets; enable log retention policies

  • Enable AppSync schema validation and API Gateway request validators to reject malformed input at the edge

  • Use ACM-managed TLS certificates for custom domains on Amplify Hosting — configure via customDomain in deployment config

Links

All documentation links use react as the default platform slug. Replace /react/ in any URL with your target framework:

FrameworkSlug
Reactreact
Next.jsnextjs
Vuevue
Angularangular
React Nativereact-native
Flutterflutter
Swiftswift
Androidandroid

Files

references/ai.md

AI

Model Selection

Use a.ai.model() to select an AI model in both a.conversation() and a.generation() routes. Pass a human-readable model name string:

aiModel: a.ai.model('Claude 3.5 Sonnet v2')

a.ai.model() accepts any supported model name:

  • Anthropic: 'Claude 3 Haiku', 'Claude 3 Sonnet', 'Claude 3 Opus', 'Claude 3.5 Haiku', 'Claude 3.5 Sonnet', 'Claude 3.5 Sonnet v2', 'Claude 3.7 Sonnet', 'Claude Opus 4', 'Claude Sonnet 4', 'Claude Haiku 4.5', 'Claude Sonnet 4.5', 'Claude Opus 4.5', 'Claude Sonnet 4.6', 'Claude Opus 4.6'

  • Amazon: 'Amazon Nova Pro', 'Amazon Nova Lite', 'Amazon Nova Micro'

  • Meta: 'Llama 3.1 405B Instruct', 'Llama 3.1 70B Instruct', 'Llama 3.1 8B Instruct'

  • Cohere: 'Cohere Command R+', 'Cohere Command R'

  • Mistral: 'Mistral Large 2', 'Mistral Large', 'Mistral Small'

For models not in the supported list, use the raw escape hatch: aiModel: { resourcePath: '<bedrock-model-id>' }.

Availability depends on the AWS region and Bedrock model access enablement.

Note: a.generation() routes only support Anthropic (Claude) models. a.conversation() routes work with any supported model.

Backend: Conversation Routes

Define multi-turn conversation routes in your data schema using a.conversation():

// amplify/data/resource.ts
import { a, type ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  chat: a.conversation({
    aiModel: a.ai.model('Claude 3.5 Sonnet v2'),
    systemPrompt: 'You are a helpful assistant.',
  })
  .authorization(allow => allow.owner()),
});

Backend: Generation Routes

Use a.generation() for single-turn (stateless) inference.

MUST: Only Anthropic (Claude) models support a.generation() routes. Non-Anthropic models (Amazon Nova, Meta Llama, Cohere, Mistral) work with a.conversation() only.

const schema = a.schema({
  summarize: a.generation({
    aiModel: a.ai.model('Claude 3.5 Sonnet v2'),
    systemPrompt: 'Summarize the provided text concisely.',
    inferenceConfiguration: { maxTokens: 500, temperature: 0.3 },
  })
  .arguments({ text: a.string().required() })
  .returns(a.customType({ summary: a.string() }))
  .authorization(allow => allow.authenticated()),
});

CRITICAL — Authorization Constraints:

  • Conversation routes (a.conversation()) MUST use allow.owner() authorization — allow.authenticated() and other non-owner strategies throw a TypeError at CDK assembly time (before deployment even begins).

  • Generation routes (a.generation()) MUST use non-owner authorization (allow.authenticated(), allow.guest(), allow.group(), or allow.publicApiKey()) — allow.owner() throws a TypeError at CDK assembly time (before deployment even begins).

These constraints are asymmetric and frequently confused. Getting them wrong causes the CDK synthesis to fail with a non-obvious TypeError.

Security: Conversation history sent to Amazon Bedrock may contain PII. Do not log full request/response payloads in production. Enable CloudWatch Logs encryption (KMS) and set appropriate retention policies for any logs that may capture inference data.

Backend Integration

AI conversation and generation routes are part of your data schema. Import into amplify/backend.ts:

import { defineBackend } from '@aws-amplify/backend';
import { data } from './data/resource';

defineBackend({ data }); // AI routes live inside the data schema

Backend: AI Tools

Attach Lambda functions as tools to conversation routes so the AI model can invoke them:

import { myToolFunc } from '../functions/my-tool/resource';

const schema = a.schema({
  chat: a.conversation({
    aiModel: a.ai.model('Claude 3.5 Sonnet v2'),
    systemPrompt: 'You are a helpful assistant with tool access.',
    tools: [
      {
        name: 'getWeather',
        query: a.ref('getWeather'),
        description: 'Get current weather for a city',
      },
    ],
  })
  .authorization(allow => allow.owner()),

  getWeather: a.query()
    .arguments({ city: a.string().required() })
    .returns(a.customType({ temp: a.float(), condition: a.string() }))
    .handler(a.handler.function(myToolFunc))
    .authorization(allow => allow.authenticated()),
});

Define the tool function with defineFunction (see functions-and-api.md).

Frontend: React AI UI

Install the AI UI package:

npm install @aws-amplify/ui-react-ai

Set up hooks and render the conversation component:

import { generateClient } from 'aws-amplify/data';
import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
import type { Schema } from '../amplify/data/resource';

const client = generateClient<Schema>();
const { useAIConversation } = createAIHooks(client);

export default function Chat() {
  const [
    { data: { messages }, isLoading },
    handleSendMessage,
  ] = useAIConversation('chat');

  return (
    <AIConversation
      messages={messages}
      isLoading={isLoading}
      handleSendMessage={handleSendMessage}
    />
  );
}

Frontend: Manual Client

For programmatic access without the pre-built UI:

const client = generateClient<Schema>();

// List conversations
const { data: conversations } = await client.conversations.chat.list();

// Create a new conversation
const { data: conversation } = await client.conversations.chat.create();

// Send a message
const { data: message } = await conversation.sendMessage({
  content: [{ text: 'Hello!' }],
});

Pagination: use limit and nextToken parameters on .list().

Streaming

Subscribe to streaming responses for real-time token delivery:

In React, MUST wrap in useEffect and return the cleanup function:

useEffect(() => {
  const sub = conversation.onStreamEvent({
    next: (event) => console.log(event),
    error: (err) => console.error(err),
  });
  return () => sub.unsubscribe();
}, [conversation]);

UI note: Amplify AI Kit provides pre-built UI components for React and React Native only. Flutter, Swift, and Android apps can invoke AI conversation/generation routes via manual GraphQL client calls — see data-mobile.md patterns for the equivalent approach.

Pitfalls

  • Conversation auth MUST be allow.owner(): Using allow.authenticated() or any other non-owner strategy on a.conversation() throws a TypeError at CDK assembly time.

  • Generation auth MUST NOT be allow.owner(): Using allow.owner() on a.generation() throws a TypeError at CDK assembly time. Use allow.authenticated(), allow.guest(), or allow.group().

  • Missing AI route in data schema: The conversation or generation route MUST be defined in your a.schema() — without it, the frontend client has no AI endpoint to call.

  • Model availability: Not all Bedrock models are enabled by default — you MUST enable model access in the AWS console (Bedrock → Model access) before using a model in a.ai.model().

  • Message content structure: Both sendMessage('Hello') (string) and sendMessage({ content: [{ text: 'Hello' }] }) (object) are valid. Use the object form when sending images or tool results.

Links

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an API key, Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
AWS Labs
Publisher
AWS Labs (Official)
Source
awslabs/agent-plugins · plugins/aws-amplify/skills/amplify-workflow · commit fbefb37
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • NOTICE (added by AutoGineer from NOTICE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Also distributed in
cline/skills

AutoGineer is not affiliated with or endorsed by AWS Labs.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download amplify-workflow.zip