-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs: add combined mcp docs #8477
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
b8c4b9c
docs: combined mcp docs
pranavosu a5d0d9a
docs: spellcheck
pranavosu 0fa1701
docs: add APPDATA to word list
pranavosu 1427ca2
docs: guidance documentation updates
pranavosu eb43550
docs: incorporate review changes
pranavosu a9355cd
docs: more feedback
pranavosu File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
354 changes: 354 additions & 0 deletions
354
src/pages/[platform]/start/mcp-server/amplify-workflows/index.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,354 @@ | ||
| import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; | ||
|
|
||
| export const meta = { | ||
| title: 'Pre-built Amplify workflows', | ||
| description: 'Learn about the pre-built 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: | ||
|
|
||
| | Workflow | Purpose | | ||
| | --- | --- | | ||
| | **Backend Implementation** | Set up authentication, data models, storage, functions, and AI features | | ||
| | **Frontend Integration** | Connect your frontend framework to Amplify backend services | | ||
| | **Deployment Guide** | Configure sandbox environments, production deployments, and CI/CD | | ||
|
|
||
| ## Backend Implementation workflow | ||
|
|
||
| The Backend Implementation workflow helps you set up Amplify backend features following best practices. When you ask your AI assistant to implement a backend feature, it uses this workflow to guide the implementation. | ||
|
|
||
| ### Supported features | ||
|
|
||
| <Accordion title="Authentication (Auth)" headingLevel="4"> | ||
|
|
||
| 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:** | ||
| ``` | ||
| Set up authentication for my app with email sign-in and Google social login. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Data modeling (Data)" headingLevel="4"> | ||
|
|
||
| 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:** | ||
| ``` | ||
| Create a data model for a blog with posts, comments, and user profiles. | ||
| Posts should only be editable by their authors. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="File storage (Storage)" headingLevel="4"> | ||
|
|
||
| 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:** | ||
| ``` | ||
| Add file storage so users can upload profile pictures with a 5MB limit. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Serverless functions (Functions)" headingLevel="4"> | ||
|
|
||
| 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:** | ||
| ``` | ||
| Create a function that sends a welcome email when a new user signs up. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="AI features (AI)" headingLevel="4"> | ||
|
|
||
| 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:** | ||
| ``` | ||
| Add an AI feature that summarizes long articles for users. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| ## Frontend Integration workflow | ||
|
|
||
| The Frontend Integration workflow helps you connect your frontend application to Amplify backend services. It provides framework-specific patterns and best practices. | ||
|
|
||
| ### Framework patterns | ||
|
|
||
| The workflow adapts its guidance based on your frontend framework: | ||
|
|
||
| <Accordion title="React and Next.js" headingLevel="4"> | ||
|
|
||
| - 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:** | ||
| ``` | ||
| Connect my React app to the Amplify backend and add a sign-in page. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Vue and Angular" headingLevel="4"> | ||
|
|
||
| - 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:** | ||
| ``` | ||
| Set up Amplify in my Vue app and create a protected dashboard route. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="React Native" headingLevel="4"> | ||
|
|
||
| - Configuring Amplify for mobile development | ||
| - Implementing secure storage for tokens | ||
| - Setting up push notifications | ||
| - Handling offline scenarios with DataStore | ||
|
|
||
| **Example prompt:** | ||
| ``` | ||
| Add offline support to my React Native app so users can work without internet. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Flutter" headingLevel="4"> | ||
|
|
||
| - Setting up Amplify Flutter packages | ||
| - Implementing authentication flows | ||
| - Configuring API and storage access | ||
| - Using Amplify UI components for Flutter | ||
|
|
||
| **Example prompt:** | ||
| ``` | ||
| Set up authentication in my Flutter app with the Amplify Authenticator widget. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Swift (iOS)" headingLevel="4"> | ||
|
|
||
| - 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:** | ||
| ``` | ||
| Add real-time data sync to my SwiftUI app using Amplify DataStore. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| <Accordion title="Android (Kotlin)" headingLevel="4"> | ||
|
|
||
| - Setting up Amplify Android libraries | ||
| - Implementing coroutines for async operations | ||
| - Configuring Jetpack Compose with Amplify | ||
| - Handling Android lifecycle with Amplify | ||
|
|
||
| **Example prompt:** | ||
| ``` | ||
| Connect my Kotlin Android app to Amplify and implement user authentication. | ||
| ``` | ||
|
|
||
| </Accordion> | ||
|
|
||
| ## Deployment Guide workflow | ||
|
|
||
| The Deployment Guide workflow helps you deploy your Amplify application through different stages, from local development to production. | ||
|
|
||
| ### 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:** | ||
| ``` | ||
| Set up a sandbox environment so I can test my 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:** | ||
| ``` | ||
| Deploy my 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:** | ||
| ``` | ||
| Set up CI/CD so my app automatically deploys when I push to the main branch. | ||
| ``` | ||
|
|
||
| ## 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: | ||
|
|
||
| ``` | ||
| I want to build a task management app. 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: | ||
|
|
||
| ``` | ||
| Connect my React app to the backend. I want a sign-in page and a | ||
pranavosu marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| dashboard that shows the user's tasks. | ||
| ``` | ||
|
|
||
| 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: | ||
|
|
||
| ``` | ||
| Set up deployment so the app deploys automatically when I push to GitHub. | ||
| Configure 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: | ||
|
|
||
| <Callout info> | ||
|
|
||
| **Be specific about your requirements.** Instead of "add authentication," try "add authentication with email sign-in, Google social login, and MFA." | ||
|
|
||
| </Callout> | ||
|
|
||
| - **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 | ||
|
|
||
| ## 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/) | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that this is maybe missing that the frontend SOP can be applied to already existing frontend applications. I know that this is implied with this sentence, but maybe we should make it a bit more obvious.