npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

claude-config-ui

v0.8.0

Published

Local, open-source UI for editing every Claude Code config file — settings, CLAUDE.md, MCP servers, subagents, slash commands, credentials, hooks. User / project-shared / project-local / enterprise scopes, with community presets and tooltips.

Downloads

602

Readme

Claude Config Manager

npm GitHub release License: MIT Node

A local, open-source UI for editing every Claude Code config file from one place — settings.json, CLAUDE.md, .mcp.json, subagents, slash commands, output styles, keybindings — plus a built-in credentials manager so you set GitHub / AWS / Vercel / Stripe / etc. once and they're available across every project.

Files saved by this tool land in Claude Code's standard locations. Claude Code picks them up automatically on the next session start. No daemons, no symlinks, no special integration step.

Install

Mac app

Download from the latest release:

  • Claude Config-X.Y.Z-arm64.dmg — Apple Silicon (M1 / M2 / M3 / M4 Macs, 2020+)
  • Claude Config-X.Y.Z-x64.dmg — Intel Macs (2019 and earlier)

Open the .dmg, drag Claude Config to Applications, launch from Spotlight or Launchpad.

First launch (one time): macOS Gatekeeper will block the unsigned app. Right-click → Open the first time, then click Open in the dialog. After that it launches normally. (Or run xattr -dr com.apple.quarantine "/Applications/Claude Config.app" once.)

Windows app

Download Claude-Config-X.Y.Z-x64-setup.exe from the latest release, run the installer, then launch Claude Config from the Start menu.

First launch (one time): Windows SmartScreen will block the unsigned installer. Click More infoRun anyway. Standard for indie/OSS apps without a code-signing certificate.

Command-line (any OS)

npx claude-config-ui

The launcher picks a free port, opens your browser, and detects your OS-correct paths automatically. Press Ctrl+C to stop.


Why

Claude Code reads config from 30+ possible files across user, project, project-local, and enterprise scopes. People learn the system by trial-and-error or by copy-pasting community gists. This tool turns that into a guided form.

  • Auto-detected paths~/.claude/ on macOS/Linux, %APPDATA%\Claude\ on Windows, project paths from your repo, enterprise paths from /Library/Application Support/ClaudeCode/ or /etc/claude-code/.
  • Every field has a tooltip explaining what it does AND why it matters.
  • Community presets baked in — Karpathy's 4-rules CLAUDE.md, HumanLayer's skeleton, Trail of Bits credential lockdown, popular hook recipes — drop them in with one click.
  • Auto-backup — every save writes a *.bak-<timestamp> next to the original. Nothing is lost.
  • Autosave — 1.2s debounce, smart backup policy that doesn't pollute your folder with hundreds of .bak files.
  • Path sandbox — the API refuses to read or write anything outside your home directory, current working directory, or known Claude Code enterprise dirs.
  • Credentials catalog — 28 services across cloud / deploy / SCM / databases / collaboration / AI / payments / email / observability. Set once at user scope, export to every project.

The four scopes

This mirrors how Claude Code actually resolves config:

| Tab | What | Path | | --- | --- | --- | | Global Claude | Your personal user-level config (all projects) | ~/.claude/ | | Global Project | Team-shared project config (committed to git) | <project>/.claude/ + <project>/CLAUDE.md + <project>/.mcp.json | | Local Claude | Personal overrides for one project (gitignored) | <project>/.claude/settings.local.json + <project>/CLAUDE.local.md | | Project Local (Enterprise) | Organization policy deployed by IT (highest precedence) | /Library/Application Support/ClaudeCode/ (mac), C:\Program Files\ClaudeCode\ (win), /etc/claude-code/ (linux) |

Precedence (lowest → highest, later wins): user → project shared → project local → enterprise.


What it edits

For each scope, the relevant files are surfaced as a sidebar list. Click one to edit:

  • settings.json — model, permissions (allow/deny/ask), hooks, status line, env, sandbox, telemetry, output style, theme.
  • Credentials (Global Claude only) — AWS, GCP, Azure, DigitalOcean, Cloudflare, Fly, Vercel, Netlify, Heroku, Railway, GitHub, GitLab, Bitbucket, Postgres, Supabase, Neon, MongoDB, Redis, Slack, Linear, Notion, Atlassian, OpenAI, Anthropic, Mistral, Hugging Face, Stripe, Resend, SendGrid, Sentry, Datadog — masked inputs, eye-toggles, deep links to where to get each token, written into the env block of ~/.claude/settings.json.
  • CLAUDE.md (and CLAUDE.local.md) — markdown editor with line/char counts and 12 section templates (overview, stack, commands, structure, conventions, testing, architecture, hard rules, workflow, tooling, @imports, personal style). Plus four full-doc presets (Karpathy, HumanLayer, Trail of Bits, Minimal personal).
  • .mcp.json — list of MCP servers with type-specific fields (stdio command/args; http URL/headers; env, alwaysLoad).
  • keybindings.json — context-scoped key bindings (Chat / Global / Confirmation).
  • agents/ — list view of subagent markdown files; edit frontmatter (name/description/model/effort/tools/isolation) + body. Templates: code-reviewer, security-auditor, test-writer, debugger, docs-writer.
  • commands/ — slash commands. Templates: /review, /commit, /tdd, /explore, /security-scan.
  • output-styles/ — frontmatter + body for tone presets. Templates: terse, explanatory, pr-review-mode.
  • managed-settings.json — enterprise policy.

MCP servers

A dedicated MCP tab manages the Model Context Protocol servers Claude Code connects to, across all three scopes (user → ~/.claude.json, project → .mcp.json, local → ~/.claude.json project entry). You can:

  • See every configured server with its scope, transport (stdio/http/sse/ws), auth model, and alwaysLoad state
  • Enable / disable a server to save context — since Claude Code has no native per-server disable flag, the app reversibly stashes the config out of the live file and restores it on enable (your other ~/.claude.json state is preserved, with a backup)
  • Add / remove / edit servers (guided fields + a JSON body editor)
  • Resolve issues: per-server diagnostics detect the auth model (OAuth / header token / headersHelper / env-var) and give the exact fix — including copy-paste /mcp (authenticate & reconnect), claude mcp get <name>, and claude mcp reset-project-choices. Secret values are masked.

Context tip surfaced in the tab: tool search defers MCP tools by default, so servers barely cost context; alwaysLoad: true is what forces them in.


Agent Orchestrator

The Orchestrator tab is a live, visual team board for running Claude agents. Launch one agent on a task, or launch several at once — each runs concurrently as its own card, and you watch the work happen in real time.

  • See what's already running — the board's "Running on this machine" section discovers the claude sessions you didn't launch here (terminals, other Claude Code windows) by counting live claude processes and tailing recent session transcripts, showing each one's current activity, model, project, and a claude --resume command. These are observed read-only.
  • Launch agents individually — pick the general agent or any of your subagent definitions (from ~/.claude/agents and the project's .claude/agents), choose the model, permission mode, working directory, and a turn cap, then give it a task. Fire off as many as you like.
  • See the hierarchy — every tool call, skill, MCP call, and spawned sub-agent is rendered as a colour-coded tree as it happens (sub-agents nest under the agent that delegated to them). Pick a subagent at launch and it's delegated to, so the hierarchy shows up on the board.
  • Track each agent live — current activity, elapsed time, running cost, tokens, turns, and sub-agent count per card; a global Skill activity feed shows which skills/tools are firing across all agents.
  • Measurement — a metrics view aggregates finished runs: success rate, total cost and tokens, breakdowns by agent and model, and top skills/tools. Run history persists across restarts.

Under the hood it spawns headless claude -p … --output-format stream-json processes and parses the event stream — no extra dependencies, using your already-authenticated claude CLI. Stop any agent mid-run, and grab a claude --resume <session> command to pick a run back up in your terminal.

Permission modes map to the CLI: Plan (read-only, makes no changes), Accept edits (does the work — the default), Auto (model decides per call), or Full auto (skips every check — only for fully trusted tasks). Requires the claude CLI on your PATH (or set CLAUDE_BIN).


Home dashboard

The app opens on a Home dashboard — a control center so you're not dropped straight into the dense Global Claude config. It shows KPI cards (projects, sessions + disk used, config health, context-vault coverage), an "At a glance" panel, and Recommended next steps derived from your actual setup (e.g. lock down credential reads, enable the sandbox, review a bypassPermissions default, add logic.md to projects, clean up tiny sessions). Every card and step deep-links into the relevant section.


Projects

The Projects tab gives you a bird's-eye view of every project on your machine that uses Claude — discovered by scanning your common code roots (~, ~/projects, ~/Developer, ~/Documents, …) and decoding the working directories of your recent Claude Code sessions (~/.claude/projects/). Projects you've actually used with Claude are flagged and sorted to the top by recency.

It also surfaces folders that aren't git repos and have no CLAUDE.md, but that your Claude sessions clearly worked on (e.g. a quick prototype) — promoted into the list automatically.

Pick a project and edit its project-level local files inline, all in one place:

  • CLAUDE.md · CLAUDE.local.md · summary.md · AGENTS.md
  • .claude/settings.json · .claude/settings.local.json · .mcp.json

Files that don't exist yet show a new badge — create them from a template or blank in one click. Every save still writes a timestamped .bak, and the same path sandbox applies.

Claude sessions

Both per-project and as one global All sessions list, you can see every Claude Code session (the same ones /resume shows) with its first prompt, last-worked time, message count, size, and the project it worked on (auto-detected from the file paths each session touched). You can:

  • Sort by last worked, first started, message count, size, or name
  • Rename a session to a friendly label for easy reference
  • Reassign a session to a different project if the auto-detection got it wrong
  • Delete small or throwaway sessions to clean up (this frees disk and removes them from /resume)

logic.md — a per-project decision log

Each project gets a logic.md: a long-term memory of the decisions, rules, and rationale behind it, so they don't get re-litigated or forgotten across sessions. These files live in a central context vault (default ~/ClaudeContext/<project>/, configurable in the Projects header).

Toggle Auto-maintain logic.md to inject a small managed block into your global ~/.claude/CLAUDE.md that tells Claude to read each project's logic.md every session and append decisions (and a summary of the logical instructions you give) as you make them — bringing that context back into scope automatically. Toggle it off to remove the block cleanly.

credentials.md — track & rotate keys

Each project also gets a credentials.md in the same vault: a local-only inventory of the API keys, tokens, and passwords the project uses, so you can see what exists and when to rotate. Because it lives in the vault (outside any git repo) it can't be accidentally committed. The same auto-maintain toggle tells Claude to record any credential you share into it — as a masked value (prefix + last 4 only), with where it lives and a rotation status. It's plaintext and meant as a tracker, not a secret store; for high-value secrets use an encrypted store.


Requirements

  • Node.js 20.9 or newer
  • macOS, Windows, or Linux

Alternative install paths

From source (for development or contributing)

git clone https://github.com/HarshitSingh-PM/claude-config-manager.git
cd claude-config-manager
npm install
npm run dev
# → http://localhost:3000

Global install (skip npx)

npm install -g claude-config-ui
claude-config-ui
# or:
ccm

The npm package is named claude-config-ui (the bare claude-config-manager was already taken). The GitHub repo keeps the claude-config-manager name.


Configuration

Everything is auto-detected from your operating system. The only thing you set in the UI is the project directory for project-scoped tabs (defaults to wherever you launched the tool from). There's no .env, no config file, nothing to set up.

To point at a different project, paste its absolute path into the project field at the top of the page.

Environment variables:

  • PORT — override the default 3737.
  • CCM_NO_OPEN=1 — don't auto-open the browser on launch.

How auto-detection works

  • macOS / Linux: ~/.claude/ for user scope; /Library/Application Support/ClaudeCode/ or /etc/claude-code/ for enterprise.
  • Windows: %APPDATA%\Claude\ for user scope; C:\Program Files\ClaudeCode\ for enterprise.
  • Project: any directory you point at. The tool reads existing files if present and creates them on save if not.

The tool labels each file as git-tracked or gitignored in the editor so you always know which side of the .gitignore you're on.


Safety

  • Every write makes a timestamped .bak-* copy of the existing file first (autosaves create only one .bak per file per session — escape valve is the manual Save button).
  • The file API refuses paths outside ~, cwd, and known Claude Code enterprise directories.
  • Deleting a subagent or slash command also writes a backup before removing the original.
  • JSON output is pretty-printed with 2-space indent.
  • Markdown frontmatter is round-tripped via js-yaml (preserves keys, drops empties).
  • Credentials are written to the env block of ~/.claude/settings.jsonplain text on disk. Fine for personal-laptop API keys; for high-blast-radius prod secrets use Claude Code's apiKeyHelper instead (a shell command that fetches the value from your keychain at runtime).

Stack

  • Next.js 16 (App Router, Turbopack, React 19.2) — standalone server output for npx
  • TypeScript strict
  • Tailwind CSS 4
  • Framer Motion (animations)
  • Radix UI Tooltip (accessible tooltips)
  • Lucide icons
  • js-yaml for frontmatter parsing
  • Electron (Mac .dmg distribution only — npm package is pure Node)

Building desktop apps yourself

npm install
npm run dmg          # macOS arm64 .dmg → dist-electron/
npm run exe          # Windows x64 NSIS .exe → dist-electron/
# explicit arch:
npx electron-builder --mac dmg --x64       # Intel Mac .dmg
npx electron-builder --win nsis --x64      # Windows x64 .exe

Cross-compiling to Windows from Apple Silicon Macs needs Rosetta installed (electron-builder uses an x86_64 wine64 binary to set the .exe's icon and version metadata). One-time setup: sudo softwareupdate --install-rosetta --agree-to-license.

Builds are unsigned by default. To sign for distribution: set mac.identity to your Apple Developer cert name in package.json#build.mac (and flip mac.hardenedRuntime to true); for Windows, add win.certificateFile + certificatePassword (or use Azure SignTool).


Contributing

See CONTRIBUTING.md. The easiest contributions:

  • Add a new service to the Credentials catalog (src/lib/credentialsCatalog.ts)
  • Add a new CLAUDE.md section template (src/lib/presets/claudemdSections.ts)
  • Add a new subagent / slash command template (src/lib/presets/agents.ts, commands.ts)

License

MIT. See LICENSE.


Acknowledgements

Schema and presets are drawn from: