Creating react version of streamlit app

[9race]

I created a react version of the streamlit Minions app.

Application Structure

• App.tsx – Main component managing global state and coordinating the app layout.
• ChatInterface.tsx – Handles real-time chat, including JSON formatting, auto-scrolling, and message styling.
• Sidebar.tsx – Provides UI for model selection, API keys, protocol configuration, and other settings.
• ContextInput.tsx – Manages file uploads and user-provided context for queries.
• useProtocol.ts – Custom React hook for processing messages, executing protocols, and handling errors.

Protocols

• MinionProtocol is a simpler, frontend-focused protocol designed for basic AI interactions.
  1. Get supervisor's advice
  2. Get worker's answer
  3. Get supervisor's final answer
• MinionsProtocol backend-supported protocol designed that makes an API call to reuse the logic in minions.py

'server.py' is a Flask-based backend server that handles the communication between the frontend React application and the AI models (it is used by MinionsProtocol, MinionProtocol handles everything in the frontend). It has three endpoints:

• /api/run_protocol: Main endpoint for running AI protocols
• /api/upload: Handles file uploads
• /api/hello: Simple health check endpoint

The protocols are related as follows: BaseProtocol (Interface) ├── MinionProtocol (Implements) └── BaseProtocolClass (Implements) └── MinionsProtocol (Extends)

Getting Started

npm install        
python server.py  
npm run dev       

I initially experimented with re-implementing the Minion and Minions protocol for a tighter TS integration, however the MinionsProtocol proved to be much more complex, and I found it more efficient to reuse the python logic already implemented. To be consistent, we could change MinionProtocol to be the same, but for the sake of time I use MinionProtocol as initially implemented .

NOTE :

I experienced a decent amount of difficulty in testing, which proved to be rather inefficient when developing this. My machine would freeze whenever I ran a query (Minion and Minions), and I wouldn't be able to switch tabs, type, or scroll for queries ranging from <1 min (short text, Minion) to queries that were 20-30 min (testing with longer pdfs and Minions, which sometimes produce 40 jobs in one round) and often required restarting my machine. Most queries were in longer range given the increased verifying that Minions needed. This made testing and iterating rather slow.

There are some features, like streaming the messages and displaying them in the chat (rather than the query and final answer), that would be nice to add. I experimented with ReadableStream, SSE, and WebSocket (I think ReadableStream and SSE are preferred here), however the time of debugging and testing proved to be too inefficient in my opinion. The same goes for the electron app compilation -- I thought it was best to demonstrate the working React app I have now, then to spend an enormous amount of time to add these features and test again. The remote messages for Minions are displayed as their raw JSONs after the final answer. The are also many console logs to indicate progress between the supervisor and workers .

As for testing, I have tested adding text context, uploading PDF context, and both, which work for Minion and Minions in the React version. I printed out the intermediate messages and verified multiple times to ensure that the messages between the supervisor and workers made sense, that multiple job manifests and worker chats were created and sent, and that the answer, as well as the explanation and scratchpad all logically made sense.