Agent & Builder Platform

A comprehensive web application featuring two powerful sections:

1. Builder - AI-powered code generation tool (similar to bolt.new)
2. Agent - Intelligent AI assistant for task execution and automation (similar to jules.google.com and plamier.io)

Features

🔧 Builder Section

• AI Code Generation: Describe what you want to build, and the AI generates complete code for you
• Multi-Language Support: Generate code in JavaScript, TypeScript, Python, HTML, CSS, and more
• Live Code Editor: Built-in Monaco editor with syntax highlighting for editing generated code
• Export Options: Download generated code or copy to clipboard instantly
• Smart Detection: Automatically detects the appropriate language based on your description

🤖 Agent Section

• Intelligent Task Execution: AI agent that can execute various tasks autonomously
• Real-time Chat Interface: Interactive conversation with the AI agent
• Task Queue Management: Visual tracking of all tasks with status updates (pending, in-progress, completed, failed)
• Multiple Capabilities:
  • Task Automation
  • Data Analysis
  • Information Retrieval
  • Workflow Management
  • Real-time Processing

Screenshots

Builder Section

Agent Section

Agent with Completed Task

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Code Editor: Monaco Editor (VS Code's editor)
• Icons: Lucide React
• UI: Modern, responsive design with dark mode support

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Clone the repository:

git clone https://github.com/tarunerror/agent.git
cd agent

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

Build for Production

npm run build
npm start

Usage

Using the Builder

1. Click on the "Builder" button in the header
2. Describe what you want to build in the text area
3. Click "Generate Code" to let AI create the code
4. Edit the code in the live editor if needed
5. Use "Copy" or "Download" buttons to export your code
6. Switch between different programming languages using the dropdown

Using the Agent

1. Click on the "Agent" button in the header
2. Type your task or question in the input field
3. Press Enter or click the send button
4. Watch the agent process your request in real-time
5. View task status in the Task Queue sidebar
6. Continue the conversation for follow-up tasks

Project Structure

agent/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main page with section switcher
│   └── globals.css         # Global styles
├── components/
│   ├── Builder.tsx         # AI Code Builder component
│   ├── Agent.tsx           # AI Agent Assistant component
│   └── CodeEditor.tsx      # Monaco code editor wrapper
├── public/                 # Static assets
├── package.json            # Dependencies and scripts
├── tsconfig.json           # TypeScript configuration
├── tailwind.config.ts      # Tailwind CSS configuration
└── next.config.js          # Next.js configuration

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by bolt.new for the Builder section
• Inspired by jules.google.com and plamier.io for the Agent section