OpenManus - AI Agent Platform & App Builder

A full-stack web application for building, deploying, and scaling AI agents. Combines the best features of ChatGPT, Manus.im, Vercel, and Ulio.ai into a comprehensive AI agent platform.

Features

• 🤖 Visual Agent Builder - Drag-and-drop interface to create AI agents
• 💬 Real-time Chat - Stream responses from your agents in real-time
• 📊 Dashboard - Monitor agent performance and conversations
• 🏪 Agent Gallery - Discover and fork public agents
• 🔐 Team Management - Collaborate with team members
• 🎯 Multi-Model Support - Use GPT-4, Claude, and open-source models
• 🛠️ Tool Integration - Add tools, plugins, and external APIs to your agents

Tech Stack

Frontend

• Framework: Next.js 14 with React 18
• Language: TypeScript
• Styling: Tailwind CSS + Custom Design System
• State Management: React Query + Zustand
• Forms: React Hook Form
• UI Components: Shadcn/ui
• Canvas: React Flow (for agent builder)
• Real-time: Socket.io client, Server-Sent Events

Backend

• Runtime: Node.js
• Framework: Next.js API Routes
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth.js v5 with OAuth
• Real-time: WebSockets (Socket.io)
• AI Integration: LangChain.js, LangGraph.js

Packages

• @openmanus/db - Prisma database schema and migrations
• @openmanus/types - Shared TypeScript types
• @openmanus/ui - Design system and reusable components

Project Structure

OpenManus/
├── apps/
│   ├── web/                 # Next.js 14 frontend application
│   │   ├── app/            # App Router pages
│   │   ├── components/     # React components
│   │   ├── lib/            # Utilities and hooks
│   │   ├── styles/         # Global styles
│   │   └── public/         # Static assets
│   └── api/                # Backend API (optional separate service)
├── packages/
│   ├── db/                 # Prisma database
│   ├── types/              # Shared TypeScript types
│   └── ui/                 # Design system
├── turbo.json              # Monorepo config
└── package.json            # Root package config

Pages Overview

Authentication

• /auth/login - Sign in with OAuth or email
• /auth/signup - Create new account

Dashboard

• /dashboard - Home dashboard with stats and recent activity
• /agents - List and manage user's agents
• /agents/new - Create new agent
• /agents/[id] - Agent details
• /agents/[id]/builder - Visual agent builder with canvas
• /agents/[id]/chat - Test agent with chat interface
• /gallery - Discover public agents
• /settings - Account and team settings

API Endpoints

Agents

• GET /api/agents - List user's agents
• POST /api/agents - Create new agent
• GET /api/agents/[id] - Get agent details
• PUT /api/agents/[id] - Update agent
• DELETE /api/agents/[id] - Delete agent
• POST /api/agents/[id]/publish - Publish agent

Conversations

• GET /api/conversations - List conversations
• POST /api/conversations - Create conversation
• GET /api/conversations/[id] - Get conversation
• POST /api/conversations/[id]/messages - Send message (streaming)
• GET /api/conversations/[id]/messages - Get messages

Gallery

• GET /api/gallery - List public agents
• POST /api/gallery/[id]/fork - Fork public agent

Database Schema

Key tables:

• users - User accounts and profiles
• teams - Team/workspace information
• agents - AI agent configurations
• conversations - Chat conversations
• messages - Individual messages
• integrations - API integrations (OpenAI, Anthropic, etc.)
• tools - Available tools/plugins

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL 14+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/Army161/OpenManus.git
   cd OpenManus

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.local.example .env.local

   Edit .env.local with your configuration:

   • Database URL
   • OAuth credentials (Google, GitHub)
   • AI API keys (OpenAI, Anthropic)
   • NextAuth secret

4. Set up database

   npm run db:migrate
   npm run db:seed

5. Start development server

   npm run dev

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

Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Run production server
npm start

# Run linting
npm run lint

# Type checking
npm run type-check

# Format code
npm run format

# Database commands
npm run db:generate    # Generate Prisma client
npm run db:migrate     # Run migrations
npm run db:studio      # Open Prisma Studio

Monorepo Commands

# Run dev on all packages
npm run dev

# Build all packages
npm run build

# Lint all packages
npm run lint

Implementation Phases

Phase 1 ✅ - Foundation

• Monorepo setup with Turborepo
• Next.js frontend initialization
• Prisma database schema
• API route stubs
• Dashboard pages
• Design system

Phase 2 - Authentication & Core Features

• NextAuth.js OAuth integration
• Database connection
• Agent CRUD operations
• Conversation management
• Real-time WebSocket setup

Phase 3 - Agent Builder

• React Flow canvas implementation
• Node palette (input, LLM, tool, condition, output)
• Canvas state management
• Preview and testing

Phase 4 - AI Integration

• LangChain.js setup
• Multi-model support
• Tool execution engine
• Streaming responses

Phase 5 - Advanced Features

• Agent versioning
• Team collaboration
• Analytics and monitoring
• API management

Phase 6 - Deployment

• CI/CD pipeline
• Production deployment
• Performance optimization
• Security hardening

Design Inspiration

The design combines aesthetic elements from:

• ChatGPT - Clean, minimal interface with gradient accents
• Manus.im - Agent-focused workflows and visual builder
• Vercel - Modern SaaS design patterns and typography
• Ulio.ai - Team management and SaaS features

Color Palette

• Primary: #10A37F (Teal)
• Secondary: #EC4899 (Pink)
• Dark backgrounds: #0D0D0D, #1E1E1E
• Light text: #F7F7F8

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Support

For issues and questions, please visit the GitHub Issues page.

---

Built with ❤️ for AI enthusiasts and developers