feat(ui): re-add chat UI, allow simple UI for MCP OBO auth - #31893
Conversation
chore(ci): promote internal staging to main
chore(ci): promote internal staging to main
chore(ci): promote internal staging to main
chore(ci): promote internal staging to main
Reintroduces the /ui/chat page and its components (removed in #30178 as unreachable dead code) now that it has a real entry point: an enable_chat_ui UI setting, off by default, that shows a Chat nav item in the sidebar when turned on. The page lets users chat with an LLM and connect their own MCP server credentials via OAuth (used automatically for their subsequent tool calls) rather than a shared credential. (cherry picked from commit ec6d71b)
The chat sidebar header rendered the /get_image logo (which already contains the LiteLLM wordmark) and then a separate LiteLLM text span right after it, so the header read "LiteLLM LiteLLM". The main navbar shows the same logo with no adjacent text label; match that and drop the redundant span.
|
Krrish Dholakia seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Greptile SummaryThis PR re-introduces the
Confidence Score: 5/5The new chat page and its access-control gating are implemented consistently across navbar, sidebar, and the page route; backend changes are minimal and additive. All changes are additive and off-by-default. The access-control guard, URL construction, and dependency arrays are correctly implemented. The three observations are non-blocking style/edge-case suggestions. chat/page.tsx and MCPAppsPanel.tsx have minor edge-case findings relevant to custom server_root_path deployments and large MCP server registries respectively.
|
| Filename | Overview |
|---|---|
| ui/litellm-dashboard/src/app/chat/page.tsx | Access-control guard correctly blocks non-admins, but the blocked redirect uses uiRoot from uiConfig without waiting for that hook to finish loading — can redirect to /ui/ on custom server_root_path deployments. |
| ui/litellm-dashboard/src/components/chat/ChatPage.tsx | New 1554-line chat UI; uiRoot correctly included in all effect/callback dependency arrays; streaming, comparison mode, abort, and edit-and-resend paths look sound. |
| ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx | Tool-count fetch correctly chunked (TOOLS_FETCH_CONCURRENCY=5), but OAuth credential checks fire in unbounded parallel. |
| ui/litellm-dashboard/src/components/chat/useChatHistory.ts | localStorage-backed history with user-scoped keys, 100-conversation cap, correct userId-change reload. Minor: loadFromStorage called twice on mount. |
| ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx | Clean Chat entry addition; correctly gated with admin-discovery affordance; uses migratedHref for URL construction. |
| litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py | Adds enable_chat_ui to UISettings model and ALLOWED_UI_SETTINGS_FIELDS. Minimal and correct. |
Reviews (5): Last reviewed commit: "fix(ui): enforce enable_chat_ui at the /..." | Re-trigger Greptile
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c17a46e55b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Reuses the navbar ViewSwitcher to toggle between the dashboard and the chat app. The Chat entry is gated on the enable_chat_ui admin setting: clickable for everyone once enabled, hidden from non-admins when off, and shown greyed to admins when off with an 'Enable in Admin Settings' hint that links to the admin panel where the toggle lives.
PR overviewAll previously flagged issues have been addressed. No open security concerns remain on this pull request. Security reviewNo open security issues remain on this pull request. Fixed/addressed: 3 · PR risk: 0/10 |
Chat history was stored under a single global localStorage key, so different users sharing a browser profile could see each other's saved prompts, responses, and MCP event history.
…itellm_ff_chat_ui # Conflicts: # ui/litellm-dashboard/eslint-metrics.json # ui/litellm-dashboard/eslint-suppressions.json
Merging origin/litellm_internal_staging into this branch silently dropped the remark-gfm entry from package.json/package-lock.json, breaking the production build since ChatMessages.tsx and ChatPage.tsx import it directly.
- include uiRoot in the stale-ID redirect effect and handleSend deps so navigation respects a custom server_root_path once useUIConfig() resolves - don't restore multi-model comparison mode when opening a saved conversation directly via URL - navigate back to the empty chat URL when deleting the active conversation - cap MCPAppsPanel's per-server listMCPTools fanout to 5 concurrent requests instead of firing one per registered server unbounded
|
@greptile review |
getDashboardUrl built the link from NEXT_PUBLIC_BASE_URL, which is the API proxy URL and empty in production, producing / instead of /ui/. Point it at the dashboard's own /ui/ path instead.
|
@greptile review |
…g them The chat feature files carried eslint-suppressions.json entries for real violations (no-restricted-imports, react-hooks/set-state-in-effect, react-hooks/refs, max-params, max-nested-callbacks) instead of fixing them. Addresses each properly: - ChatMessages.tsx: replace a ref read during render with real state for the reasoning-content remount key - ChatPage.tsx: drop unused import, bundle streamToModel's and sidebarNavItem's params into option objects, replace two reset-state-on-prop-change effects with the react.dev-recommended during-render state adjustment - ConversationList.tsx: same during-render adjustment for the search modal's query reset - MCPAppsPanel.tsx: extract per-server tool-count/oauth-status fetches into named callbacks to cut nesting depth, drop a redundant setState-at-effect-start call, and move the detail-view tools fetch to react-query (matching the rest of the codebase) instead of a manual effect+state fetch - MCPCredentialsTab.tsx: migrate off the deprecated @tremor/react table to antd's Table/Tag, and move credential fetching to react-query Run afterward, which drops all six src/components/chat/* entries from eslint-suppressions.json now that the underlying violations are gone.
|
@greptile review |
…itellm_ff_chat_ui # Conflicts: # ui/litellm-dashboard/eslint-suppressions.json
…vigation The enable_chat_ui setting only hid the Chat entry in the sidebar and ViewSwitcher; an authenticated user could still open /ui/chat directly while the setting was disabled. Redirect non-admins to the dashboard when it's off, matching the same admin-can-discover-it exception the nav nav already uses.
|
@greptile review |
Remove the admin bypass that let admins access /ui/chat when enable_chat_ui was disabled. When the setting is off, nobody can reach the route or see the Chat entry in the ViewSwitcher, regardless of role Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
No more added eslint-suppressions. Thanks!
Relevant issues
User feedback:
"""
Main things id want for nontechnical users are virtual keys and oauth 'apps' for mcp servers.
The old ui/chat seemed legitimately useful too so I can give users access to a chat with tools without them having to setup a full local environment.
"""
Linear ticket
Pre-Submission checklist
Please complete all items before asking a LiteLLM maintainer to review your PR
@greptileaiand received a Confidence Score of at least 4/5 before requesting a maintainer reviewDelays in PR merge?
If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).
Screenshots / Proof of Fix
Type
🆕 New Feature
🐛 Bug Fix
Changes
Brings back the
/ui/chatpage that #30178 removed as unreachable dead code, now that it has a real entry point. The page lets a user chat with an LLM and connect their own MCP server credentials via OAuth, so those credentials are used for that user's subsequent tool calls rather than a shared credential; this is the "chat with tools without a full local environment" askThe page sits behind an admin setting. A new
enable_chat_uiUI setting (Admin Settings -> UI Settings), off by default, controls whether the Chat entry is exposed to users. Reverting #30178 restores the page and its components; the flag is what makes it reachableAdds an AI Gateway / Chat switcher to the navbar by extending the existing
ViewSwitcher(the same dropdown used for plugin modes) rather than adding a parallel control. The Chat entry is gated onenable_chat_ui: clickable for everyone once enabled, hidden from non-admins while off, and shown greyed to admins while off with an "Enable in Admin Settings -> UI Settings" hint that links straight to the admin panel where the toggle lives. This means an admin who has not enabled it yet still sees the affordance and is told how to turn it on, while regular users are not shown a dead control. Navigation uses the existingmigratedHrefhelper so the URLs stay correct under the/uimount and anyserver_root_pathAlso fixes a small visual bug in the restored chat sidebar: the header rendered the
/get_imagelogo (which already contains the LiteLLM wordmark) and then a separate "LiteLLM" text span next to it, so the header read "LiteLLM LiteLLM". Dropped the redundant span to match how the main navbar renders the same logoTests:
ViewSwitcher.test.tsxcovers the gating matrix (enabled navigates to the chat app, disabled greys out and routes admins to the admin panel, disabled hides the entry from non-admins) plus the existing plugin-mode behavior