UI example - I gave this to Auto GPT as well

[kierrereeg]

I have created a UI structure that can handle the maximum complexity required for your project now and into the future. It is a tabbed workspace structure with three control areas - one on the left, one on the right, and one at the bottom, which can be organized into tabs. The control areas on the left or right can change with the buttons on either side, allowing for a large amount of complexity in the GUI as you build it out. While it may be overkill at the beginning, this structure will be helpful in the long run.

The control area on the left is mainly for organizing chats. The workspace tabs are for each individual large grouping of tasks you want to encapsulate. When you change the workspace, it updates control areas two and three with updated data for that workspace. Control area three can have a spreadsheet-like functionality, similar to Monday.com, to organize individual tasks set up in a workspace for a larger goal, also in control area three you can expand this out with more tabs to do any other sort of controls with regard to organizing tasks that people may want to do, maybe it's Gantt charts or maybe at some other form factor, but either way they just live in these tabs. Control area two on the right can store various AI agent settings, such as agent personalities and saved prompts for repeated use.

The proposed image shows the control area one on the left, main workspace with tabs, and control area two on the right. Each time you click one of the buttons on the right, the control area displays different data. There is also a tab structure in control area three at the bottom. You can drag and resize each partition, similar to how VS code and Github work.

In control area two, you can save useful prompts or AI code snippets to reuse over and over again. The buttons on the right can show all the agents built up over time, and you can assign specific agents to specific tasks. Each chat name in the folders on the left would also be associated with a workspace and goals. You need a hierarchy of tasks to break up large goals into sub-tasks and assign them to different agents.

Additionally, you can have plugins for the UI, where each plugin can become a button on the right, and control area two can have a dedicated space for each plugin to execute its function. As people add more plugins, they stack up on the button section, and clicking the button will display more information from each plugin in control area two.

In the Monday.com-style spreadsheet functionality, you can see how much money you're spending on each AI agent and be able to kill off processes. You also want to have primary, secondary, and tertiary goals for each agent, and adjust the goals while it's working. You can assign multiple agents to tasks in each workspace, and have an area for personal settings that lives on the buttons on the far left. In the personal settings, you can set limits on how much you're willing to spend on different AI bots. One button on the left will control all your connections into various AI agents, such as Chad GPT, Anthropic, or Stability AI. Another button on the left can connect to various APIs that are not AI agents, such as Google Sheets, Google Docs, or Google Firebase, or even stock trading accounts.

To achieve this, you may need to have a GUI way to connect to different APIs by entering the keys for each one. The proposed UI structure can handle all of these requirements and is designed to be flexible to accommodate any other additional features in the future.

I hope this proposal helps. The UI structure I suggest is designed to handle a large amount of complexity as you build it out in the future.

These links are from another useful UI that is out there for reference https://twitter.com/mckaywrigley/status/1646684564956524544?s=20

https://github.com/mckaywrigley/chatbot-ui

[francip]

I was building something way simpler with Gradio, but hey if this is up and running, by all means we can merge it for folks to use.

[kierrereeg]

Sorry, its just a wireframe, I wish I had it up and running, but I'm looking for an AI to be able to help me create the code for something like that, this is just an attempt to provide a structure for people to be able to see to help the imagination!