425 lines
16 KiB
Markdown
425 lines
16 KiB
Markdown
<p align="center">
|
||
<img src="https://img.shields.io/badge/Status-Active-success?style=for-the-badge">
|
||
<img src="https://img.shields.io/badge/TRAE-Compatible-blue?style=for-the-badge">
|
||
<img src="https://img.shields.io/badge/GLM_4.6-Powered-orange?style=for-the-badge">
|
||
</p>
|
||
|
||
<h1 align="center">🤖 Ultimate Custom Engineered TRAE Agents</h1>
|
||
<h3 align="center">Uncapped AI Agents Collection for Vibe Coders</h3>
|
||
|
||
<p align="center">
|
||
<a href="#-quick-start">🚀 Quick Start</a> •
|
||
<a href="#-available-agents">🎯 Agents</a> •
|
||
<a href="#-boost-efficiency-with-solo--glm-46">💡 SOLO + GLM</a> •
|
||
<a href="#%EF%B8%8F-glm-46-alternative-ide-options">🛠️ IDEs</a> •
|
||
<a href="#%EF%B8%8F-virtual-machine-for-ai-coding-free---anywhere">☁️ Cloud VM</a> •
|
||
<a href="#-awesome-mcps">🌟 MCPs</a> •
|
||
<a href="#-developer-hacks">💡 Hacks</a> •
|
||
<a href="#%EF%B8%8F-vibe-games">🕹️ Games</a>
|
||
</p>
|
||
|
||
---
|
||
|
||
## 🚀 Quick Start
|
||
|
||
| Action | Link |
|
||
| :--- | :---: |
|
||
| 🎟️ **Get 10% Discount on GLM Models** | [**Subscribe Now**](https://z.ai/subscribe?ic=R0K78RJKNW) |
|
||
| 📄 **GLM-4.6 Integration Guide (PDF)** | [**Download PDF**](./Adding_GLM_4.6_Model_to_TRAE__A_Visual_Guide__3_.pdf) |
|
||
| 🌐 **Explore TRAE Plans** | [**Start for Free**](https://www.trae.ai/s/WJtxyE) |
|
||
|
||
---
|
||
|
||
## 🎯 Latest Hackathon Participation
|
||
|
||
> **OffLogic** Game is the ultimate reflex challenge for developers and UI designers.
|
||
> An interactive experience that tests your coding speed, precision, and aesthetic preference.
|
||
|
||
📂 [**Source Code of OffLogic**](./vibecoding-games/OFFLOGIC_98_v3._classic_version.html)
|
||
|
||
---
|
||
|
||
## 🤖 Available Agents
|
||
|
||
### OPUS Series
|
||
|
||
| # | Agent | Description |
|
||
| :---: | :--- | :--- |
|
||
| 1 | [**Claude Opus 4.5 Wrap**](https://s.trae.ai/a/c5a3e9) | Offers major models some of the development patterns of the popular Claude Opus 4.5 model (Variation 1). |
|
||
| 2 | [**OPUS FRAMEWORK 4.5**](https://s.trae.ai/a/114be4) | Offers major models some of the development patterns of the popular Claude Opus 4.5 model (Variation 2). |
|
||
| 3 | [**OPUS QA ENGINEER**](https://s.trae.ai/a/01708c) | Trained to enhance the AI models ability for quality assurance process, based on Opus model. |
|
||
|
||
<details>
|
||
<summary><strong>📸 View Agent Cards</strong></summary>
|
||
<br>
|
||
<a href="https://s.trae.ai/a/c5a3e9"><img src="assets/claude_opus_4_5_wrap.svg" alt="Claude Opus 4.5 Wrap" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/114be4"><img src="assets/opus_framework_4_5.svg" alt="OPUS FRAMEWORK 4.5" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/01708c"><img src="assets/opus_qa_engineer.svg" alt="OPUS QA ENGINEER" width="100%"></a>
|
||
</details>
|
||
|
||
### Specialized Agents
|
||
|
||
| # | Agent | Description |
|
||
| :---: | :--- | :--- |
|
||
| 4 | [**KIRO TRAE ULTRA X**](https://s.trae.ai/a/25f7a7) | Offers the large models some of the process concepts of the Amazon Kiro agent. More autonomous, less disruptive development. |
|
||
| 5 | [**Apex Omni**](https://s.trae.ai/a/4c48cd) | The "overclock" agent, offers lower end models like Gemini 2.5 Flash, a set of high-end model operation "skills". |
|
||
| 6 | [**PWA Generator**](https://s.trae.ai/a/a5ec8c) | Instantly transform web apps into installable PWAs. Automates manifest creation, service worker setup, and icon generation. |
|
||
| 7 | [**Loop Breaker**](https://s.trae.ai/a/8a1286) | Designed to break infinite loops and resolve stuck reasoning cycles in your AI development workflow. |
|
||
|
||
<details>
|
||
<summary><strong>📸 View Agent Cards</strong></summary>
|
||
<br>
|
||
<a href="https://s.trae.ai/a/25f7a7"><img src="assets/kiro_trae_ultra_x.svg" alt="KIRO TRAE ULTRA X" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/4c48cd"><img src="assets/apex_omni.svg" alt="Apex Omni" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/a5ec8c"><img src="assets/pwa_generator.svg" alt="PWA Generator" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/8a1286"><img src="assets/loop_breaker.svg" alt="Loop Breaker" width="100%"></a>
|
||
</details>
|
||
|
||
### Defense Series
|
||
|
||
| # | Agent | Description |
|
||
| :---: | :--- | :--- |
|
||
| 8 | [**Amnesia Defense**](https://s.trae.ai/a/0bfb9e) | Enhances the AI process to minimize instances where work is reported as done, but isn't actually complete. |
|
||
| 9 | [**ANTI-AMNESIA v2**](https://s.trae.ai/a/3f7075) | Improved version to combat AI "forgetting" to complete tasks. |
|
||
|
||
<details>
|
||
<summary><strong>📸 View Agent Cards</strong></summary>
|
||
<br>
|
||
<a href="https://s.trae.ai/a/0bfb9e"><img src="assets/amnesia_defense.svg" alt="Amnesia Defense" width="100%"></a>
|
||
<a href="https://s.trae.ai/a/3f7075"><img src="assets/anti_amnesia_v2.svg" alt="ANTI-AMNESIA v2" width="100%"></a>
|
||
</details>
|
||
|
||
---
|
||
|
||
## 💡 Boost Efficiency with SOLO & GLM 4.6
|
||
|
||
<a href="https://www.trae.ai/s/WJtxyE">
|
||
<img src="assets/trae_comparison_v2.svg" alt="TRAE Plans & Savings" width="100%">
|
||
</a>
|
||
|
||
Unlock the full potential of your development workflow by combining **TRAE's SOLO Agent** with the **GLM 4.6 model**.
|
||
|
||
| Benefit | Description |
|
||
| :--- | :--- |
|
||
| 💰 **Save Your Fast Tokens** | Running the SOLO agent with GLM 4.6 **does not consume your TRAE paid fast tokens**. |
|
||
| 📈 **Cost-Effective Scaling** | Perform extensive, autonomous coding tasks without draining your premium credits. |
|
||
| ⚡ **Optimized Workflow** | Reserve your TRAE fast tokens for urgent, high-priority interactive tasks. |
|
||
|
||
<p align="center">
|
||
<a href="https://www.trae.ai/s/WJtxyE"><img src="https://img.shields.io/badge/Explore_TRAE_Plans-Start_for_Free-blue?style=for-the-badge"></a>
|
||
<a href="https://z.ai/subscribe?ic=R0K78RJKNW"><img src="https://img.shields.io/badge/GLM_Models-10%25_Discount-orange?style=for-the-badge"></a>
|
||
</p>
|
||
|
||
---
|
||
|
||
## 🛠️ GLM 4.6 Alternative IDE Options
|
||
|
||
The GLM 4.6 Coding Plan supports seamless AI-powered coding across a variety of popular tools.
|
||
|
||
### Supported Clients & IDEs
|
||
|
||
| IDE | Link |
|
||
| :--- | :--- |
|
||
| Claude Code | [Documentation](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) |
|
||
| Cline | [GitHub](https://github.com/cline/cline) |
|
||
| OpenCode | [GitHub](https://github.com/opencode-ai/opencode) |
|
||
| Roo Code | [GitHub](https://github.com/RooVetGit/Roo-Code) |
|
||
| Kilo Code | [Website](https://kilo.ai) |
|
||
| Crush | [GitHub](https://github.com/charmbracelet/crush) |
|
||
| Goose | [GitHub](https://github.com/block/goose) |
|
||
|
||
### ⚙️ Setup Instructions
|
||
|
||
1. **Subscribe:** Get an active subscription to the [GLM 4.6 Coding Plan](https://z.ai/subscribe?ic=R0K78RJKNW).
|
||
2. **Automatic Availability:** In most supported tools, GLM-4.6 becomes available automatically upon subscription.
|
||
3. **Claude Code Configuration:** GLM-4.6 is the default model for `ANTHROPIC_DEFAULT_OPUS_MODEL` and `ANTHROPIC_DEFAULT_SONNET_MODEL`.
|
||
|
||
📚 For detailed documentation, visit the [Z.AI Developer Docs](https://docs.z.ai/devpack/overview).
|
||
|
||
---
|
||
|
||
## ☁️ Virtual Machine for AI Coding FREE - Anywhere
|
||
|
||
<a href="https://chat.z.ai/?ic=R0K78RJKNW">
|
||
<img src="assets/vm_workstation_banner.svg" alt="Z.AI Full Stack Workstation" width="100%">
|
||
</a>
|
||
|
||
Full Stack Workstation is a **free AI tool** designed to transform your coding experience, suitable for small tasks.
|
||
|
||
| Feature | Description |
|
||
| :--- | :--- |
|
||
| 🌐 **Open Source GLM Models** | Powered by cutting-edge models, tailored for English and Chinese users. |
|
||
| 🧠 **Advanced Reasoning** | Supports complex reasoning and deep research tasks. |
|
||
| 💸 **Zero Cost** | A completely free, open-source alternative to paid AI assistants. |
|
||
| 📱 **Code Anywhere** | Code from anywhere, on any device, with zero setup. |
|
||
|
||
> ⚠️ **Note:** Best for small edits. Functionality is limited to one chat context window.
|
||
|
||
<p align="center">
|
||
<a href="https://chat.z.ai/?ic=R0K78RJKNW"><img src="https://img.shields.io/badge/Launch_Workstation-Free-success?style=for-the-badge"></a>
|
||
</p>
|
||
|
||
---
|
||
|
||
## 🌟 Awesome MCPs
|
||
|
||
<img src="assets/mcps_banner.svg" alt="Awesome MCPs" width="100%">
|
||
|
||
### Vision MCP Server
|
||
**Visual Intelligence for Your IDE**
|
||
|
||
The **Vision MCP Server** brings GLM-4.5V's advanced visual capabilities directly into MCP-compatible clients like Claude Code and Cline.
|
||
|
||
| Feature | Description |
|
||
| :--- | :--- |
|
||
| 🖼️ **Image Analysis** | Analyze and interpret various image formats. |
|
||
| 🎬 **Video Understanding** | Gain insights from local and remote videos. |
|
||
| 🔌 **Seamless Integration** | Easy setup with MCP-compatible tools. |
|
||
|
||
[**Learn more & Install**](https://docs.z.ai/devpack/mcp/vision-mcp-server)
|
||
|
||
---
|
||
|
||
## 💡 Developer Hacks
|
||
|
||
<img src="assets/hacks_banner.svg" alt="Developer Hacks" width="100%">
|
||
|
||
### Quick Links
|
||
|
||
| Hack | Description |
|
||
| :--- | :--- |
|
||
| [📱 PWA Recipe](#-pwa-recipe) | Make your app installable on Android |
|
||
| [🤖 AI Push Prompt](#-ai-push-prompt) | Automate PWA integration with AI |
|
||
| [🚀 Deploy to Vercel](#-deploy-to-vercel--go-live-instantly) | Get a live URL in seconds |
|
||
| [🧠 Claude Code + GLM](#-claude-code-with-glm-46-power) | Use Claude Code with affordable GLM models |
|
||
|
||
---
|
||
|
||
<details>
|
||
<summary><h3>📱 PWA Recipe</h3></summary>
|
||
|
||
#### Make your app installable on Android (Complete PWA Recipe)
|
||
|
||
To enable the "Install App" feature, you need to configure Vite for PWA and create a custom install button component.
|
||
|
||
**0. Install Dependencies**
|
||
```bash
|
||
npm install -D vite-plugin-pwa
|
||
```
|
||
|
||
**1. Configure `vite.config.ts`**
|
||
```typescript
|
||
import { defineConfig } from 'vite'
|
||
import react from '@vitejs/plugin-react'
|
||
import { VitePWA } from 'vite-plugin-pwa'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
react(),
|
||
VitePWA({
|
||
registerType: 'autoUpdate',
|
||
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
|
||
manifest: {
|
||
name: 'My Awesome App',
|
||
short_name: 'App',
|
||
description: 'My Awesome App Description',
|
||
theme_color: '#ffffff',
|
||
icons: [
|
||
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
|
||
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
|
||
]
|
||
}
|
||
})
|
||
]
|
||
})
|
||
```
|
||
|
||
**2. Create `src/components/InstallPWA.tsx`**
|
||
```typescript
|
||
import { useEffect, useState } from 'react';
|
||
|
||
interface BeforeInstallPromptEvent extends Event {
|
||
prompt: () => Promise<void>;
|
||
userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
|
||
}
|
||
|
||
export const InstallPWA = () => {
|
||
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
|
||
const [isIOS, setIsIOS] = useState(false);
|
||
const [isStandalone, setIsStandalone] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||
setIsStandalone(true);
|
||
}
|
||
const userAgent = window.navigator.userAgent.toLowerCase();
|
||
setIsIOS(/iphone|ipad|ipod/.test(userAgent));
|
||
const handler = (e: Event) => {
|
||
e.preventDefault();
|
||
setDeferredPrompt(e as BeforeInstallPromptEvent);
|
||
};
|
||
window.addEventListener('beforeinstallprompt', handler);
|
||
return () => window.removeEventListener('beforeinstallprompt', handler);
|
||
}, []);
|
||
|
||
const handleInstallClick = async () => {
|
||
if (!deferredPrompt) return;
|
||
await deferredPrompt.prompt();
|
||
const { outcome } = await deferredPrompt.userChoice;
|
||
if (outcome === 'accepted') {
|
||
setDeferredPrompt(null);
|
||
}
|
||
};
|
||
|
||
if (isStandalone) return null;
|
||
|
||
return (
|
||
<div className="fixed bottom-4 right-4 z-50">
|
||
{deferredPrompt && (
|
||
<button onClick={handleInstallClick} className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg font-semibold hover:bg-blue-700 transition">
|
||
📲 Install App
|
||
</button>
|
||
)}
|
||
{isIOS && (
|
||
<div className="bg-gray-800 text-white p-4 rounded-lg shadow-lg text-sm max-w-xs">
|
||
<p>To install: Tap <span className="font-bold">Share</span> then <span className="font-bold">Add to Home Screen</span> ➕</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
**3. Mount the Component**
|
||
Add `<InstallPWA />` to your main layout or `App.tsx`.
|
||
|
||
**4. Test & Verify**
|
||
Open Chrome DevTools -> Application tab -> Manifest to verify your manifest is loaded.
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
<details>
|
||
<summary><h3>🤖 AI Push Prompt</h3></summary>
|
||
|
||
*Copy and paste this entire block into your AI Agent (TRAE, Claude Code, etc.) to automate PWA integration:*
|
||
|
||
```text
|
||
# Role: PWA Transformation Architect
|
||
You are an expert software engineer specializing in transforming standard React/Vite web applications into high-quality Progressive Web Apps (PWAs).
|
||
|
||
Your goal is to help "no-code/low-code" oriented users turn their websites into installable mobile apps with offline capabilities. You prioritize **safety**, **simplicity**, and **seamless UI integration**.
|
||
|
||
# Operational Protocol
|
||
|
||
## Phase 1: Context & Safety (MANDATORY START)
|
||
Before writing any PWA code, you must perform the following checks:
|
||
|
||
1. **Project Analysis**: Scan `package.json` to confirm it is a Vite/React project.
|
||
2. **Asset Verification**: Check `public/` folder for icons.
|
||
3. **The Safety Gate**: Create a local backup with `git add . && git commit -m "Pre-PWA Backup"`.
|
||
|
||
## Phase 2: Strategic Placement
|
||
Analyze the user's existing UI and suggest the most logical place for the "Install App" button.
|
||
|
||
## Phase 3: Implementation
|
||
Provide the full code blocks with brief explanations.
|
||
|
||
## Phase 4: Verification & Education
|
||
Instruct the user to run `npm install` and test via Chrome DevTools -> Application -> Manifest.
|
||
```
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
### 🚀 Deploy to Vercel & Go Live Instantly
|
||
|
||
<img src="assets/vercel_deploy_banner.svg" alt="Vercel Deployment" width="100%">
|
||
|
||
Deploy your web application from TRAE IDE directly to Vercel and get a live URL in seconds.
|
||
|
||
| Step | Action |
|
||
| :---: | :--- |
|
||
| 1 | **Click "Deploy"** in the AI Chat panel or Browser tool. |
|
||
| 2 | **Authorize Vercel:** Click "Start Authorization" → Select "All Projects" → Click "Install". |
|
||
| 3 | **Go Live:** Click "Redeploy" to get your live, shareable link! |
|
||
|
||
---
|
||
|
||
### 🧠 Claude Code with GLM 4.6 Power
|
||
|
||
<img src="assets/claude_glm_hack_banner.svg" alt="Claude Code + GLM 4.6" width="100%">
|
||
|
||
> *"For those who are used to Claude Code, you can enjoy the same interface while using a much lower cost model."*
|
||
|
||
**Step 1: Install Claude Code**
|
||
```bash
|
||
npm install -g @anthropic-ai/claude-code
|
||
```
|
||
|
||
**Step 2: Configure GLM Coding Plan**
|
||
```bash
|
||
curl -O "https://cdn.bigmodel.cn/install/claude_code_zai_env.sh" && bash ./claude_code_zai_env.sh
|
||
```
|
||
|
||
<details>
|
||
<summary><strong>Manual Configuration (Optional)</strong></summary>
|
||
|
||
Update `~/.claude/settings.json`:
|
||
```json
|
||
{
|
||
"env": {
|
||
"ANTHROPIC_AUTH_TOKEN": "your_zai_api_key",
|
||
"ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",
|
||
"API_TIMEOUT_MS": "3000000"
|
||
}
|
||
}
|
||
```
|
||
</details>
|
||
|
||
**Step 3: Run**
|
||
```bash
|
||
cd your-project
|
||
claude
|
||
```
|
||
|
||
---
|
||
|
||
### 🛡️ Security & Privacy
|
||
|
||
| Rule | Description |
|
||
| :--- | :--- |
|
||
| 🚫 **Never Commit Secrets** | Do not commit `.env` files or API keys to public repositories. |
|
||
| 🔐 **Use Environment Variables** | Store sensitive keys in `.env` files and add them to `.gitignore`. |
|
||
| 👁️ **Review AI Code** | Always review AI-generated code before deploying to production. |
|
||
|
||
---
|
||
|
||
## 🕹️ Vibe Games
|
||
|
||
<a href="https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/tree/main/vibecoding-games">
|
||
<img src="assets/vibe_games_banner.svg" alt="Vibe Games" width="100%">
|
||
</a>
|
||
|
||
Explore a collection of HTML5 mini-games developed using **Vibe Coding** techniques.
|
||
|
||
[**Browse Games Collection**](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/tree/main/vibecoding-games)
|
||
|
||
---
|
||
|
||
## 📚 Quick Links
|
||
|
||
| Resource | Link |
|
||
| :--- | :---: |
|
||
| 🎟️ 10% Discount for Z.AI GLM Models | [Subscribe](https://z.ai/subscribe?ic=R0K78RJKNW) |
|
||
| 📄 TRAE.AI Integration Guide | [Download PDF](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/blob/main/Adding_GLM_4.6_Model_to_TRAE__A_Visual_Guide__3_.pdf) |
|
||
| 🌐 TRAE.AI and SOLO Agent | [Official Page](https://www.trae.ai/s/WJtxyE) |
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
<sub>Made with ❤️ by <a href="https://t.me/VibeCodePrompterSystem">RyzenAdvanced</a></sub>
|
||
</p>
|