🧠 Visual Claude Code Node-Based Agent Builder

Build multi-agent systems with a drag-and-drop canvas. Full .claude code folder manager (Skills, Commands, Mcps, Subagents, Hooks ..) .

Quick Start:

# Install the app
npm install -g claude-space

# Open the app
claude-space

# Open the canvas in the current directory
claude-space project .

🎯 A Claude code what?

IDE for building Claude AI agents. Think Blender for agent workflows—visual node graph, real-time testing, export to production config.

And Why? 🧐

Because manually editing .claude configuration folders is a nightmare 😱. Visualizing your agent's brain is just better! 🧠✨

⚡ Quick Development Start

# Or, Clone & run
git clone https://github.com/FilipeBorges1993/ClaudeSpaceElectron.git
cd claude-code-workspace
npm install
npm run dev

Requirements: Node.js ≥18.19.9

🏗️ Architecture

┌─────────────────────────────────────────┐
│         Electron Desktop App            │
├─────────────────────────────────────────┤
│  Vue 3 + TypeScript + Vite              │
│  ┌────────────┐  ┌──────────────────┐   │
│  │ Node Graph │  │  Chat Interface  │   │
│  │ (Vue Flow) │  │  (Agent Testing) │   │
│  └────────────┘  └──────────────────┘   │
├─────────────────────────────────────────┤
│  Pinia State Management                 │
├─────────────────────────────────────────┤
│  Claude Agent SDK Integration           │
└─────────────────────────────────────────┘

🧩 Node Types

| Node | Purpose | Example Use | |------|---------|-------------| | 🤖 Agent | Main agent config | System prompt, model selection, permissions | | 🛠️ Skill | Agent capabilities | Custom tools, API integrations, file ops | | 🧠 Memory | Persistent state | Conversation history, knowledge base, RAG | | ⚙️ Command | Command templates | Structured inputs, parameter mapping | | 🔌 MCP | External tools | Context7 docs, file system, databases | | 🪝 Hook | Lifecycle events | PreToolUse, PostToolUse, SessionStart | | 🎭 Sub-agent | Delegated agents | Specialized tasks, different models |

🚀 Development

# Dev mode with HMR
npm run dev

# Type checking
npm run typecheck        # All
npm run typecheck:node   # Node/Electron
npm run typecheck:web    # Vue/Renderer

# Code quality
npm run lint             # ESLint
npm run format           # Prettier

# Build (platform-specific)
npm run build:mac        # macOS (Intel + ARM)
npm run build:win        # Windows (x64 + ARM)
npm run build:linux      # Linux AppImage

📂 Project Structure

src/
├── main/                    # Electron main process
│   └── index.ts            # IPC handlers, window management
├── preload/                # Context bridge & IPC
└── renderer/src/           # Vue application
    ├── components/
    │   ├── NodeCanvas.vue  # Main workflow editor
    │   ├── ChatPage.vue    # Agent chat/testing UI
    │   └── Shared/         # Reusable components
    ├── stores/             # Pinia state (workspace, canvas, agents)
    ├── types/              # TS interfaces & types
    ├── utils/              # Helpers, formatters
    └── App.vue             # Root component

Workspace Structure:

workspace-folder/
├── project-1/
│   ├── agent.json          # Generated agent config
│   ├── workflow.json       # Visual node graph data
│   ├── skills/             # Skill implementations
│   └── memory/             # Memory layer configs
└── project-2/
    └── ...

📜 License

MIT License - See LICENSE

ClaudeSpace by FB

Making AI agent development visual, one node at a time.

⚡ Electron + Vue + Claude SDK = 🚀

Report Bug • Request Feature