Skip to content

README.md

Latest commit

 

History

History
94 lines (65 loc) · 3.76 KB

README.md

File metadata and controls

94 lines (65 loc) · 3.76 KB
Raw

🤖 AgentForge

A Next-Generation, In-Browser Autonomous AI Coding Environment

Next.js WebContainers Zustand Tailwind

⚡ What is AgentForge?

AgentForge is a revolutionary browser-based IDE that pairs you with a team of autonomous AI agents. Instead of just generating code snippets, AgentForge utilizes WebContainers to spin up an entire Node.js development environment directly in your browser.

You provide a prompt. The AI pipeline plans the architecture, writes the code, handles the styling, and instantly previews the live application in an isolated sandbox. No local setup required.

🌟 Key Features

  • Multi-Agent Pipeline:
    • 🧭 Nova (Planner): Breaks your prompt into actionable tasks.
    • 🏗️ Athena (Architect): Designs the project file structure.
    • ⚡ Forge (Coder): Writes production-ready code with an enforced premium design system.
    • 🔍 Aegis (Reviewer): Checks the code for bugs and security vulnerabilities.
  • In-Browser WebContainers: Runs a full Node.js environment, pnpm package manager, and Vite/Next.js dev servers natively in your browser tab.
  • Local-First Security: Your API keys are stored securely in localStorage. Advanced tool executors prevent path traversal and destructive terminal commands (e.g., rm -rf).
  • Puter.js Integration: By default, leverages Puter.js for free AI model access (Claude 3.5 Sonnet, GPT-4o) and free image generation!
  • Premium Design System: Agents are strictly instructed to generate beautiful UIs using Tailwind CSS, shadcn/ui, glassmorphism, and micro-animations.

🚀 Getting Started

Prerequisites

Make sure you have Node.js and pnpm installed.

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/agentforge.git
cd agentforge

  2. Install dependencies:

    pnpm install

  3. Start the development server:

    pnpm dev

  4. Open http://localhost:3000 in your browser.

Note on WebContainers: WebContainers require special HTTP headers to function securely. This project uses custom headers in next.config.mjs (Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy) to enable SharedArrayBuffer.

⚙️ Configuration

AgentForge works out of the box using Puter.js for free AI models. If you hit rate limits or prefer your own keys, click the Settings icon in the dashboard to securely add your OpenAI, Anthropic, or Google Gemini API keys. Keys are persisted entirely in your browser's local storage.

🏗️ Architecture

  • Frontend: Next.js 14 (App Router), React 18, Tailwind CSS, Framer Motion.
  • Editor: Monaco Editor (@monaco-editor/react).
  • State Management: Zustand (with shallow rendering for high performance).
  • Runtime: WebContainers API.
  • File Parsing: JSZip for project exports.

🤝 Contributing

Contributions are welcome! If you'd like to improve the AI prompts, add new templates, or optimize the WebContainer implementation, feel free to open a Pull Request.

📄 License

MIT License. See LICENSE for more information.


Built with passion to push the boundaries of AI coding.