agentfiles

A local GUI for discovering, understanding, and managing your AI agent workflows.

Run npx agentfiles to open a web-based dashboard on localhost that manages ~/.claude/, ~/.codex/, and project-level agent configs in one place.

한국어

Why

AI coding agents like Claude Code rely on config files — CLAUDE.md, Skills, Hooks, MCP servers, Plugins. You compose these to build your own dev workflow.

The problem:

1. Hard to manage — Config files are scattered across multiple paths. Global vs project scope relationships aren't visible at a glance.
2. Hard to understand — You install a Plugin or Skill, but figuring out what it actually does means reading long markdown files.
3. Hard to discover — Skills, MCP servers, and Plugins live in different places with no unified search.

agentfiles solves all three:

• Visibility — See all your config files and what they do at a glance
• Management — Manage Skills, MCP, Plugins, and Hooks from a GUI
• Discovery — Search and install Skills from the marketplace

Features

• Dashboard — Board-style overview of all configs with scope grouping (User/Project)
• Marketplace — Search and install Skills from skills.sh
• Skills Manager — Browse skills/commands/agents with markdown preview, frontmatter badges
• Plugin Manager — View plugin tree structure (skills/mcp/hooks), enable/disable toggles
• MCP Servers — Add/remove/enable, connection status display
• Hooks Viewer — 17 events, 3 hook types
• Memory Viewer — Project-scoped Claude Code memory files
• File Browser — Browse .claude/ directory tree with read-only viewer
• Settings — Global/Project settings.json editor
• i18n — English/Korean (Paraglide)

Quick Start

npx agentfiles

Opens automatically in Chrome app mode on localhost.

Development

Prerequisites

• Node.js 20+
• pnpm

Setup

pnpm install
pnpm dev          # Dev server at localhost:4747

Commands

pnpm build        # Production build
pnpm test         # Run tests
pnpm lint         # Biome lint
pnpm typecheck    # TypeScript type check

Tech Stack

• Framework: TanStack Start (Vinxi/Nitro fullstack)
• Frontend: React 19, TanStack Query, shadcn/ui, Tailwind CSS v4
• Backend: Server Functions, Node.js
• Language: TypeScript (strict)
• Testing: Vitest
• Linting: Biome

Architecture

Browser (React SSR) → Server Functions → File System
                                       → Claude CLI (MCP/Plugin)

• Read: ConfigService parses markdown/JSON files directly
• Write: FileWriter saves markdown, delegates MCP/Plugin ops to Claude CLI
• Data sync: React Query polling

Project Structure

src/
  components/      # UI components (ui/, board/, panel/, entity/, skill/, marketplace/, layout/)
  config/          # Entity system (EntityConfig registry + 7 entity configs)
  hooks/           # React Query custom hooks
  server/          # Server Functions (createServerFn)
  services/        # Server-side services (ConfigService, HooksService, etc.)
  routes/          # File-based routing (/, /marketplace, /settings)
  lib/             # Utilities, constants
  shared/          # Shared types (client + server)

messages/          # i18n messages (en/ko)
bin/               # CLI entry point
tests/             # Integration/E2E tests

Security

• Binds to 127.0.0.1 only (localhost)
• Bearer token authentication
• No CORS (local app)
• Path traversal prevention

License

MIT