[Chat UI] Beta release TODO list

[cpacker]

Project board: https://github.com/users/cpacker/projects/3

---

To use:

1. (cd chatui) pnpm install - Install deps via npm
2. (cd chatui) pnpm dev - Start the chat UI web server (should default to http://localhost:3000/)
3. memgpt server - In a separate tab/terminal start the backend server

---

Starting server from memgpt

% memgpt server
INFO:     Started server process [57128]
INFO:     Waiting for application startup.
Writing out openapi.json file
INFO:     Application startup complete.
INFO:     Uvicorn running on http://localhost:8283 (Press CTRL+C to quit)

Starting frontend from memgpt/chatui

chatui % npx nx serve
> nx run memgpt:serve:development

  ➜  Local:   http://localhost:4200/

Browser at http://localhost:4200:

---

Chat UI TODOs

Highest priority marked with ⚠️

🎄 Pending

• [Pure UI] Display current agent name somewhere in the chat view (probably top middle?)
• [Pure UI] An "agent search" box that filters the grid view based off of name
• [Pure UI] Have a "update successful" indicator / model / toast when a memory update goes through properly
• ⚠️ [Pure UI] On an exception / failed message sent: the UI should indicate that the message failed to send (similar to FB messenger etc, red text or outline indicating failed message) + propagate error message to the UI (in some capacity)
  • More details here: feat: next iteration of chatui #642 (comment)
• ⚠️ [Pure UI] On an exception / failed message sent: "typing..." lock should be released (currently gets trapped on "typing..." state
• [Pure UI] Add syntax highlighting to function call views
• ⚠️ [UI + backend] When a chat window is opened, populate it with the last N messages
  • we can start by just displaying the messages in the agent buffer agent.messages
  • eventually add a scroll-back fetch based on a paginated query to recall memory (messages from recall should be styled differently in the UI to indicate that they are out-of-context)
• ⚠️ [UI + backend] Enable viewing archival memory fragments in a modal (eg called "archival memory")
• [UI + backend] Allow modifying agent configs + base config via settings page
• [UI + backend] Allow attaching data (/attach) via a GUI / modal
• [UI + backend] Allow viewing available data sources (post /attach) via a GUI / modal
• [backend] REST requests for retrieving data in archival
• [backend] REST requests for retrieving data in recall

✅ Done

• [Pure UI] Add thinking bubble when agent is typing / response is streaming
• [Pure UI] Add "memory" viewer component (can view agent's core memories in pop-up modal in text fields w/ GET, and edit them then click save which sends a PUT)
• [Pure UI] Dark mode
• [Pure UI] Display function calls (should show everything except send_message by default)
• [Pure UI] Make landing page agent list an N x M grid (no overflow horizontal scrolling, just vertical scrolling)
• [Pure UI] Make "add new" always visible (should be left / top left in grid ordering)
• [Pure UI] On create agent click, should kill modal to indicate success / failure
• [Pure UI] Make size/width of inner thoughts + message similar
• [backend] Chat UI server should use host and port arg coming via the server command
• [backend] Chat UI server needs to shut down clean on CTRL-C (hanging process?)

🎁 Pushed to later PR? (might not be worth trying to include for a shippable v1)

- [ ] **[UI + backend]** Allow viewing custom function files in the GUI (`~/.memgpt/functions`)
- [ ] **[UI + backend]** Allow viewing custom prompt settings in the GUI (`~/.memgpt/settings`)

📦 Final tasks (cleanup)

- [ ] General stability w/ expected single-user usage (users should not see locking errors etc)
- [ ] Make sure all underlying MemGPT errors (eg `LLMJsonError`) are being propagated to the UI (no silent errors)
- [ ] Test on Windows + Linux + MacOS via pypi test package
- [ ] Clean, pleasant, delightful UI (agent-centric)

[cpacker]

@goetzrobin moved the TODOs from the old fork (now old) to here, can split this out into separate issues organized under a project if you think it makes more sense

[arduenify]

I was going to help out with this since I have experience with React.

I noticed upon running the server and the chatui that I receive 404 errors when attempting to retrieve the agents (GET /api/agents), but I have not been successful in finding which files contain the api code or any more information on these routes. Is there any way you could point me in the right direction? :) @cpacker

[goetzrobin]

@arduenify the code is here: https://github.com/cpacker/MemGPT/tree/main/memgpt/server/rest_api

There's also a /docs endpoint that shows you all the existing endpoints for the rest api.

Finally, there's this PR with my latest fixes that put the chat ui in a working state again: #847

Let me know if there's anything else I can do to help you get up and running 👍

[arduenify]

I have made a small commit to check one item off the list ([Pure UI] Display current agent name somewhere in the chat view (probably top middle?)): #864

I promise larger commits in the future ;)

[arduenify]

I think it would be helpful if agents, personas, and humans were dropdowns. I am waiting for @goetzrobin PR #847 to be merged before I continue working on this.

[goetzrobin]

@arduenify my code was merged to main, which means you are good to start working on improving the agent creation.

When you say you want agents, personas, and humans to be dropdowns what exactly do you mean? We could probably create an endpoint that returns all the available options for config from the backend, e.g. persona, model, etc. What do you think @cpacker?

I think if we have more people contribute to the REST/UI effort it would make sense to split the TODOs out in their own issues under a single project.

Last thing @cpacker. You can mark the first 3 UI only points as resolved 👍 I am working on syntax highlighting for function calls rn and of course retrieving the last messages in the chat ui!

[arduenify]

@goetzrobin, I was thinking that instead of manually typing out the human, persona, model, etc., we could retrieve that information from the API and display dropdown menus instead of textboxes for each input. We could still allow the user to manually enter these values if they prefer. However, I believe dropdowns are more intuitive and UX-friendly.

I agree with you regarding splitting the TODOs. I am working on a plan to break up the UI project board and separate things into much smaller components. This approach will prevent duplicate code and make the PRs smaller and easier to manage/merge. What do you think?

[arduenify]

I have created a new issue for the agent creation inputs: #897

[cpacker]

When you say you want agents, personas, and humans to be dropdowns what exactly do you mean? We could probably create an endpoint that returns all the available options for config from the backend, e.g. persona, model, etc. What do you think @cpacker?

I think this makes sense! Will take a bit of work to implement on the server.py / SyncServer side, but for certain fields it definitely makes sense (eg available personas, system prompts, users/humans).

[cpacker]

FYI @goetzrobin @arduenify I'm planning on adding auth to the FastAPI server via some middleware to support an auth and no-auth mode #898 , lmk if you have any strong opinions on how this should be done (probably will start on it early next week).

[goetzrobin]

Something along the lines of this: https://github.com/roy-pstr/simple-auth0-fastapi-react-app

Doesn’t have to be Auth0 but a JWT solution would be the best with the React frontend.

[arduenify]

I agree, JWT is the way to go.