EC2 Prompt Control

A simple, non-technical web application that allows users to control EC2 instances using natural language prompts. The app sends prompts to an existing API (API Gateway → Lambda AgentProxy → Bedrock Agent) and displays the agent's responses.

Features

• Natural Language Control: Send prompts like "Start the dev-server instance" or "Stop the dev-server instance"
• Quick Actions: Pre-filled buttons for common operations
• API Configuration: Configurable API URL and optional API key with localStorage persistence
• Session History: View all previous conversations (newest first)
• Error Handling: Comprehensive error messages for network and API issues
• Keyboard Shortcuts: Use Cmd/Ctrl + Enter to submit prompts
• Responsive Design: Works on desktop and mobile devices

Tech Stack

• React 19 with TypeScript
• Vite for fast development and building
• Tailwind CSS for styling
• Fetch API for HTTP requests

How to Run

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser: Navigate to the URL shown in the terminal (typically http://localhost:5173)

Usage

1. Configure API: The default API URL is pre-filled. Optionally add an API key if required.

2. Send Prompts:

   • Type your prompt in the textarea
   • Use quick action buttons for common operations
   • Press "Send" or use Cmd/Ctrl + Enter

3. View Responses: The agent's response will appear in the response panel

4. Check History: All conversations are saved in the session history (resets on page refresh)

API Configuration

• Default API URL: https://ef2fwq22il.execute-api.us-east-1.amazonaws.com/test/chat
• Request Format: POST with {"prompt": "<text>"} body
• Response Format: {"answer": "<text>"}
• Optional Header: x-api-key for authentication

Quick Actions

• Start dev-server: Fills prompt with "Start the dev-server instance"
• Stop dev-server: Fills prompt with "Stop the dev-server instance"

Troubleshooting

CORS Issues

If you encounter CORS errors:

1. Check that the API URL is correct
2. Verify the API has CORS enabled for your domain
3. Check browser DevTools Network tab for preflight request failures

Network Errors

• Ensure you have a stable internet connection
• Check if the API endpoint is accessible
• Verify API key if authentication is required

API Key Issues

• The API key is stored in localStorage under ec2_prompt_api_key
• Clear browser data to reset stored API key
• Check DevTools Application tab to verify localStorage

Build for Production

npm run build

The built files will be in the dist/ directory, ready for deployment to S3/CloudFront.

Project Structure

src/
├── components/
│   ├── ApiConfigBar.tsx    # API URL and key configuration
│   ├── PromptBox.tsx       # Prompt input and quick actions
│   ├── ResponsePanel.tsx   # Response display and error handling
│   └── HistoryList.tsx     # Session history display
├── lib/
│   ├── api.ts             # API wrapper and localStorage utilities
│   └── types.ts           # TypeScript interfaces
├── App.tsx                # Main application component
├── main.tsx              # Application entry point
└── index.css             # Tailwind CSS and custom styles

Acceptance Criteria Verification

• ✅ Page loads with API URL prefilled
• ✅ Quick action buttons fill textarea with correct prompts
• ✅ Send button triggers POST to API and displays answer
• ✅ Cmd/Ctrl + Enter submits prompts
• ✅ Error handling shows readable messages
• ✅ History panel shows prompt/answer pairs (newest first)
• ✅ API key persistence in localStorage
• ✅ Clean, simple UI for non-technical users

Security considerations for public hosting

If you plan to make this repository public and host the app from it, review and apply the following:

• Protect your backend

  • Require an API key on API Gateway. Do not allow unauthenticated access.
  • Set CORS to only allow your domains (e.g., http://localhost:5173 for dev and your production origin). Avoid *.
  • Enable rate limiting/throttling and consider AWS WAF with IP allowlists/managed rules.
  • Monitor and rotate API keys if they may have leaked (a public repo implies higher exposure).

• Default API URL exposure

  • This repo ships with a default public API URL in src/lib/api.ts (DEFAULT_API_URL). If your backend allows anonymous requests, anyone can hit it from their own browser.
  • Recommendation: keep API key required, restrict CORS, or replace the default with a placeholder before making the repo public.

• API key handling in the browser

  • The app stores the key in localStorage under ec2_prompt_api_key for convenience. This is fine for simple demos, but note:
    • Any XSS could exfiltrate the key. Keep dependencies updated and avoid injecting untrusted HTML.
    • Prefer a strict Content‑Security‑Policy (CSP) and avoid third‑party scripts when hosting.
    • For production-grade security, avoid long‑lived keys in the browser; use short‑lived tokens or a tiny proxy backend.

• HTTPS and security headers

  • Serve via HTTPS (CloudFront/other CDN). Enable HSTS.
  • Add response headers at the CDN:
    • Content-Security-Policy (lock down script-src, connect-src to your API URL)
    • Referrer-Policy: no-referrer
    • X-Content-Type-Options: nosniff
    • X-Frame-Options: DENY
    • Proper Cache-Control (e.g., no-cache for index.html, immutable for hashed assets)

• Operational hygiene

  • Do not commit secrets. Keep .env* files out of git (already ignored by default patterns).
  • Watch dependency updates (Dependabot/Renovate).
  • Monitor CloudWatch logs and set alerts for unusual traffic or failures.

For forks / experimentation: what to change

If someone clones this repo to use with their own backend, they should update:

• API endpoint (prefill value)

  • File: src/lib/api.ts
  • Change DEFAULT_API_URL to your own API Gateway URL.

• Quick action texts (instance name)

  • File: src/components/PromptBox.tsx
  • Update the two strings:
    • "Start the dev-server instance"
    • "Stop the dev-server instance"
  • Replace dev-server with your instance label.

• CORS allowlist (backend setting)

  • Add your dev origin (e.g., http://localhost:5173) and your deployed origin in API Gateway CORS settings.

• API key (optional)

  • If your API requires a key, enter it in the UI. It is stored under localStorage key ec2_prompt_api_key.
  • Do not hardcode keys in the repo.

• Optional branding

  • File: index.html → page title and favicon

After changes:

npm install
npm run dev
# open the printed localhost URL

Troubleshooting: use browser DevTools → Network to inspect preflight/POST requests and verify CORS/headers.