🤖 ByteX MCP

All-in-one AI coding extension — Superpowers skills, persistent memory, n8n MCP, Magic MCP, security auditing, design system generation, code review — all integrated with VS Code native Chat.

✨ Features

💬 Chat Participant (@bytex-mcp)

Use @bytex-mcp in VS Code Chat with 17 slash commands:

🛠️ 18 Language Model Tools (Auto-invoked by Copilot)

🧠 Memory (4 tools) | Tool | Purpose | |------|---------| | bytex_memory_query | Search persistent memory for context from past sessions | | bytex_memory_save | Save important info, decisions, or codebase facts | | bytex_memory_forget | Delete a specific memory entry by numeric ID | | bytex_memory_stats | Get memory statistics (total entries, type breakdown) |

🛡️ Security (3 tools) | Tool | Purpose | |------|---------| | bytex_security_scan_file | Scan a file for vulnerabilities (secrets, SQLi, XSS, eval, etc.) | | bytex_security_scan_workspace | Scan entire workspace for security issues (glob filter) | | bytex_security_get_guidance | Get OWASP best practices (XSS, SQLi, Auth, Crypto, Secrets, CSRF) |

🔍 Code Review (2 tools) | Tool | Purpose | |------|---------| | bytex_review_code | Review a code snippet (structure, naming, complexity, error handling, type safety, best practices) | | bytex_review_file | Review an entire file with full quality report + score |

🎨 Design System (4 tools) | Tool | Purpose | |------|---------| | bytex_design_generate_tokens | Generate CSS custom properties (spacing, typography, colors, shadows) | | bytex_design_search_rules | Search 161 built-in design rules (layout, typography, colors, accessibility, animation) | | bytex_design_get_palette | Explore 67 color palettes with light & dark variants | | bytex_design_get_fonts | Get font pair recommendations (57 curated pairs) |

⚡ n8n Workflow (3 tools) | Tool | Purpose | |------|---------| | bytex_n8n_list_workflows | List available n8n MCP workflow automation tools | | bytex_n8n_get_workflow | Get details of a specific n8n workflow by ID | | bytex_n8n_execute_workflow | Execute an n8n workflow with optional input data |

✨ Magic MCP (2 tools) | Tool | Purpose | |------|---------| | bytex_magic_generate_component | Generate a UI component using 21st-dev/magic with Tailwind CSS | | bytex_magic_generate_page | Generate a full page layout |

🧠 Core Services

🎛️ UI Elements

📦 Installation

From VSIX

1. Download bytex-mcp-2.0.1.vsix
2. In VS Code: Extensions → ... → Install from VSIX...
3. Select the .vsix file
4. Reload window if needed

From Terminal

code --install-extension bytex-mcp-2.0.1.vsix

Requirements

• VS Code ^1.90.0 (with GitHub Copilot Chat)
• Node.js ^18.x (for development)

🚀 Usage

Quick Start

1. Open VS Code Chat (Ctrl+Shift+I / Cmd+Shift+I)
2. Type @bytex-mcp /help to see all commands
3. Try @bytex-mcp /plan buatkan saya REST API dengan Express

Memory

@bytex-mcp /mem save project ini guna Express + Prisma + PostgreSQL
@bytex-mcp /mem query express
@bytex-mcp /mem stats

Security Scanning

@bytex-mcp /security [paste code here]

Or let Copilot auto-invoke bytex_security_scan_file tool.

Design Tokens

@bytex-mcp /design buatkan design system untuk dashboard dengan warna biru

⚙️ Configuration

Setting API Key

# Via VS Code command
> ByteX MCP: Set API Key

# Or via environment variable
$env:MAGIC_API_KEY = "your-key-here"

🏗️ Architecture

bytex-mcp/
├── src/
│   ├── extension.ts          # Entry point — activates services, registers participant & tools
│   ├── config.ts             # Configuration constants
│   ├── settings.ts           # API key management (secrets storage)
│   ├── providers/
│   │   └── SidebarProvider.ts # Webview view for activity bar sidebar
│   ├── memory/
│   │   └── MemoryManager.ts  # Persistent memory with JSON store + TF-IDF search
│   ├── skills/
│   │   └── SkillLoader.ts    # Superpower skills prompt loader
│   ├── security/
│   │   └── SecurityAuditor.ts # Multi-language vulnerability scanner
│   ├── review/
│   │   └── CodeReviewer.ts   # 6-dimension code quality reviewer
│   ├── design/
│   │   └── DesignSystemGenerator.ts # 161 rules, 67 palettes, 57 font pairs
│   ├── prompts/
│   │   └── PromptManager.ts  # Prompt template manager
│   ├── tools/
│   │   ├── MemoryTools.ts    # 4 LM tools for memory
│   │   ├── SecurityTools.ts  # 3 LM tools for security
│   │   ├── ReviewTools.ts    # 2 LM tools for code review
│   │   ├── DesignTools.ts    # 4 LM tools for design
│   │   ├── N8nTools.ts       # 3 LM tools for n8n
│   │   └── MagicTools.ts     # 2 LM tools for Magic MCP
│   └── mcp/n8n/
│       └── N8nMCPClient.ts   # n8n MCP protocol client
├── media/
│   ├── icon.png              # Extension icon (128x128)
│   └── icon.svg              # Activity bar icon
├── package.json              # Extension manifest
└── tsconfig.json             # TypeScript config

Data Flow

User Chat ──> @bytex-mcp ──> participantHandler()
                ├── /command ──> handleCommand()
                ├── Memory auto-inject ──> /plan gets past context
                └── LM Tools invoked by Copilot
                     ├── MemoryManager (JSON + TF-IDF)
                     ├── SecurityAuditor (pattern match)
                     ├── CodeReviewer (6-dim analysis)
                     ├── DesignSystemGenerator (rules engine)
                     ├── n8n MCP Client (remote workflows)
                     └── Magic MCP (UI components)

🔧 Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode
npm run watch

# Package VSIX
npx vsce package

# Run in Extension Dev Host
F5

Build Output

• Compiled JS: out/extension.js
• Packaged extension: bytex-mcp-2.0.1.vsix

📄 License

MIT © ByteX

🙏 Credits

• Built on VS Code Chat API
• Uses 21st-dev/magic for UI generation
• Integrates with n8n MCP for workflow automation
• Security patterns based on OWASP guidelines
• Design system inspired by Tailwind CSS design principles