[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93207":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":9,"createdAt":9,"pushedAt":9,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":16,"starSnapshotCount":16,"syncStatus":14,"lastSyncTime":24,"discoverSource":25},93207,"claude-code-cli-ui","Ngxba\u002Fclaude-code-cli-ui","Ngxba","An intuitive interface to create, orchestrate, and monitor Claude-based code agents for automated development workflows.",null,"https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-cli-ui","Vue",389,143,2,8,0,1,43.58,false,"main","2026-07-22 04:02:08","\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Fheader.png\" alt=\"agents-ui — visualize your Claude Code\" width=\"720\" \u002F>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">Claude Code CLI UI \u003Cbr\u002F>\n  (aka Claude Code Agents Management Studio)\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#quickstart\">\u003Cstrong>Quickstart\u003C\u002Fstrong>\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\u002Fblob\u002Fmain\u002FCONTRIBUTING.md\">\u003Cstrong>Contributing\u003C\u002Fstrong>\u003C\u002Fa> ·\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\">\u003Cstrong>GitHub\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue\" alt=\"MIT License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FNgxba\u002Fclaude-code-agents-ui\" alt=\"Stars\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr\u002F>\n\n\u003Cdiv align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F734d933e-7a4f-48c0-ac0b-daaec05e5e3c\" width=\"800\" controls>\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\n## What is agents-ui?\n\n# Open-source visual orchestration for Claude Code\n\n**If Claude Code is the _engine_, agents-ui is the _dashboard_**\n\nagents-ui is a Nuxt 3-based visual dashboard for managing Claude Code agents, commands, skills, workflows, and plugins. It provides a GUI layer on top of the `~\u002F.claude` directory, allowing users to create, edit, and organize their Claude Code configuration without touching markdown files directly.\n\nIt looks like a studio — but under the hood it has relationship graphs, real-time metrics, visual workflow builders, and terminal emulation.\n\n**Manage your agents visually, not through scattered markdown.**\n\n|        | Step            | Example                                                            |\n| ------ | --------------- | ------------------------------------------------------------------ |\n| **01** | Define the agent | Create a \"Senior Frontend\" agent with specific instructions.       |\n| **02** | Build skills    | Import or create custom tools and capabilities for your team.      |\n| **03** | Run & Monitor   | Execute commands in the terminal and watch real-time metrics.      |\n\n\u003Cbr\u002F>\n\n> **COMING SOON: Desktop App** — Run agents-ui as a standalone desktop application for even tighter integration with your local environment.\n\n\u003Cbr\u002F>\n\n\u003Cdiv align=\"center\">\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cstrong>Works\u003Cbr\u002F>with\u003C\u002Fstrong>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Fanthropic.svg\" width=\"32\" alt=\"Claude Code\" \u002F>\u003Cbr\u002F>\u003Csub>Claude Code\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Fanthropic.svg\" width=\"32\" alt=\"Anthropic SDK\" \u002F>\u003Cbr\u002F>\u003Csub>Anthropic SDK\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Fbun.svg\" width=\"32\" alt=\"Bun\" \u002F>\u003Cbr\u002F>\u003Csub>Bun\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Fnuxt.svg\" width=\"32\" alt=\"Nuxt 3\" \u002F>\u003Cbr\u002F>\u003Csub>Nuxt 3\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Ftailwindcss.svg\" width=\"32\" alt=\"Tailwind CSS\" \u002F>\u003Cbr\u002F>\u003Csub>Tailwind CSS\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsimple-icons\u002Fsimple-icons\u002Fdevelop\u002Ficons\u002Fgnometerminal.svg\" width=\"32\" alt=\"Bash\" \u002F>\u003Cbr\u002F>\u003Csub>Bash\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cem>If it's in your `.claude` folder, it's here.\u003C\u002Fem>\n\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\n## agents-ui is right for you if\n\n- ✅ You want a **visual way to manage** your Claude Code agents\n- ✅ You **coordinate many different commands and skills** and want to see how they connect\n- ✅ You want to **monitor token usage and costs** in real-time\n- ✅ You want to **build multi-step workflows** visually instead of manually chaining agents\n- ✅ You want a **clean, real-time chat interface** for testing agent behaviors\n- ✅ You find editing scattered `.claude` files **cumbersome or disorganized**\n\n\u003Cbr\u002F>\n\n## Features\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd align=\"center\" width=\"33%\">\n\u003Ch3>🤖 Agent Management\u003C\u002Fh3>\nVisual editor for \u003Ccode>.claude\u002Fagents\u002F*.md\u003C\u002Fcode>. Configure models, instructions, and memory.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\" width=\"33%\">\n\u003Ch3>🔗 Relationship Graph\u003C\u002Fh3>\nVisual map of agents, commands, and skills. Identify dependencies and gaps at a glance.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\" width=\"33%\">\n\u003Ch3>⚡ Command Builder\u003C\u002Fh3>\nCreate reusable slash commands with argument hints and safety configurations.\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\n\u003Ch3>🧪 Agent Studio\u003C\u002Fh3>\nIterate faster with live testing. Inspect execution and refine prompts in real time.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Ch3>🔄 Workflow Builder\u003C\u002Fh3>\nBuild multi-step AI pipelines visually. Chain agents and control execution order.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Ch3>🧠 Skill Management\u003C\u002Fh3>\nCentralized skill management. Import skills from GitHub or create custom ones.\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\n\u003Ch3>🖥️ CLI Terminal\u003C\u002Fh3>\nFull PTY terminal emulator with integrated context monitoring and WebSocket streaming.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Ch3>📊 Real-time Metrics\u003C\u002Fh3>\nLive token counting, cost tracking, and file system change monitoring.\n\u003C\u002Ftd>\n\u003Ctd align=\"center\">\n\u003Ch3>🌍 Explore & Templates\u003C\u002Fh3>\nBrowse and import community agent templates and marketplace resources instantly.\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cbr\u002F>\n\n## Problems agents-ui solves\n\n| Without agents-ui                                                                                                                     | With agents-ui                                                                                                                         |\n| ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| ❌ You edit scattered markdown files in `~\u002F.claude` and lose track of which agent uses which skill.                                    | ✅ A single visual control layer shows you exactly how everything connects with relationship graphs.                                  |\n| ❌ You have no visibility into how many tokens you're using or what the actual cost of a session is until it's over.                  | ✅ Real-time metrics surface token usage and costs as they happen, helping you stay within budget.                                     |\n| ❌ Chaining agents together requires manual coordination and jumping between multiple terminal windows.                               | ✅ Visual workflow builder lets you chain agents into pipelines and inspect intermediate results easily.                               |\n| ❌ Testing a new prompt or agent behavior requires re-running CLI commands and manually parsing output.                               | ✅ Agent Studio provides a clean chat interface with SSE streaming for instant feedback and debugging.                                |\n| ❌ Finding and importing community skills is a manual process of cloning repos and copying files.                                     | ✅ GitHub import flow lets you point to a repo and choose which skills to import directly into your setup.                            |\n\n\u003Cbr\u002F>\n\n## Why agents-ui is special\n\nagents-ui handles the visual orchestration of Claude Code correctly.\n\n|                                   |                                                                                                               |\n| --------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| **Real-time Context Monitoring.** | Tracks tokens, costs, file changes, and tool calls as they happen in your terminal sessions.                  |\n| **Visual Relationship Mapping.**  | Automatically detects links between agents, commands, and skills to build a live dependency graph.            |\n| **Native Claude Code Integration.**| Built directly on top of the `@anthropic-ai\u002Fclaude-agent-sdk` for authentic agent interactions.              |\n| **SSE-powered Agent Studio.**     | Streams agent thinking, tool use, and text deltas for a responsive, real-time testing experience.            |\n| **Workflow Visualization.**       | Models complex AI pipelines as nodes and edges, making multi-step processes easy to understand.               |\n| **Zero-Config Data Layer.**       | Directly reads and writes to your existing `~\u002F.claude` directory—no new database or account required.         |\n\n\u003Cbr\u002F>\n\n## What agents-ui is not\n\n|                              |                                                                                                                      |\n| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| **Not a replacement for CLI.**| It's a GUI *companion*. You can still use the Claude CLI alongside it whenever you want.                             |\n| **Not an LLM provider.**     | We don't provide models. agents-ui uses your existing Anthropic API keys and Claude Code setup.                      |\n| **Not a general-purpose IDE.**| It's specifically optimized for the Claude Code ecosystem and `.claude` configurations.                              |\n| **Not a hosted service.**     | agents-ui runs locally on your machine for maximum privacy and access to your local files.                           |\n\n\u003Cbr\u002F>\n\n## Quickstart\n\nOpen source. Self-hosted. Use your local Claude Code setup.\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui.git\ncd claude-code-agents-ui\nbun install\nbun run dev\n```\n\nOpen **http:\u002F\u002Flocalhost:3000** — agents-ui will automatically load your `~\u002F.claude` setup.\n\n> **Requirements:** [Bun](https:\u002F\u002Fbun.sh) (recommended) or Node.js 18+\n\n\u003Cbr\u002F>\n\n## FAQ\n\n**Where is my data stored?**\nEverything is stored in your standard `~\u002F.claude` directory. agents-ui reads and writes directly to those files.\n\n**Do I need a separate Anthropic API key?**\nagents-ui uses the same environment variables as your Claude Code setup. If `anthropic` is configured in your shell, agents-ui will find it.\n\n**Can I still use the CLI?**\nYes! agents-ui is a companion. Changes you make in the UI reflect in your `.claude` files immediately, and vice versa.\n\n**How does the relationship graph work?**\nIt scans your agent, command, and skill files for references to each other (like `agent:` in frontmatter or `\u002Fcommand` in text) and builds the graph dynamically.\n\n\u003Cbr\u002F>\n\n## Development\n\n```bash\nbun run dev          # Start dev server (Nuxt + SSE)\nbun run build        # Build for production\nbun run preview      # Preview production build\nbun run typecheck    # Run TypeScript type checking\n```\n\n\u003Cbr\u002F>\n\n## Roadmap\n\n- ✅ Visual Agent Editor\n- ✅ Relationship Graph\n- ✅ Workflow Builder\n- ✅ GitHub Skill Import\n- ✅ Real-time Metrics (Tokens\u002FCost)\n- ✅ Integrated Terminal Emulator\n- ✅ Chat-based Agent Studio\n- ✅ Marketplace & Plugin System\n- ⚪ Desktop Application\n- ⚪ Artifacts & Deployments\n- ⚪ Multiple Session History\n\n\u003Cbr\u002F>\n\n## Community & Contributing\n\nWe welcome contributions! See the [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n- [GitHub Issues](https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\u002Fissues) — bugs and feature requests\n- [GitHub Discussions](https:\u002F\u002Fgithub.com\u002FNgxba\u002Fclaude-code-agents-ui\u002Fdiscussions) — ideas and RFC\n\n\u003Cbr\u002F>\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fimage?repos=Ngxba\u002Fclaude-code-agents-ui&type=date&legend=top-left)](https:\u002F\u002Fstar-history.com\u002F#Ngxba\u002Fclaude-code-agents-ui&Date)\n\n\u003Cbr\u002F>\n\n## License\n\nMIT © 2026 Ngxba, agents-ui contributors\n\n\u003Cbr\u002F>\n\n---\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Ffooter.png\" alt=\"\" width=\"720\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Csub>Open source under MIT. Built for developers who want to see their agents in action.\u003C\u002Fsub>\n\u003C\u002Fp>\n","这是一个为Claude Code构建的开源可视化管理工具，用于创建、编排和监控基于Claude大模型的代码智能体（agents）。核心功能包括图形化工作流编排、技能与插件管理、实时执行监控、终端模拟及关系图谱可视化，底层直接对接本地~\u002F.claude配置目录，避免手动编辑Markdown。技术上基于Nuxt 3（Vue生态）构建，轻量易部署。适用于AI辅助编程、自动化开发任务编排、团队级Claude Code Agent协作治理等场景。","2026-07-12 02:30:11","trending"]