Quick Start:
``bash

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

`bash

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

`bash


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

---