Skip to content
/ vibecoder Public

AI-powered web app builder running on AWS Bedrock AgentCore. Generates, deploys, and iterates on Next.js apps in under 2 minutes.

5 stars 2 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

w601sxs/vibecoder

BranchesTags

Repository files navigation

VibeCoder Agent

An AI-powered web application builder running on AWS Bedrock AgentCore that generates, deploys, and iterates on Next.js apps. Built in ~300 lines of code, VibeCoder takes natural language prompts and turns them into live, deployed web applications with full version control.

🎯 What It Does

VibeCoder is a fully-functioning AI coding agent that:

  • Generates complete Next.js/React applications from natural language descriptions
  • Builds them locally with npm in a containerized environment
  • Deploys to AWS Amplify with live URLs (https://main.{app-id}.amplifyapp.com)
  • Maintains full version control with source code preservation in S3
  • Enables iterative editing: "add a dark mode toggle" → new version deployed
  • Supports rollback to any previous version

Total time: 60-120 seconds from prompt to live URL.

🏗️ Architecture

System Overview

User Request → BedrockAgentCore → Strands Agent → Tools → AWS Services
                                       ↓
                              10 Custom Tools:
                              - Code Generation
                              - File Operations  
                              - Deployment
                              - Version Control

Technology Stack

Layer Technology Purpose
Runtime AWS Bedrock AgentCore Serverless agent hosting, auto-scaling
Agent Framework Strands AI orchestration, tool selection
LLM Claude/Bedrock Models Code generation, decision making
Container Python 3.11 + Node.js 20 Hybrid runtime for agent + builds
Frontend Next.js 14 + React 18 Generated web applications
Storage AWS S3 Source code + built artifacts
Hosting AWS Amplify CDN, HTTPS, live URLs
Deployment boto3 AWS SDK for Python

🔄 Complete Workflow

1. Create New App

User: "Create a todo list app with dark mode"
    ↓
Agent: generate_nextjs_app("todo-app", "todo list with dark mode")
    → Creates ./workspace/todo-app/ with Next.js scaffold
    ↓
Agent: write_react_component("./workspace/todo-app/pages/index.js", <code>)
    → Writes main page with todo logic
    ↓
Agent: write_css_file("./workspace/todo-app/styles/Home.module.css", <css>)
    → Writes dark mode styles
    ↓
Agent: deploy_app_to_amplify("./workspace/todo-app", "todo-app", "todo list with dark mode")
    ↓
deploy_with_source.py executes:
    1. Upload source → s3://bucket/projects/{app_id}/source/v1/
    2. npm install + npm build (locally in container)
    3. Upload built files → s3://bucket/projects/{app_id}/deployments/{timestamp}/
    4. amplify_client.start_deployment(sourceUrl=s3://...)
    5. Poll until deployment succeeds
    6. Get URL: https://main.{app_id}.amplifyapp.com
    7. Save metadata.json with version info
    ↓
Agent: "✅ Deployed v1 to https://main.xxx.amplifyapp.com"

2. Iterate on Existing App

User: "Add a search bar to my todo app"
    ↓
Agent: download_app_for_editing(app_id, "v1")
    → Downloads source from s3://bucket/projects/{app_id}/source/v1/
    ↓
Agent: write_react_component(<updated_code>)
    → Adds search bar component
    ↓
Agent: deploy_app_to_amplify(...)
    → Deploys as v2 to same URL
    ↓
Agent: "✅ Deployed v2 with search bar"

3. Rollback

python3 rollback_amplify.py {app_id} main 1
→ Redeploys v1 from S3
→ Same URL now serves v1 content

📦 Dual Storage Architecture

Critical Design: AWS Amplify's S3 deployment doesn't run builds, so we store BOTH source and built files:

s3://vibecoder-amplify-deployments/
  projects/
    {app_id}/
      source/           ← Editable source code
        v1/
          package.json
          pages/index.js
          styles/...
        v2/
          ...
      deployments/      ← Built static files
        1734567890/     ← v1 timestamp
          index.html
          _next/static/...
        1734568999/     ← v2 timestamp
          ...
      metadata.json     ← Version tracking

metadata.json structure:

{
  "app_id": "d3dzp5v50oaoe2",
  "app_name": "todo-app",
  "versions": [
    {
      "version": "v1",
      "timestamp": 1734567890,
      "source_path": "s3://.../source/v1/",
      "deployment_path": "s3://.../deployments/1734567890/",
      "job_id": "1",
      "prompt": "Create a todo list app",
      "deployed_url": "https://main.d3dzp5v50oaoe2.amplifyapp.com"
    }
  ]
}

Why this matters:

  • ✅ Source preservation: Can iterate on v1 to create v2
  • ✅ Rollback capability: Can redeploy any previous version
  • ✅ Prompt tracking: Knows what user asked for each version
  • ✅ Build reproducibility: Source + timestamp = exact version

🛠️ Agent Tools

The agent has 10 tools at its disposal:

Code Generation Tools

  1. generate_nextjs_app - Creates Next.js project scaffold with package.json, next.config.js, pages/_app.js
  2. write_react_component - Writes React/JS files (pages, components, utilities)
  3. write_css_file - Writes CSS/styling files

Deployment Tools

  1. deploy_app_to_amplify - Full deployment pipeline (returns live URL, app_id, version)
  2. list_app_versions - Shows deployment history with URLs and prompts
  3. download_app_for_editing - Retrieves source code from S3 for iteration

File Operations (from strands-tools)

  1. file_read - Read files
  2. file_write - Write files
  3. editor - Edit files
  4. shell - Execute shell commands

🚀 Deploying to AWS Bedrock AgentCore

What is AgentCore?

AWS Bedrock AgentCore is Amazon's serverless platform for deploying AI agents. It handles:

  • Serverless hosting - No infrastructure to manage
  • Auto-scaling - Handles concurrent requests automatically
  • Built-in observability - OpenTelemetry integration
  • HTTP streaming - Real-time response streaming
  • Direct code deploy - Push and go (no Docker required)

Prerequisites

Before deploying, ensure you have:

  1. AWS Account with credentials configured
  2. Python 3.10+ installed
  3. AWS CLI configured (aws configure)
  4. Model Access - Anthropic Claude Sonnet 4.0 enabled in Amazon Bedrock console
  5. IAM Permissions - See IAM Requirements below

Deployment Steps

Step 1: Install the AgentCore Starter Toolkit

pip install bedrock-agentcore-starter-toolkit

Step 2: Verify Agent Code Structure

Your agent must follow this pattern (already implemented in agent_streaming.py):

from bedrock_agentcore.runtime import BedrockAgentCoreApp

app = BedrockAgentCoreApp()

@app.entrypoint
async def agent_invocation(payload, context):
    # Your agent logic here
    yield response_chunks

if __name__ == "__main__":
    app.run()

Step 3: Configure the Agent

agentcore configure --entrypoint agent_streaming.py --region us-west-2 --non-interactive

This creates .bedrock_agentcore.yaml with your deployment configuration.

Step 4: Deploy to AWS

agentcore launch

This command:

  • Builds your container using AWS CodeBuild (no Docker required locally)
  • Creates necessary AWS resources (ECR repository, IAM roles, etc.)
  • Deploys your agent to Amazon Bedrock AgentCore Runtime
  • Configures CloudWatch logging

Step 5: Test Your Deployed Agent

agentcore invoke '{"prompt": "Create a simple landing page"}'

Step 6: Get Agent Details

agentcore status --verbose

Note the Agent ARN - you'll need it for programmatic invocation.

IAM Requirements

The execution role associated with your AgentCore Runtime agent must have permissions for:

Required S3 Permissions

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:ListBucket"
      ],
      "Resource": [
        "arn:aws:s3:::vibecoder-amplify-deployments",
        "arn:aws:s3:::vibecoder-amplify-deployments/*"
      ]
    },
    {
      "Effect": "Allow",
      "Action": [
        "s3:CreateBucket",
        "s3:PutBucketPolicy"
      ],
      "Resource": "arn:aws:s3:::vibecoder-amplify-deployments"
    }
  ]
}

Required Amplify Permissions

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "amplify:CreateApp",
        "amplify:GetApp",
        "amplify:ListApps",
        "amplify:UpdateApp",
        "amplify:CreateBranch",
        "amplify:GetBranch",
        "amplify:StartDeployment",
        "amplify:GetJob",
        "amplify:ListJobs"
      ],
      "Resource": "*"
    }
  ]
}

Required Bedrock Permissions (for LLM access)

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "bedrock:InvokeModel",
        "bedrock:InvokeModelWithResponseStream"
      ],
      "Resource": "arn:aws:bedrock:*::foundation-model/*"
    }
  ]
}

To attach these permissions:

  1. Go to AWS IAM Console
  2. Find the execution role created by AgentCore (format: AmazonBedrockAgentCoreSDKRuntime-{region}-{hash})
  3. Attach a custom policy with the above permissions
  4. Or use AWS managed policies: AmazonS3FullAccess, AWSAmplifyFullAccess (not recommended for production)

Deployment Configuration

After running agentcore configure, your .bedrock_agentcore.yaml will look like:

default_agent: agent_streaming
agents:
  agent_streaming:
    name: agent_streaming
    entrypoint: agent_streaming.py
    deployment_type: direct_code_deploy
    runtime_type: PYTHON_3_11
    platform: linux/arm64
    aws:
      region: us-west-2
      execution_role: arn:aws:iam::ACCOUNT_ID:role/AmazonBedrockAgentCoreSDKRuntime-us-west-2-HASH
      network_mode: PUBLIC
      observability:
        enabled: true

Container Environment

The Dockerfile creates a hybrid Python + Node.js environment:

FROM ghcr.io/astral-sh/uv:python3.11-bookworm-slim

# Install Python dependencies
RUN uv pip install strands-agents strands-agents-tools bedrock-agentcore

# Install Node.js 20 for building Next.js apps
RUN apt-get update && curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
RUN apt-get install -y nodejs

# Copy agent code
COPY . .

CMD ["opentelemetry-instrument", "python", "-m", "agent_streaming"]

Why both runtimes?

  • Python: Runs the AI agent and AWS API calls
  • Node.js: Builds Next.js apps locally before deployment

Programmatic Invocation

After deployment, invoke your agent programmatically using boto3, agentcore CLI or build your own interface!!

📊 Typical Performance

Step Duration Details
Code Generation 5-15s Agent writes files locally
Upload Source to S3 3-5s ~6 files, small size
npm install 20-40s Download Next.js + dependencies
npm build 10-20s Compile Next.js app
npm export 5-10s Generate static HTML
Upload Built to S3 5-10s ~12 files + assets
Amplify Deploy 10-20s CDN distribution
Total 60-120s End-to-end deployment

🎭 Agent Behavior

The agent is autonomous - it decides:

  • Which tools to call and in what order
  • When to generate new code vs edit existing
  • When to deploy vs just show code
  • How to structure the Next.js app

Example decision tree:

User: "Create a landing page"
→ Agent: generate_nextjs_app + write_react_component + write_css_file

User: "Deploy it"
→ Agent: deploy_app_to_amplify

User: "Add a contact form"
→ Agent: download_app_for_editing + write_react_component + deploy_app_to_amplify

⚠️ What It DOESN'T Do (vs other vibe coding platforms)

Unlike Cursor, v0, or Lovable, VibeCoder:

  • ❌ No fancy UI - it's a conversational agent
  • ❌ No real-time preview during generation
  • ❌ No drag-and-drop components
  • ❌ No built-in database/backend (static sites only)
  • ❌ No SSR support (static export only)

But what it DOES have:

  • ✅ Full source code ownership (stored in your S3)
  • ✅ Complete version history with rollback
  • ✅ No vendor lock-in (runs on your AWS account)
  • ✅ Transparent deployment pipeline
  • ✅ ~300 lines of code you can modify
  • ✅ Runs on serverless infrastructure

📁 Project Structure

vibecoderclone/
├── agent_streaming.py          # Main agent with tools + streaming
├── deploy_with_source.py       # Deployment engine with versioning
├── rollback_amplify.py         # Rollback utility
├── Dockerfile                  # Container with Python + Node.js
├── requirements.txt            # Python dependencies
├── .bedrock_agentcore.yaml     # AgentCore configuration
└── README.md                   # This file

🔧 Key Files

agent_streaming.py

Main agent file with:

  • BedrockAgentCore integration (@app.entrypoint)
  • Strands Agent initialization with 10 tools
  • Streaming response handler
  • CLI mode for local testing

deploy_with_source.py

Deployment engine that:

  • Manages S3 uploads (source + built files)
  • Orchestrates npm builds
  • Calls AWS Amplify APIs
  • Tracks version metadata
  • Supports rollback

rollback_amplify.py

Standalone CLI tool for:

  • Listing deployment history
  • Redeploying previous versions
  • Safety confirmations

🌐 AWS Services Used

S3 Operations

s3_client.upload_file(local, Bucket, Key)      # Upload files
s3_client.download_file(Bucket, Key, local)    # Download files
s3_client.get_object(Bucket, Key)              # Read metadata
s3_client.put_object(Bucket, Key, Body)        # Write metadata

Amplify Operations

amplify_client.create_app(name, platform)            # Create app
amplify_client.start_deployment(appId, branch, url)  # Deploy
amplify_client.get_job(appId, branch, jobId)         # Check status
amplify_client.list_jobs(appId, branch)              # List deployments

🎯 Use Cases

  1. Rapid Prototyping - Generate landing pages, portfolios, dashboards in minutes
  2. Client Demos - Create live demos from descriptions
  3. A/B Testing - Deploy multiple versions, compare performance
  4. Learning Tool - See how AI structures React apps
  5. Version Control - Maintain history of all iterations with prompts

🚧 Limitations

Technical Constraints

  • Static sites only - No server-side rendering (Next.js static export)
  • No backend - Can't create APIs or databases (use external services)
  • Build time - 60-120s deployment (not instant like some platforms)
  • AWS only - Requires AWS account and credentials

Framework Support

  • ✅ Next.js 14 (static export)
  • ✅ React 18
  • ❌ Vue, Svelte, Angular (not yet implemented)
  • ❌ SSR/ISR (Amplify S3 limitation)

🔮 Future Enhancements (PR / Fork please)

  1. Authentication - API keys for production use
  2. Multi-user - Support multiple apps per user
  3. Custom domains - Connect your own domains
  4. Environment variables - Per-app configuration
  5. Direct file editing - Edit specific files without full regeneration
  6. More frameworks - Vue, Svelte, Angular support
  7. Cleanup automation - Delete old S3 deployments after X days
  8. Web UI - Visual interface for the agent

📝 Environment Variables

# Docker Container
AWS_REGION=us-east-1
AWS_DEFAULT_REGION=us-east-1
DOCKER_CONTAINER=1
UV_SYSTEM_PYTHON=1
PYTHONUNBUFFERED=1

# Agent (optional)
BYPASS_TOOL_CONSENT=true  # Auto-approve tool execution

🎓 How It Works: Deep Dive

1. Entry Point (BedrockAgentCore)

from bedrock_agentcore.runtime import BedrockAgentCoreApp
app = BedrockAgentCoreApp()

@app.entrypoint
async def agent_invocation(payload, context):
    user_message = payload.get("prompt")
    agent_stream = agent.stream_async(user_message)
    
    async for event in agent_stream:
        # Stream text chunks back to user
        yield event["text"]

2. Agent Orchestration (Strands)

from strands import Agent, tool

agent = Agent(
    tools=[
        generate_nextjs_app,
        write_react_component,
        deploy_app_to_amplify,
        # ... 7 more tools
    ]
)

3. Deployment Pipeline

def deploy_new_version(app_name, source_dir, prompt):
    # 1. Create/get Amplify app
    app_id = create_amplify_app_if_needed(app_name)
    
    # 2. Upload source to S3
    upload_directory_to_s3(source_dir, f"projects/{app_id}/source/v1/")
    
    # 3. Build locally
    subprocess.run(['npm', 'install'], cwd=source_dir)
    subprocess.run(['npm', 'run', 'build'], cwd=source_dir)
    
    # 4. Upload built files to S3
    upload_directory_to_s3(built_dir, f"projects/{app_id}/deployments/{ts}/")
    
    # 5. Deploy to Amplify
    amplify_client.start_deployment(
        appId=app_id,
        sourceUrl=f"s3://bucket/projects/{app_id}/deployments/{ts}/"
    )
    
    # 6. Wait for completion
    while status != 'SUCCEED':
        time.sleep(5)
    
    # 7. Return live URL
    return f"https://main.{app_id}.amplifyapp.com"

🏆 Key Design Decisions

  1. Streaming Responses - Uses async generators for real-time feedback
  2. Tool Consent Bypass - Agent can execute tools without asking (faster UX)
  3. Static Export Only - Next.js configured with output: 'export' (Amplify S3 limitation)
  4. Local Builds - Builds happen in container, not on Amplify (S3 deployment constraint)
  5. Version Immutability - Each version's source frozen in S3 (true rollback)
  6. Single URL - All versions deploy to same URL, content changes (Amplify behavior)

📚 Additional Resources

🤝 Contributing

This is a proof-of-concept project demonstrating AI agents on AWS Bedrock AgentCore. Feel free to:

  • Fork and modify for your use case
  • Add support for more frameworks
  • Improve the deployment pipeline
  • Build a web UI on top

♥️♥️♥️

📄 License

MIT License - Feel free to use this code for your own projects.

🙏 Acknowledgments

Built with:

  • AWS Bedrock AgentCore - Serverless agent runtime
  • Strands - AI agent framework
  • AWS Amplify - Static site hosting
  • Next.js - React framework

Built in ~300 lines of code. Deployed on AWS Bedrock AgentCore. Generates live web apps in under 2 minutes.

About

AI-powered web app builder running on AWS Bedrock AgentCore. Generates, deploys, and iterates on Next.js apps in under 2 minutes.

Resources

Readme
Activity

Stars

5 stars

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages