diff --git a/cspell.json b/cspell.json index 972cbabc8d8..eea51669780 100644 --- a/cspell.json +++ b/cspell.json @@ -142,6 +142,7 @@ "AppClientIDWeb", "AppClientSecret", "appcompat", + "APPDATA", "AppDelegate.m", "AppDelegate.swift", "AppDelegate", @@ -1631,7 +1632,9 @@ "HTTPAPI", "AWSSDK", "uppercased", - "autoclosure" + "autoclosure", + "Kiro", + "kiro" ], "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"], "patterns": [ diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 96eeea86fc6..3ac50be9059 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -49,6 +49,17 @@ export const directory = { }, { path: 'src/pages/[platform]/start/platform-setup/index.mdx' + }, + { + path: 'src/pages/[platform]/start/mcp-server/index.mdx', + children: [ + { + path: 'src/pages/[platform]/start/mcp-server/set-up-mcp/index.mdx' + }, + { + path: 'src/pages/[platform]/start/mcp-server/amplify-workflows/index.mdx' + } + ] } ] }, diff --git a/src/pages/[platform]/ai/index.mdx b/src/pages/[platform]/ai/index.mdx index efc70d6d257..edee3b692a2 100644 --- a/src/pages/[platform]/ai/index.mdx +++ b/src/pages/[platform]/ai/index.mdx @@ -4,7 +4,6 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; export const meta = { title: 'AI kit', description: 'The quickest way for fullstack developers to build web apps with AI capabilities such as chat, conversational search, and summarization', - isNew: true, route: '/[platform]/ai', platforms: [ 'angular', diff --git a/src/pages/[platform]/start/mcp-server/amplify-workflows/index.mdx b/src/pages/[platform]/start/mcp-server/amplify-workflows/index.mdx new file mode 100644 index 00000000000..66d108d7bfc --- /dev/null +++ b/src/pages/[platform]/start/mcp-server/amplify-workflows/index.mdx @@ -0,0 +1,413 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Guided workflows', + description: 'Learn about the guided workflows available in AWS MCP Server for building Amplify applications.', + route: '/[platform]/start/mcp-server/amplify-workflows', + platforms: [ + 'android', + 'angular', + 'flutter', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'swift', + 'vue' + ] +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + +AWS MCP Server includes pre-built workflows (called "Agent SOPs" in AWS terminology) that guide your AI coding assistant through complex Amplify development tasks. These workflows encode best practices and ensure consistent, production-ready implementations. + +This page describes the three main workflows available and shows you how to use them effectively. + +## Available workflows + +AWS MCP Server provides three pre-built workflows designed for different stages of Amplify development. These workflows work with both new and existing projects. + +| Workflow | Purpose | +| --- | --- | +| **Backend Implementation** | Add or modify authentication, data models, storage, functions, and AI features in new or existing backends | +| **Frontend Integration** | Add Amplify to an existing frontend app or enhance an app that already uses Amplify | +| **Deployment Guide** | Configure sandbox environments, production deployments, and CI/CD for any Amplify project | + +## Backend Implementation workflow + +The Backend Implementation workflow helps you add or modify Amplify backend features following best practices. Whether you're starting fresh or adding features to an existing Amplify backend, this workflow guides you through the implementation. + +### Supported features + + + +The workflow guides you through setting up Amplify Auth, including: + +- Configuring sign-up and sign-in flows +- Setting up multi-factor authentication (MFA) +- Configuring social sign-in providers (Google, Facebook, Apple, Amazon) +- Customizing authentication UI components +- Implementing password policies and account recovery + +**Example prompt:** +``` +Guide me through setting up Amplify authentication with email sign-in and Google social login. +``` + + + + + +The workflow helps you design and implement your data layer: + +- Creating GraphQL schemas with proper relationships +- Setting up authorization rules for data access +- Configuring real-time subscriptions +- Implementing optimistic UI updates +- Setting up conflict resolution for offline scenarios + +**Example prompt:** +``` +Help me create a data model following Amplify best practices for a blog with posts, +comments, and user profiles. Posts should only be editable by their authors. +``` + + + + + +The workflow guides storage implementation: + +- Configuring S3 buckets with proper access controls +- Setting up file upload and download functionality +- Implementing access levels (public, protected, private) +- Configuring file validation and size limits + +**Example prompt:** +``` +Walk me through adding file storage so users can upload profile pictures with a 5MB limit. +``` + + + + + +The workflow helps you create and deploy Lambda functions: + +- Setting up function triggers (API, scheduled, event-driven) +- Configuring environment variables and secrets +- Implementing function layers for shared code +- Setting up proper IAM permissions + +**Example prompt:** +``` +Guide me through creating a Lambda function that sends a welcome email when a new user signs up. +``` + + + + + +The workflow guides AI/ML feature integration: + +- Setting up Amazon Bedrock for generative AI +- Implementing text generation and summarization +- Adding image analysis capabilities +- Configuring conversation flows + +**Example prompt:** +``` +Help me add an AI summarization feature following Amplify best practices for generative AI. +``` + + + +## Frontend Integration workflow + +The Frontend Integration workflow helps you add Amplify to your frontend application or enhance an existing Amplify integration. Whether you have an existing React, Vue, Angular, or mobile app that needs Amplify, or you're adding new features to an app that already uses Amplify, this workflow provides framework-specific patterns and best practices. + +### Framework patterns + +The workflow adapts its guidance based on your frontend framework: + + + +- Setting up the Amplify client library +- Using React hooks for authentication state +- Implementing data fetching with proper loading states +- Configuring server-side rendering (SSR) for Next.js +- Using Amplify UI components + +**Example prompt:** +``` +Help me connect my React app to Amplify following best practices. I need a sign-in page and protected routes. +``` + + + + + +- Configuring Amplify with framework-specific patterns +- Implementing authentication guards and state management +- Setting up data binding with Amplify Data +- Using framework-appropriate UI components + +**Example prompt:** +``` +Guide me through setting up Amplify in my Vue app with a protected dashboard route. +``` + + + + + +- Configuring Amplify for mobile development +- Implementing secure storage for tokens +- Setting up push notifications +- Handling offline scenarios with DataStore + +**Example prompt:** +``` +Walk me through adding offline support to my React Native app following Amplify best practices. +``` + + + + + +- Setting up Amplify Flutter packages +- Implementing authentication flows +- Configuring API and storage access +- Using Amplify UI components for Flutter + +**Example prompt:** +``` +Help me set up authentication in my Flutter app using the Amplify Authenticator widget. +``` + + + + + +- Configuring Amplify Swift packages +- Implementing async/await patterns for Amplify operations +- Setting up Combine publishers for real-time updates +- Using SwiftUI with Amplify + +**Example prompt:** +``` +Guide me through adding real-time data sync to my SwiftUI app following Amplify best practices. +``` + + + + + +- Setting up Amplify Android libraries +- Implementing coroutines for async operations +- Configuring Jetpack Compose with Amplify +- Handling Android lifecycle with Amplify + +**Example prompt:** +``` +Walk me through connecting my Kotlin Android app to Amplify with user authentication. +``` + + + +## Deployment Guide workflow + +The Deployment Guide workflow helps you deploy your Amplify application through different stages, from local development to production. This works for new projects as well as existing applications that need deployment configuration or CI/CD setup. + +### Sandbox environments + +The workflow guides you through setting up personal cloud sandbox environments for development: + +- Creating isolated sandbox environments +- Configuring hot-reload for backend changes +- Managing sandbox lifecycle +- Sharing sandbox configurations with team members + +**Example prompt:** +``` +Guide me through setting up an Amplify sandbox environment for testing backend changes. +``` + +### Production deployment + +The workflow helps you deploy to production: + +- Configuring production-ready settings +- Setting up custom domains +- Implementing environment variables for different stages +- Configuring monitoring and logging + +**Example prompt:** +``` +Walk me through deploying my Amplify app to production with a custom domain. +``` + +### CI/CD integration + +The workflow guides continuous integration and deployment setup: + +- Configuring Amplify Hosting for automatic deployments +- Setting up branch-based deployments (preview, staging, production) +- Implementing pull request previews +- Configuring build settings and environment variables + +**Example prompt:** +``` +Help me set up CI/CD following Amplify best practices so my app deploys automatically when I push to main. +``` + +## Practical example: Building a fullstack app + +Here's an example of how you might use AWS MCP Server to build a complete Amplify application. This demonstrates how the pre-built workflows guide your AI assistant through each step. + +### Step 1: Set up the backend + +Start by describing your application to your AI assistant: + +``` +Help me build a task management app following Amplify best practices. Users should be able to: +- Sign up and sign in with email +- Create, edit, and delete their own tasks +- Mark tasks as complete +- See their tasks in real-time across devices +``` + +Your AI assistant uses the **Backend Implementation workflow** to: +1. Configure authentication with email sign-in +2. Create a Task data model with proper authorization rules +3. Set up real-time subscriptions for task updates + +### Step 2: Connect the frontend + +Next, ask your assistant to connect your frontend: + +``` +Guide me through connecting my React app to the Amplify backend. I need a sign-in page +and a dashboard that shows the user's tasks with real-time updates. +``` + +Your AI assistant uses the **Frontend Integration workflow** to: +1. Install and configure Amplify libraries +2. Set up the Authenticator component +3. Create data fetching hooks for tasks +4. Implement real-time updates in the UI + +### Step 3: Deploy the application + +Finally, deploy your application: + +``` +Walk me through setting up Amplify deployment so the app deploys automatically when I push +to GitHub. I also want preview deployments for pull requests. +``` + +Your AI assistant uses the **Deployment Guide workflow** to: +1. Connect your GitHub repository to Amplify Hosting +2. Configure branch-based deployments +3. Set up pull request previews +4. Configure production environment settings + +## Tips for effective prompts + +To get the best results from AWS MCP Server, keep these tips in mind: + + + +**Be specific about your requirements.** Instead of "add authentication," try "add authentication with email sign-in, Google social login, and MFA." + + + +- **Describe the user experience** you want, not just the technical implementation +- **Mention your framework** so the workflow can provide framework-specific guidance +- **Ask follow-up questions** if you need clarification on any step +- **Request explanations** if you want to understand why certain patterns are recommended + +### Optional: Steering files for teams + +For guaranteed consistency across all developers, you can add steering files that instruct the AI to always use the workflows. + + + +Create a steering file at `.kiro/steering/amplify.md`: + +```markdown title=".kiro/steering/amplify.md" +# Amplify Development Guidelines + +When working on Amplify projects, use the AWS MCP Server guided workflows: + +- For backend features (auth, data, storage, functions, AI), call `retrieve_agent_sop` with `amplify-backend-implementation` +- For frontend integration, call `retrieve_agent_sop` with `amplify-frontend-integration` +- For deployment tasks, call `retrieve_agent_sop` with `amplify-deployment-guide` +``` + + + + + +Add to your `CLAUDE.md` file in the project root: + +```markdown title="CLAUDE.md" +# Amplify Development Guidelines + +When working on Amplify projects, use the AWS MCP Server guided workflows: + +- For backend features (auth, data, storage, functions, AI), call `retrieve_agent_sop` with `amplify-backend-implementation` +- For frontend integration, call `retrieve_agent_sop` with `amplify-frontend-integration` +- For deployment tasks, call `retrieve_agent_sop` with `amplify-deployment-guide` +``` + + + + + +Create a rules file at `.cursor/rules/amplify.mdc`: + +```markdown title=".cursor/rules/amplify.mdc" +--- +description: Amplify development guidelines +globs: + - "amplify/**" + - "src/**" +--- + +# Amplify Development Guidelines + +When working on Amplify projects, use the AWS MCP Server guided workflows: + +- For backend features (auth, data, storage, functions, AI), call `retrieve_agent_sop` with `amplify-backend-implementation` +- For frontend integration, call `retrieve_agent_sop` with `amplify-frontend-integration` +- For deployment tasks, call `retrieve_agent_sop` with `amplify-deployment-guide` +``` + + + +## Next steps + +Now that you understand the pre-built workflows, try using them in your next Amplify project: + +1. [Set up AWS MCP Server](/[platform]/start/mcp-server/set-up-mcp/) if you haven't already +2. Start a conversation with your AI assistant about what you want to build +3. Let the pre-built workflows guide you through implementation + +For more information about specific Amplify features, explore the documentation: + +- [Authentication](/[platform]/build-a-backend/auth/) +- [Data](/[platform]/build-a-backend/data/) +- [Storage](/[platform]/build-a-backend/storage/) +- [Functions](/[platform]/build-a-backend/functions/) diff --git a/src/pages/[platform]/start/mcp-server/index.mdx b/src/pages/[platform]/start/mcp-server/index.mdx new file mode 100644 index 00000000000..44a971f3927 --- /dev/null +++ b/src/pages/[platform]/start/mcp-server/index.mdx @@ -0,0 +1,83 @@ +import { getChildPageNodes } from '@/utils/getChildPageNodes'; +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Build with AI assistants', + description: 'Use AI coding assistants to build fullstack Amplify applications faster with AWS MCP Server.', + route: '/[platform]/start/mcp-server', + platforms: [ + 'android', + 'angular', + 'flutter', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'swift', + 'vue' + ], + isNew: true +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + const childPageNodes = getChildPageNodes(meta.route); + return { + props: { + meta, + childPageNodes + } + }; +} + +AWS MCP Server brings the power of AI coding assistants to your Amplify development workflow. Using the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/)—an open protocol that enables AI tools to access external data and capabilities—you can build, deploy, and manage fullstack Amplify applications faster than ever. + +Whether you're using Amazon Kiro, Cursor, Claude Desktop, or another MCP-compatible AI coding assistant, AWS MCP Server provides the context and tools your AI needs to help you build production-ready Amplify applications. + +## Why use AWS MCP Server? + +Building fullstack applications with Amplify involves many moving parts: authentication, data modeling, storage, serverless functions, and deployment. AWS MCP Server helps your AI coding assistant understand these components and guide you through implementing them correctly. + +Instead of copying and pasting from documentation or debugging configuration issues, you can describe what you want to build in natural language. Your AI assistant uses AWS MCP Server to access the right information and execute AWS operations on your behalf. + +## Core capabilities + +AWS MCP Server provides three core capabilities that enhance your AI-assisted development experience: + +### 1. Pre-built workflows + +Pre-built workflows (called "Agent SOPs" in AWS terminology) are step-by-step guides that help your AI assistant complete complex Amplify tasks following best practices. These workflows cover common scenarios like: + +- **Backend Implementation**: Setting up authentication, data models, storage, serverless functions, and AI features +- **Frontend Integration**: Connecting your frontend framework to Amplify backend services +- **Deployment Guide**: Configuring sandbox environments, production deployments, and CI/CD pipelines + +When you ask your AI assistant to help with one of these tasks, it follows the pre-built workflow to ensure you get a production-ready implementation. + +### 2. Documentation access + +AWS MCP Server gives your AI assistant direct access to the latest Amplify documentation. This means your assistant can provide accurate, up-to-date guidance without you needing to search through docs yourself. + +The documentation access includes: +- API references and code examples +- Configuration options and best practices +- Troubleshooting guides and common patterns + +### 3. AWS API execution + +With proper authentication, AWS MCP Server can execute AWS operations directly from your AI assistant. This enables workflows like: + +- Creating and configuring Amplify backends +- Deploying applications to AWS +- Managing AWS resources + +All operations respect your IAM permissions, so your AI assistant can only perform actions you're authorized to do. + +## Getting started + +Ready to supercharge your Amplify development with AI? Follow these guides to get started: + + diff --git a/src/pages/[platform]/start/mcp-server/set-up-mcp/index.mdx b/src/pages/[platform]/start/mcp-server/set-up-mcp/index.mdx new file mode 100644 index 00000000000..8c7e303ddc1 --- /dev/null +++ b/src/pages/[platform]/start/mcp-server/set-up-mcp/index.mdx @@ -0,0 +1,66 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Set up AWS MCP Server', + description: 'Learn how to configure AWS MCP Server with your AI coding assistant.', + route: '/[platform]/start/mcp-server/set-up-mcp', + platforms: [ + 'android', + 'angular', + 'flutter', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'swift', + 'vue' + ] +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + +Follow the [AWS MCP Server setup guide](https://docs.aws.amazon.com/aws-mcp/latest/userguide/getting-started-aws-mcp-server.html) to configure AWS MCP Server with your AI coding assistant. The guide covers: + +- Installing prerequisites (AWS CLI, uv package manager) +- Configuring your MCP client (Amazon Kiro, Cursor, Claude Desktop, and others) +- Setting up AWS credentials and IAM permissions +- Testing your connection + +## Amplify-specific setup tips + +Once you have AWS MCP Server configured, here are some tips for Amplify development: + +### AWS credentials for Amplify + +If you haven't set up AWS credentials for Amplify development yet, follow the [Configure AWS for local development](/[platform]/start/account-setup/) guide. This ensures you have the right permissions for both AWS MCP Server and Amplify CLI operations. + +### IAM permissions + +The base AWS MCP Server permissions allow your AI assistant to access the guided workflows and documentation. For Amplify development, your credentials also need permissions to create and manage Amplify resources. + +If you're using the `AmplifyBackendDeployFullAccess` managed policy for Amplify development, you likely have sufficient permissions. If you encounter permission errors, check with your AWS administrator. + +### Verify Amplify workflows are available + +After setup, verify that the Amplify workflows are accessible by asking your AI assistant: + +``` +Which guided workflows are available for Amplify development? +``` + +Your assistant should describe the Backend Implementation, Frontend Integration, and Deployment Guide workflows. + +## Next steps + +Now that you have AWS MCP Server configured, learn about the [guided workflows](/[platform]/start/mcp-server/amplify-workflows/) available to accelerate your Amplify development.