fix(ui): correct Claude Code skills install command and settings.json snippet

[devin-ai-integration]

Relevant issues

Fixes #33512

Linear ticket

Pre-Submission checklist

• 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 received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Screenshots / Proof of Fix

The skill detail page (Admin UI -> Skills -> pick a skill) produced setup instructions that Claude Code rejects. All three come from the frontend only; the backend already serves the marketplace under "name": "litellm" in litellm/proxy/anthropic_endpoints/claude_code_endpoints/claude_code_marketplace.py

"How to Use" tab, install command

before

/plugin marketplace add {source}

after

/plugin install {name}@litellm

"One-time setup" tab, ~/.claude/settings.json snippet

before (source is a flat string, and the key is my-org, so Claude Code errors with extraKnownMarketplaces.my-org.source: Expected object, but received string)

{
  "extraKnownMarketplaces": {
    "my-org": {
      "source": "url",
      "url": "https://<proxy>/claude-code/marketplace.json"
    }
  }
}

after (source is a nested object, and the key matches the name the proxy returns)

{
  "extraKnownMarketplaces": {
    "litellm": {
      "source": {
        "source": "url",
        "url": "https://<proxy>/claude-code/marketplace.json"
      }
    }
  }
}

How to verify by hand against a live proxy

1. Start the proxy and the Admin UI dev server, register at least one skill so it shows on the Skills page
2. Open the Admin UI, go to Skills, click any skill, open the "How to Use" tab; confirm the command reads /plugin install <name>@litellm and Copy yields the same
3. Click "See one-time setup", copy the snippet into ~/.claude/settings.json; confirm Claude Code accepts the file (no Expected object, but received string) and that /plugin install <name>@litellm then resolves against the litellm marketplace

Type

🐛 Bug Fix

Changes

The marketplace name and manifest path now live as MARKETPLACE_NAME and MARKETPLACE_MANIFEST_PATH constants in helpers.ts, so the UI keys off the same "litellm" value the proxy publishes instead of a hard-coded "my-org"

formatInstallCommand no longer derives a /plugin marketplace add <source> string from the plugin source; it returns /plugin install <name>@litellm, which is what actually installs a plugin in Claude Code

A new buildMarketplaceSettings(marketplaceUrl) helper builds the settings object with source as a nested { source: "url", url } object keyed under litellm, and skill_detail.tsx uses it for both the rendered snippet and the Copy button so the two can never drift

Tests in helpers.test.ts are rewritten for the new install command and the new settings builder, asserting the source is a nested object (not a flat string) and the key is litellm (not my-org), so this specific regression cannot recur without failing

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

Link to Devin session: https://app.devin.ai/sessions/04608ae1344043d5b33a4c8a0c0809dc

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

This PR fixes the Claude Code skill setup UI by correcting two errors in the generated instructions: the install command now uses /plugin install <name>@litellm instead of /plugin marketplace add <source>, and the settings.json snippet now nests source as { source: "url", url } under the key "litellm" (matching what the proxy publishes) instead of a flat string under "my-org".

• helpers.ts introduces MARKETPLACE_NAME/MARKETPLACE_MANIFEST_PATH constants and a buildMarketplaceSettings helper so the marketplace key and URL structure are defined in one place and shared across the UI.
• skill_detail.tsx eliminates two diverging inline JSON.stringify blocks; the rendered snippet and the Copy button now both derive from the same settingsSnippet variable.
• helpers.test.ts replaces tests for the old (incorrect) command format with tests that assert the correct install command and the nested-object source shape, preventing this class of regression from recurring silently.

Confidence Score: 5/5

Frontend-only change correcting two hard-coded strings; no backend logic, auth, or data persistence is touched.

The fix is narrow and well-contained. The backend already returns "name": "litellm" (confirmed in claude_code_marketplace.py line 111), so the new frontend constant aligns correctly. The updated tests specifically guard against the two bugs being re-introduced. No regressions are visible in the changed paths.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/claude_code_plugins/helpers.ts	Replaces the broken /plugin marketplace add <source> command generator with the correct /plugin install <name>@litellm format; adds MARKETPLACE_NAME/MARKETPLACE_MANIFEST_PATH constants and buildMarketplaceSettings helper that produces the properly-nested source object Claude Code requires.
ui/litellm-dashboard/src/components/claude_code_plugins/helpers.test.ts	Old tests for incorrect install-command behavior replaced with tests for the fixed command format and the new buildMarketplaceSettings helper; assertions verify the marketplace key is "litellm" (not "my-org") and source is a nested object (not a flat string).
ui/litellm-dashboard/src/components/claude_code_plugins/skill_detail.tsx	Removes duplicate inline JSON.stringify blocks for the settings snippet; both the rendered <pre> block and the Copy button now consume the same settingsSnippet variable built via buildMarketplaceSettings, eliminating the previous drift risk.

_{Reviews (1): Last reviewed commit: "fix(ui): correct Claude Code skills inst..." | Re-trigger Greptile}

[codspeed]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_fix_claude_code_skills_install (60f73c9) with litellm_internal_staging (2f03789)}