UI design for MCP connectors

[manojag115]

Hey folks,
Attaching some screen recordings of multiple MCP create, edit and delete flow. Let me know what you think.

Feel free to provide feedback on UI strings, the test connection flow, toast messages, anything.

MCP(s) creation flow:
https://github.com/user-attachments/assets/2ca069af-7f17-4a7c-aca5-dad168e41d28

MCP manage flow:

Screen.Recording.2026-01-14.at.2.17.46.PM.mov

MCP disconnect flow (explicitly clicking on disconnect button will also do the same thing):

Screen.Recording.2026-01-14.at.2.18.54.PM.mov

[manojag115]

cc: @MODSetter

[MODSetter]

@manojag115 Looks nice, clean, and minimal to me.
@AnishSarkar22 @CREDO23 @elammertsma Please provide feedback on the UI strings, the test connection flow, toast messages, and anything else.

[CREDO23]

UIs look good to me, thanks @manojag115 !

Small changes :

• For the connection flow :

It could be better to manage server config independently (1 tile per server): like we do for auth connectors (each account is managed independently).

• For the disconnection flow :

Instead of manually select, delete and save changes, we can handle those actions by clicking on 'Disconnect' button

[elammertsma]

@MODSetter @manojag115 I think this is truly a great start! The important thing is that we have working MCP connectors. Great work!

I think a good next step is separating them so that we have individual tiles for each MCP server. We could also look at seeing if we can avoid showing plain JSON to the user, providing form fields instead.

As for initial feedback on individual components:

• "Test connections" results in a lot of information. I think we can present this more neatly, with a simple "Connection successful" or "Connection failed" message, which the user can expand to show these details.
• Isn't it confusing and inaccurate to call deleting a configuration a successful disconnection?
• The number of connected connectors should reflect the number of servers. In the example, the connectors show a count of 1 below the chat box, but the MCP tile shows 2 servers. (Again, this would be clearer with a single tile per MCP server.)
• We can remove the "Active" text on the tile, since it's redundant. (There's no inactive state and the other connectors also do not show this.)

[manojag115]

@elammertsma

• Good feedback on test connection output. I will change it to be an expandable output as you suggested.
• I hear you on the delete configuration = disconnect part. What do you think could be the right behavior? Maybe deleting everything results in 0 servers and no disconnects?
• The number represents number of connectors and mcp is a type of connector. Should we count each server as one connector and aggregate?
• I will make the change to remove “Active” from title.

[elammertsma]

@manojag115 @MODSetter

Thank you!

As for your questions:

• I think deleting one or more servers should result in a toast that simply says "X MCP servers removed". If it's not much more work, I would rather it say "PostHog, Stripe and 4 other MCP servers removed". Later, so out of scope for now, is when we separate them into individual tiles they would just say "PostHog MCP server removed", since each one would only contain a single MCP server.
• Yes we should aggregate. I understand regarding the connector number and that the MCP server is technically a single connector, but I think it's more logical to the user that the number reflects the total number of data sources, so the number of connectors plus the number of MCP servers (minus one for the MCP connector). Imagine you had connected 1 standard connector and then 10 MCP servers. Showing a 2 would mask that 11 total sources are being used, which is probably more useful information.

[manojag115]

alright here's the latest design i have:

Screen.Recording.2026-01-16.at.2.59.07.PM.mov

It might still not be perfect, but adheres to the feedback you all had. Gonna post a PR and take any additional feedback as enhancements.
@MODSetter @elammertsma @CREDO23

[MODSetter]

@manojag115 Looks good to me. Nice job. @elammertsma What are your final thoughts?

[MODSetter]

@manojag115 Looks good to me. Nice job. It just needs to be shipped to see where we can make further improvements. @elammertsma What are your final thoughts?

[elammertsma]

@manojag115 @MODSetter looks good to me. Let's ship it and we'll beautify it later. Thank you so much!

[manojag115]

PR is up: #705 (review)
Closing this discussion for now.