Add complete integration guide with copy-paste commands

- Step-by-step instructions for Anthropic Claude setup - Step-by-step instructions for Z.AI/GLM Plan setup - Complete copy-paste commands for both options - MCP tools installation instructions - Verification and testing steps - Advanced configuration examples - All commands ready to copy and execute
2026-01-15 14:07:59 +00:00
parent 10019cb6f5
commit 6ec39c7c4e
1 changed files with 265 additions and 16 deletions
--- a/README.md
+++ b/README.md
@@ -33,6 +33,234 @@ chmod +x interactive-install-claude.sh
 - **🎛️ Interactive Installation** with model selection (Anthropic/Z.AI)
 - **🛡️ One-Click Setup** with comprehensive verification

+## 📋 Complete Integration Guide
+
+### Step 1: Choose Your Model Provider
+
+Choose **Option A** (Anthropic) or **Option B** (Z.AI/GLM Plan) below.
+
+---
+
+### 🔵 Option A: Anthropic Claude (Official API)
+
+**Best for:** Production, highest quality, official support
+
+#### 1.1 Get Your API Key
+
+```bash
+# Visit: https://console.anthropic.com/
+# Create an account and get your API key
+```
+
+#### 1.2 Configure Claude Code
+
+```bash
+# Create/update your Claude Code settings
+mkdir -p ~/.claude
+cat > ~/.claude/settings.json << 'EOF'
+{
+  "env": {
+    "ANTHROPIC_AUTH_TOKEN": "sk-ant-your-actual-api-key-here",
+    "ANTHROPIC_BASE_URL": "https://api.anthropic.com"
+  }
+}
+EOF
+```
+
+#### 1.3 Install Claude Code (if not installed)
+
+```bash
+# Using npm
+npm install -g @anthropic-ai/claude-code
+
+# Or using curl
+curl -fsSL https://claude.ai/install.sh | sh
+```
+
+#### 1.4 Verify Installation
+
+```bash
+# Test Claude Code
+claude --version
+
+# Test API connection
+echo "Hello, Claude!" | claude
+```
+
+---
+
+### 🟢 Option B: Z.AI / GLM Coding Plan (Cost-Effective)
+
+**Best for:** Development, testing, cost savings (up to 90% cheaper)
+
+#### 1.1 Get Your API Key
+
+```bash
+# Visit: https://z.ai/
+# Create an account and get your GLM Coding Plan API key
+```
+
+#### 1.2 Configure Claude Code
+
+```bash
+# Create/update your Claude Code settings
+mkdir -p ~/.claude
+cat > ~/.claude/settings.json << 'EOF'
+{
+  "env": {
+    "ANTHROPIC_AUTH_TOKEN": "your-zai-api-key-here",
+    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",
+    "API_TIMEOUT_MS": "3000000"
+  }
+}
+EOF
+```
+
+#### 1.3 Install Claude Code
+
+```bash
+# Install Claude Code
+npm install -g @anthropic-ai/claude-code
+
+# Or use curl
+curl -fsSL https://claude.ai/install.sh | sh
+```
+
+#### 1.4 Verify Installation
+
+```bash
+# Test Claude Code with Z.AI
+claude --version
+
+# Test connection
+echo "Test connection" | claude
+```
+
+---
+
+### Step 2: Install This Customization Suite
+
+```bash
+# Clone this repository
+git clone https://github.rommark.dev/admin/Enhance-Claude-Code-with-30--Agentic-Tools.git
+cd Enhance-Claude-Code-with-30--Agentic-Tools
+
+# Run the interactive installer
+chmod +x interactive-install-claude.sh
+./interactive-install-claude.sh
+```
+
+**The installer will:**
+- ✅ Detect your Claude Code installation
+- ✅ Backup existing customizations
+- ✅ Let you choose agent categories to install
+- ✅ Configure MCP tools
+- ✅ Set up auto-triggering agents
+- ✅ Verify everything works
+
+**Installation options:**
+```
+Step 1: Model Selection
+  [ ] Already configured - skip model setup
+  [ ] Anthropic Claude (official API)
+  [ ] Z.AI / GLM Coding Plan
+
+Step 2: Agent Categories
+  [ ] Engineering (7 agents) - RECOMMENDED
+  [ ] Marketing (7 agents)
+  [ ] Product (3 agents)
+  [ ] Project Management (3 agents)
+  [ ] Studio Operations (5 agents)
+  [ ] Testing (5 agents) - RECOMMENDED
+  [ ] Design (5 agents)
+  [ ] Bonus (2 agents)
+
+Step 3: MCP Tools
+  [ ] Vision Tools (8 tools) - RECOMMENDED
+  [ ] Web Tools (search, reader)
+  [ ] GitHub Tools (zread)
+
+Step 4: Plugins & Hooks
+  [ ] Auto-triggering agents
+  [ ] Custom hooks
+```
+
+---
+
+### Step 3: Install MCP Tools (Optional but Recommended)
+
+#### 3.1 Vision Tools (8 tools)
+
+```bash
+# Install Z.AI MCP server for vision tools
+npm install -g @z_ai/mcp-server
+
+# Verify installation
+npx @z_ai/mcp-server --help
+```
+
+#### 3.2 Web & GitHub Tools
+
+```bash
+# Install Z.AI coding helper
+npm install -g @z_ai/coding-helper
+
+# Verify installation
+npx @z_ai/coding-helper --help
+```
+
+---
+
+### Step 4: Verify Your Installation
+
+```bash
+# Run the verification script
+chmod +x verify-claude-setup.sh
+./verify-claude-setup.sh
+```
+
+**Expected output:**
+```
+✅ Claude Code installed
+✅ Settings configured
+✅ Agents directory exists
+✅ 37 agent files found
+✅ MCP tools available
+✅ Configuration valid
+```
+
+---
+
+### Step 5: Test Your Setup
+
+#### 5.1 Test Basic Functionality
+
+```bash
+# Start Claude Code
+claude
+
+# Try a simple command
+> List all available agents
+```
+
+#### 5.2 Test an Agent
+
+```bash
+# In Claude Code, try:
+> Use the frontend-developer agent to create a React component
+```
+
+#### 5.3 Test MCP Tools (if installed)
+
+```bash
+# In Claude Code, try:
+> Analyze this image: [path to image]
+> Search the web for "latest AI trends"
+> Read the documentation from https://example.com
+```
+
+---
+
 ## 📦 Installation Scripts

 | Script | Description | Size |
@@ -43,6 +271,8 @@ chmod +x interactive-install-claude.sh
 | `verify-claude-setup.sh` | Verify your installation | 9KB |
 | `export-claude-customizations.sh` | Export existing customizations | 6.5KB |

+---
+
 ## 🤖 Agent Categories

 ### Engineering (7 agents)
@@ -98,6 +328,8 @@ chmod +x interactive-install-claude.sh
 - **Joker** - Humor and team morale
 - **Studio Coach** - Team coaching and motivation

+---
+
 ## 🔧 MCP Tools

 ### Vision Tools (8 tools)
@@ -121,29 +353,40 @@ chmod +x interactive-install-claude.sh
 | `@z_ai/mcp-server` | Vision and analysis tools | [@z_ai/mcp-server](https://github.com/zai-ai/mcp-server) |
 | `@z_ai/coding-helper` | Web and GitHub integration | [@z_ai/mcp-server](https://github.com/zai-ai/mcp-server) |

-## 📊 Model Configuration
+---

-### Option 1: Anthropic Claude (Official)
-```json
+## 📚 Advanced Configuration
+
+### Auto-Triggering Agents
+
+Enable automatic test writing when code changes:
+
+```bash
+# Configure hooks
+cat > ~/.claude/hooks.json << 'EOF'
+{
+  "userPromptSubmitHook": "test-writer-fixer@agent",
+  "toolOutputHook": "whimsy-injector@agent"
+}
+EOF
+```
+
+### Custom Model Selection
+
+Use specific models for different tasks:
+
+```bash
+# Add to settings.json
 {
  "env": {
-    "ANTHROPIC_AUTH_TOKEN": "your-anthropic-api-key",
-    "ANTHROPIC_BASE_URL": "https://api.anthropic.com"
+    "MODEL_DEFAULT": "claude-sonnet-4-20250514",
+    "MODEL_FAST": "claude-haiku-4-20250514",
+    "MODEL_EXPENSIVE": "claude-opus-4-20250514"
  }
 }
 ```

-### Option 2: Z.AI / GLM Coding Plan
-```json
-{
-  "env": {
-    "ANTHROPIC_AUTH_TOKEN": "your-zai-api-key",
-    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic"
-  }
-}
-```
-
-> **Note:** Z.AI offers compatible Claude models at lower costs, perfect for development and testing.
+---

 ## 📚 Documentation

@@ -151,6 +394,8 @@ chmod +x interactive-install-claude.sh
 - **[FINAL-SETUP-GUIDE.md](FINAL-SETUP-GUIDE.md)** - Detailed setup instructions
 - **[SCRIPTS-GUIDE.md](SCRIPTS-GUIDE.md)** - Script usage guide

+---
+
 ## 🙏 Acknowledgments & Sources

 This customization suite is built upon excellent open-source projects and community contributions.
@@ -181,6 +426,8 @@ This customization suite is built upon excellent open-source projects and commun
 - **Studio Operations** - Professional studio management patterns applied to software development
 - **Auto-Triggering Agents** - Proactive agent invocation patterns for test writing and UI enhancement

+---
+
 ## 🤝 Community & Contributing

 This suite is **100% open source** and available on [GitHub](https://github.rommark.dev/admin/Enhance-Claude-Code-with-30--Agentic-Tools).
@@ -190,6 +437,8 @@ This suite is **100% open source** and available on [GitHub](https://github.romm
 - 🔄 Submit pull requests
 - 💡 Contribute your own agents!

+---
+
 ## 📝 License

 MIT License - Feel free to use and modify for your needs.