OpenAlgo Playground

Welcome to the OpenAlgo Playground! This is a rich, interactive browser-based client designed for developers and users to test, explore, and debug the OpenAlgo platform's features in real time.

The Playground provides a complete UI to interact with most of the core functionalities, including the REST API and the WebSocket data streams, without writing a single line of code.

Features

• Connection Management: Configure your API Key and server URLs to connect to your local OpenAlgo instance.
• Real-time Watchlist: Search for any symbol across exchanges and add it to a persistent watchlist.
• Dual Operating Modes:
  • Live Mode (Toggle ON): Uses WebSockets for real-time data on the watchlist (LTP) and in the data panels (Quote, Depth).
  • Manual Mode (Toggle OFF): Uses REST API calls to fetch data on demand when you open a panel or click "Manual Refresh".
• Detailed Data Panels:
  • Quote: A comprehensive view of the full quote packet (OHLC, Volume, Bid/Ask, etc.).
  • Depth: A professional market depth panel inspired by modern trading terminals.
  • History: A tool to fetch and view historical OHLCV data for any symbol.
• Advanced Live Logs:
  • See all API requests and WebSocket messages (both sent and received) as they happen.
  • Use the dynamic filtering system to drill down into specific logs for easy debugging.

How to Use

1. Setup

The Playground is a self-contained feature. To use it, simply open the index.html in your browser

2. Configuration

This is the most important step. For the Playground to communicate with the Flask backend from your browser, you must disable CORS enforcement in your OpenAlgo environment.

In your project's .env file, make sure you have the following line:

CORS_ENABLED = 'FALSE'

3. Running the Playground

1. Start the main OpenAlgo application by running python app.py.
2. Open index.html in your web browser.

UI Walkthrough

Settings & Info

• Info: Click the "Info" button for important setup instructions (like the CORS setting).
• Settings: Configure your Host Server, WebSocket Server, and API Key. Click Connect to establish a WebSocket connection. The status will update from "Disconnected" to "Connected".

The Watchlist

• Use the search bar to find symbols (e.g., "RELIANCE", "NIFTY JUL FUT").
• Click Add to move a symbol to your watchlist.
• The Live Updates toggle switches between WebSocket mode and API mode.
• Manual Refresh will fetch the latest LTP for all watchlist items using the /quotes API.

Data Panels (Quote, Depth, History)

• Clicking any of these buttons will open a panel with detailed information for that symbol.
• If Live Updates is ON, the panel will subscribe to the relevant WebSocket mode (mode 2 for Quote, mode 3 for Depth) and update in real time.
• If Live Updates is OFF, the panel will make a one-time API call to /quotes or /depth to display the most recent data.
• History will fetch and display the historical data as per the user Inputs.

The Log Viewer

• This panel shows all network activity generated by the Playground.
• Use the Filter Logs dropdown to narrow down the view. The filters are dynamic; selecting a high-level filter (like "Recv") will populate the next dropdown with only the available message types from the received logs.
• Click Apply to filter and Reset to clear all filters.

Contributing

This Playground is a living feature. If you have ideas for improvements or find a bug, feel free to open an issue or submit a pull request to the main OpenAlgo repository.