Let's build a travel journal app. The kind where users sign in, create trips, write journal entries, upload photos, and chat with an AI companion that knows about their travels. Auth, data modelling, file storage, AI conversation, a Next.js frontend, and a production deployment. The usual full-stack checklist together with some AI features that takes a weekend to wire up manually.
We'll do it with one prompt. The agent will work through a 4-phase plan (backend, sandbox, frontend, production), pausing between each phase to ask for the go-ahead before continuing with the help of AWS Amplify Power!
Prerequisites
- Node.js 18.x or later
- npm available
- AWS credentials configured (
aws configureoraws sso login)- For setting up AWS account with Amplify permissions, see the Amplify account setup guide and the AWS MCP prerequisites.
- Kiro IDE installed
What's a Kiro Power?
Before we move forward with implementation, let’s talk about Kiro Powers. Kiro Powers are packaged workflows for the Kiro IDE. They bundle tools, instructions, and structured execution plans into a single installable unit. You don't configure them manually or edit JSON files. You install one from the sidebar with a click, and it activates automatically when your prompt is relevant.
Setup
Now you are ready to build the application. Let’s get started with installing the Kiro Power.
Installation
- Click the Powers icon (lightning bolt) in Kiro IDE's right sidebar
- Click Build full-stack apps with AWS Amplify
- Click Install
That's it. No JSON config files, no manual server setup. Let's build something.
The Prompt
Here's what we'll give the agent. Notice there's no mention of Cognito, S3, DynamoDB, or deployment pipelines. We just describe the app we want:
Build "Leafer", a travel journal app where users sign in, create trips, write journal entries, and upload photos. Include a chat feature that can answer questions about the user's trips and entries, things like "summarize my Barcelona trip" or "what restaurants did I mention in Japan?" Use Next.js with TypeScript for the frontend. For the backend, set up auth, a data model, file storage, and a conversational AI backend. Make the UI clean and deploy it to production.
Hit enter. The agent activates the Amplify Power as the first thing.
Then it validates prerequisites (Node.js, AWS credentials), and presents a plan: the features it identified, the framework it will use, and the phases it will execute.
Phase 1: Backend Setup
The agent starts by building the backend. It retrieves the relevant Amplify backend SOP and creates the resources: authentication (Cognito), a data model (trips, journal entries), file storage (S3 for photos), and an AI conversation route that has context about the user's trips and entries.
Once done, it lists everything it created and asks for confirmation before moving forward.
Not every task triggers all four phases. If you'd asked "add auth to my existing backend," the agent would run only this phase and the sandbox deployment, skipping frontend and production entirely. The Power is context-aware: it reads the prompt and the project's current state to decide which phases apply.
Phase 2: Sandbox Deployment
With the backend defined, the agent deploys everything to a sandbox environment. This is where you catch issues like schema problems, permission misconfigurations, or missing environment variables before anything touches production.
The agent follows the Amplify deployment SOP, runs the sandbox deployment, and pauses again for confirmation.
Phase 3: Frontend & Testing
With the sandbox running, the agent moves to the frontend. It scaffolds the Next.js app, installs the Amplify client libraries, and builds the UI: an authentication flow, trip management pages, journal entry forms with photo uploads, and the AI companion chat interface.
After the build succeeds, the agent generates a testing checklist based on the specific resources that were created. Not a generic list: if you didn't add storage, storage tests won't appear.
This is the phase where you open the app locally, click through the flows, and verify everything works before shipping.
Phase 4: Production Deployment
The final phase sets up CI/CD deployment through Amplify Hosting. The agent follows the deployment SOP again, this time configuring a production pipeline connected to the repository.
Future updates just need a git push to main. Amplify picks up the change and auto-deploys.
One thing worth noting: the generated frontend gives you a working app with all the right integrations, but it's a starting point. For a production app, you'll want to spend time refining the UI, tightening up the layout, and making it your own. The value is in the wiring, not the pixel-perfect design.
One prompt, four phases, and a few confirmation clicks later: Leafer is live!
Cleanup
When you no longer need the environments:
- Delete sandbox:
npx ampx sandbox delete - Delete production:
aws amplify delete-app --app-id <your-app-id>or remove the app from the AWS Amplify Console
Top comments (0)