Skip to content

Latest commit

 

History

History
65 lines (53 loc) · 2.04 KB

project-plan.md

File metadata and controls

65 lines (53 loc) · 2.04 KB

OpenManus Project Plan

Overview

OpenManus is a web application that allows users to input prompts, which are then used to run browser-use automations. The application will display the automation steps in a chat panel in real-time.

Architecture

Frontend

  • React with TypeScript
  • Shadcn UI components
  • State management with React Context API
  • Real-time updates with WebSockets

Backend

  • Node.js with Express
  • WebSocket server for real-time communication
  • Integration with browser-use library

Component Structure

Frontend Components

  1. Layout Components

    • MainLayout: Overall application layout
    • Header: Application header with logo and navigation
    • Footer: Application footer with links

  2. Core Components

    • PromptInput: Text area for entering prompts
    • ChatPanel: Display area for automation logs
    • BrowserPreview: Optional component to show browser state

  3. UI Components

    • Button: Reusable button component
    • Card: Container component
    • Dialog: Modal dialog component
    • Toast: Notification component

Backend Structure

  1. API Routes

    • /api/prompt: Endpoint to receive prompts
    • /api/status: Endpoint to check automation status

  2. Services

    • BrowserUseService: Interface with browser-use library
    • LoggingService: Handle logging of automation steps
    • WebSocketService: Manage real-time communication

Data Flow

  1. User enters prompt in PromptInput component
  2. Frontend sends prompt to backend via API
  3. Backend initializes browser-use automation
  4. As automation runs, steps are logged and sent to frontend via WebSockets
  5. ChatPanel component displays logs in real-time
  6. Upon completion, success/failure status is displayed

Implementation Plan

  1. Set up project structure and dependencies
  2. Implement basic UI components with Shadcn
  3. Create backend server with Express
  4. Integrate browser-use library
  5. Implement WebSocket for real-time communication
  6. Connect frontend and backend
  7. Add error handling and edge cases
  8. Polish UI and UX
  9. Testing and debugging