Trading Analysis UI & MCP Project
Overview ā instead of ##Overview
This project is a part of the MCP (Model Context Protocol) ecosystem, providing a modern web-based UI and API for uploading, processing, and analyzing trading screenshots. It leverages FastAPI for backend services and React (served via CDN) for the frontend, enabling smart file handling, trade extraction, and analytics.
MCP (Model Context Protocol): A flexible protocol and toolkit for building AI-powered, context-aware applications. This project demonstrates MCP's capabilities in the domain of trading analysis.
Trading Analysis UI: A user-friendly web interface for uploading trade screenshots, extracting trade data, and managing trade logs.
Features ā instead of ##Features
š Web UI: Drag & drop upload, image paste, and file management
š§ Automatic Trade Extraction: Extracts trade data from images using OCR and custom logic
š·ļø Smart File Naming: Organizes files by trade metadata and date
š File Management: List, search, and serve uploaded/processed images
š Trade Analytics: Search logs and view trading statistics
š CORS Enabled: For easy integration with other tools
š API Documentation: Available at
/docs
when the server is running
Directory Structure
Setup & Installation
Clone the repository
Install Python dependencies
(Optional) Configure environment variables
If you use a .env
file, place it in the project root.
Run the UI server
The server will start at http://localhost:8003
Usage
Web UI
Open http://localhost:8003 in your browser
Drag & drop or paste trading screenshots to upload and analyze
View processed images and trade logs
API Endpoints
POST /extract-trade-upload
ā Upload and process an imagePOST /extract-trade
ā Extract trade data from an existing image pathPOST /search-trades
ā Search trade logsGET /trading-stats
ā Get trading statisticsGET /list-images
ā List all available imagesGET /trade-log
ā Get raw trade log contentGET /file-structure
ā Get organized file structureGET /uploads/{filename}
ā Serve uploaded filesGET /processed/{date_folder}/{filename}
ā Serve processed files
API documentation is available at http://localhost:8003/docs
Example: Upload and Extract Trade Data
Extending & Customizing
Trade Extraction Logic: Edit
tools/extract_trade.py
to improve OCR or parsing.Trade Analytics: Edit
tools/trade.py
for custom search/statistics.UI Customization: The UI is served as a React app via CDN; you can replace the HTML template in
ui_server.py
for a custom frontend.
Credits
Nischal Bhandari
Built with FastAPI, React, and Tailwind CSS
Part of the Model Context Protocol (MCP) project
MCP
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
A FastAPI-based server that provides a web UI for uploading, processing, and analyzing trading screenshots with automatic trade data extraction and analytics.