Skip to content

new_ui

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

new_ui

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
backend
backend
 
 
frontend
frontend
 
 
scripts
scripts
 
 
README.md
README.md
 
 

README.md

DeepCode New UI

Modern, intelligent UI for DeepCode - AI-powered code generation platform.

Technology Stack

  • Backend: FastAPI (Python)
  • Frontend: React 18 + TypeScript + Vite
  • Styling: Tailwind CSS + shadcn/ui
  • State Management: Zustand
  • Real-time Communication: WebSocket
  • Workflow Visualization: React Flow
  • Code Display: Monaco Editor

Features

Intelligent Features

  1. Real-time Streaming Output - Watch code generation in real-time, like ChatGPT
  2. Smart Context Awareness - Remembers conversation history, provides intelligent suggestions
  3. Adaptive Interface - Layout adjusts based on task type
  4. Visual Workflow - Draggable flow-chart style task visualization

Design Style

  • Clean, modern design inspired by Notion/Linear
  • Light theme with blue accent colors
  • Inter font for text, JetBrains Mono for code

Project Structure

new_ui/
├── backend/                    # FastAPI Backend
│   ├── main.py                # Entry point
│   ├── config.py              # Configuration
│   ├── api/
│   │   ├── routes/            # REST API endpoints
│   │   └── websockets/        # WebSocket handlers
│   ├── services/              # Business logic
│   └── models/                # Pydantic models
│
├── frontend/                   # React Frontend
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── pages/             # Page components
│   │   ├── hooks/             # Custom hooks
│   │   ├── stores/            # Zustand stores
│   │   ├── services/          # API client
│   │   └── types/             # TypeScript types
│   ├── package.json
│   └── vite.config.ts
│
└── scripts/
    ├── start_dev.sh           # Development startup
    └── build.sh               # Production build

Quick Start

Prerequisites

  • Python 3.10+
  • Node.js 18+
  • npm or yarn

Development

  1. Start both backend and frontend:
cd new_ui
chmod +x scripts/start_dev.sh
./scripts/start_dev.sh
  1. Or start separately:

Backend:

cd new_ui/backend
pip install -r requirements.txt  # First time only
uvicorn main:app --reload --port 8000

Frontend:

cd new_ui/frontend
npm install  # First time only
npm run dev
  1. Access the application:

Production Build

cd new_ui
chmod +x scripts/build.sh
./scripts/build.sh

API Endpoints

REST API

Method Endpoint Description
POST /api/v1/workflows/paper-to-code Start paper-to-code workflow
POST /api/v1/workflows/chat-planning Start chat-based planning
GET /api/v1/workflows/status/{task_id} Get workflow status
POST /api/v1/requirements/questions Generate guiding questions
POST /api/v1/requirements/summarize Summarize requirements
POST /api/v1/files/upload Upload file
GET /api/v1/config/settings Get settings

WebSocket Endpoints

Endpoint Description
/ws/workflow/{task_id} Real-time workflow progress
/ws/code-stream/{task_id} Streaming code output
/ws/logs/{session_id} Live log streaming

Configuration

The new UI reads configuration from the existing DeepCode config files:

  • mcp_agent.config.yaml - LLM provider, models, MCP server settings
  • mcp_agent.secrets.yaml - API keys

Integration

The new UI integrates with existing DeepCode components:

  • workflows/agent_orchestration_engine.py - Core workflow execution
  • workflows/agents/ - Specialized agents
  • utils/llm_utils.py - LLM provider management

Browser Support

  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge

License

MIT License - see main DeepCode license.