Skip to content

feat(ui): re-add chat UI, allow simple UI for MCP OBO auth - #31893

Merged
krrish-berri-2 merged 16 commits into
litellm_internal_stagingfrom
litellm_ff_chat_ui
Jul 3, 2026
Merged

feat(ui): re-add chat UI, allow simple UI for MCP OBO auth#31893
krrish-berri-2 merged 16 commits into
litellm_internal_stagingfrom
litellm_ff_chat_ui

Conversation

@krrish-berri-2

@krrish-berri-2 krrish-berri-2 commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

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

  • I have added meaningful tests
  • My PR passes all CI/CD checks (e.g., lint, format, unit tests)
  • My PR's scope is as isolated as possible; it only solves 1 specific problem
  • I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

Delays 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/chat page 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" ask

The page sits behind an admin setting. A new enable_chat_ui UI 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 reachable

Adds 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 on enable_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 existing migratedHref helper so the URLs stay correct under the /ui mount and any server_root_path

Also fixes a small visual bug in the restored chat sidebar: the header rendered the /get_image logo (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 logo

Tests: ViewSwitcher.test.tsx covers 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

yuneng-berri and others added 6 commits June 26, 2026 09:59
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.
@CLAassistant

CLAassistant commented Jul 1, 2026

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 5 committers have signed the CLA.

✅ shivamrawat1
✅ yuneng-berri
❌ Krrish Dholakia
❌ krrish-berri
❌ krrish-berri-2


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

codecov Bot commented Jul 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@greptile-apps

greptile-apps Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR re-introduces the /ui/chat page behind an admin-controlled enable_chat_ui flag, wired into both the ViewSwitcher navbar dropdown and the left sidebar. The Chat entry is greyed-out for admins when the flag is off (with a link to Admin Settings), hidden from non-admins, and navigable once enabled.

  • New ChatPage component (1554 lines): single-model chat, up to three-way model comparison, MCP server selection, OAuth2 credential management, edit-and-resend, and localStorage-backed conversation history scoped per user.
  • Backend: adds enable_chat_ui: bool = False to UISettings and ALLOWED_UI_SETTINGS_FIELDS; toggle in Admin Settings persists and reads this field.
  • Access control: chat/page.tsx client-side guard redirects non-admins to the dashboard when the flag is off; admins can reach the page to discover and enable the feature.

Confidence Score: 5/5

The 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.

Important Files Changed

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

Comment thread ui/litellm-dashboard/src/components/chat/ChatPage.tsx Outdated
Comment thread ui/litellm-dashboard/src/components/chat/ChatPage.tsx
Comment thread ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread ui/litellm-dashboard/src/components/chat/ChatPage.tsx
Comment thread ui/litellm-dashboard/src/components/chat/ChatPage.tsx Outdated
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.
Comment thread ui/litellm-dashboard/src/components/chat/useChatHistory.ts Outdated
@veria-ai

veria-ai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

PR overview

All previously flagged issues have been addressed. No open security concerns remain on this pull request.

Security review

No 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
@krrish-berri-2 krrish-berri-2 changed the title Re-add Litellm chat UI - allows simple ui for mcp OBO auth feat(ui): re-add chat UI, allow simple UI for MCP OBO auth Jul 3, 2026
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
@krrish-berri-2

Copy link
Copy Markdown
Contributor Author

@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.
@krrish-berri-2

Copy link
Copy Markdown
Contributor Author

@greptile review

Comment thread ui/litellm-dashboard/eslint-suppressions.json
…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.
@krrish-berri-2

Copy link
Copy Markdown
Contributor Author

@greptile review

Comment thread ui/litellm-dashboard/src/app/chat/page.tsx
…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.
@krrish-berri-2

Copy link
Copy Markdown
Contributor Author

@greptile review

@krrish-berri-2
krrish-berri-2 enabled auto-merge (squash) July 3, 2026 18:50
Comment thread ui/litellm-dashboard/src/app/chat/page.tsx Outdated
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>
@krrish-berri-2
krrish-berri-2 disabled auto-merge July 3, 2026 19:19
@mateo-berri
mateo-berri dismissed their stale review July 3, 2026 19:21

No more added eslint-suppressions. Thanks!

@krrish-berri-2
krrish-berri-2 merged commit e06adb5 into litellm_internal_staging Jul 3, 2026
124 checks passed
@krrish-berri-2
krrish-berri-2 deleted the litellm_ff_chat_ui branch July 3, 2026 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants