Skip to content

Instantly share code, notes, and snippets.

@GGPrompts

GGPrompts/ECOSYSTEM_PLAN.md

Last active December 13, 2025 00:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GGPrompts/606b5109540785b111a1faedacd66c24 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GGPrompts/606b5109540785b111a1faedacd66c24 to your computer and use it in GitHub Desktop.
Download ZIP
GGPrompts Ecosystem Integration Plan - TabzChrome, GGPrompts, TFE, Portfolio
Raw
ECOSYSTEM_PLAN.md

GGPrompts Ecosystem - Integration Status & Plan

Updated: 2025-12-12 Projects: TabzChrome, GGPrompts (ggprompts-next), Portfolio (my-portfolio)

Executive Summary

Three interconnected projects form the TabzChrome Ecosystem:

Project Purpose Status
TabzChrome Chrome extension + backend for terminal sidebar Production Ready
my-portfolio Showcase pages + interactive demos Complete
ggprompts-next Claude Code marketplace + prompt library Feature Complete

All projects have working TabzChrome integration. Infrastructure is ready for production use.

Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                              USER'S BROWSER                                  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌──────────────────┐    ┌──────────────────┐    ┌──────────────────┐      │
│  │  GGPrompts.com   │    │  Portfolio Site  │    │  TabzChrome      │      │
│  │  (ggprompts-next)│    │  (my-portfolio)  │    │  Sidebar         │      │
│  │                  │    │                  │    │                  │      │
│  │ • Browse prompts │    │ • Demo pages     │    │ • Terminal tabs  │      │
│  │ • Browse skills  │───▶│ • Claude Launcher│───▶│ • Chat bar       │      │
│  │ • User toolkit   │    │ • TUI launchers  │    │ • MCP tools      │      │
│  └────────┬─────────┘    └────────┬─────────┘    └────────┬─────────┘      │
│           │                       │                       │                 │
│           │ QUEUE_COMMAND         │ data-terminal-command │                 │
│           │ (WebSocket)           │ + Spawn API           │                 │
│           └───────────────────────┴───────────────────────┘                 │
│                                   │                                          │
│                                   ▼                                          │
│                        ┌──────────────────────┐                             │
│                        │  TabzChrome Backend  │                             │
│                        │  localhost:8129      │                             │
│                        └──────────────────────┘                             │
└─────────────────────────────────────────────────────────────────────────────┘

What's Been Built (Complete)

TabzChrome Core

  • Chrome sidebar extension with xterm.js terminals
  • 20 MCP tools for browser automation (screenshots, clicks, network capture)
  • WebSocket real-time terminal I/O
  • REST API: /api/spawn, /api/health, /api/browser/*
  • AI Launcher (localhost:8129/launcher.html) - Claude, Codex, Gemini
  • Terminal persistence via tmux
  • Claude Code status tracking (🤖✅ 🤖⏳ 🤖🔧)
  • Audio notifications (20+ neural voices)
  • data-terminal-command attribute for click-to-queue
  • QUEUE_COMMAND WebSocket message for external apps

Portfolio Site (my-portfolio)

Page Route Description
TabzChrome Showcase /projects/tabz-chrome Full demo page with video, MCP tools, TUI launchers
Demo Template /projects/demo-template Assembles demo components for recording
Commands Reference /commands 72+ click-to-run terminal commands

Demo Components (/components/demo/):

  • ClaudeLauncher.tsx - Interactive Claude spawner (spawns via API)
  • HeroSection.tsx, FeaturesSection.tsx, ReferenceSection.tsx
  • AudioNotifications.tsx, OmniboxCommands.tsx

Integration Docs (/docs/tabzchrome-terminal-links.md):

  • All 4 integration methods documented
  • Architecture diagrams
  • GGPrompts use case examples

GGPrompts Platform (ggprompts-next)

Feature Route Status
Claude Code Marketplace /claude-code/* 38 components seeded
Browse Skills /claude-code/skills Done
Browse Agents /claude-code/agents Done
Browse Commands /claude-code/commands Done
Browse Hooks /claude-code/hooks Done
Browse MCPs /claude-code/mcps Done
User Toolkit /claude-code/toolkit Done
TabzChrome Info /tabzchrome Done
Terminal Settings /settings Working directory, AI tool, YOLO mode
GitHub Sync OAuth Bidirectional with my-gg-plugins

TabzChrome Integration:

  • useTabzChrome.tsx hook - health check, spawn, context provider
  • SendToTerminalButton.tsx - icon/button/dropdown variants with fallback
  • TabzChromeStatus.tsx - live connection indicator

Integration Methods

1. data-terminal-command (Click to Queue)

<button data-terminal-command="npm run dev">Run Dev Server</button>
  • Content script detects clicks, queues to chat bar
  • Used in: Portfolio commands page, GitHub Pages docs

2. Spawn API (Create New Terminal)

POST http://localhost:8129/api/spawn
{
  "name": "Claude Worker",
  "workingDir": "~/projects/myapp",
  "command": "claude --dangerously-skip-permissions"
}
  • Creates new terminal tab with optional startup command
  • Used in: Portfolio Claude Launcher

3. WebSocket QUEUE_COMMAND (External Apps)

const ws = new WebSocket('ws://localhost:8129')
ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'QUEUE_COMMAND',
    command: 'your prompt or command here'
  }))
}
  • Queues text to chat bar without spawning
  • Best for sending prompts - no shell escaping needed

4. Right-Click Context Menu

  • "Send to Chat" - queues highlighted text to chat bar
  • "Send to Terminal" - sends to active terminal
  • Works on any highlighted text on any page

Issue: GGPrompts Prompt Escaping

Problem

Current SendToTerminalButton builds shell commands:

// Fragile - breaks on newlines, quotes, JSON
const command = `claude -p '${promptContent.replace(/'/g, "'\\''")}'`
spawnTerminal({ command })

Solution

Use QUEUE_COMMAND instead - no escaping needed:

// In useTabzChrome.tsx - add queueToChat method
const ws = new WebSocket('ws://localhost:8129')
ws.send(JSON.stringify({
  type: 'QUEUE_COMMAND',
  command: promptContent  // Raw prompt, user sends to their Claude terminal
}))

User flow:

  1. User has Claude terminal open
  2. Clicks "Send to Terminal" on prompt card
  3. Prompt appears in chat bar (no escaping issues)
  4. User reviews and presses Enter

Options for Next Steps

Option A: Local Dashboard (Recommended)

Add localhost:8129/dashboard.html as comprehensive control panel:

  • Current working directory (live from extension)
  • Active terminals list
  • AI Launcher (already exists)
  • Link to GGPrompts
  • Button in TabzChrome header to open

Why: Full local access, no CORS issues, real-time state Effort: Medium (1-2 days)

Option B: Fix GGPrompts Send to Terminal

Update useTabzChrome.tsx:

  • Add queueToChat(prompt) method using WebSocket
  • Change SendToTerminalButton to use queue instead of spawn with -p

Why: Fixes broken prompt sending immediately Effort: Low (few hours)

Option C: GGPrompts REST APIs

Add public APIs for component discovery:

GET /api/components?type=skill&featured=true
GET /api/toolkit (authenticated)

Why: TabzChrome could fetch components directly Effort: Low (existing patterns in codebase)

Option D: In-Sidebar Browser Panel

TabzChrome sidebar gets "Browse GGPrompts" tab:

  • Fetch featured skills/agents
  • One-click spawn with selected component

Why: Seamless UX, no tab switching Effort: High (new UI in extension)

File Locations Reference

TabzChrome

~/projects/TabzChrome/
├── backend/
│   ├── server.js                    # WebSocket + REST API
│   └── public/
│       └── launcher.html            # AI Terminal Launcher
├── extension/
│   ├── sidepanel/sidepanel.tsx      # Main sidebar UI
│   ├── content/content.ts           # data-terminal-command handler
│   └── background/background.ts     # QUEUE_COMMAND handler
└── docs/pages/                      # GitHub Pages docs

Portfolio (my-portfolio)

~/projects/my-portfolio/
├── app/projects/
│   ├── tabz-chrome/page.tsx         # TabzChrome showcase
│   └── demo-template/page.tsx       # Demo assembly page
├── app/commands/page.tsx            # Terminal commands reference
├── components/demo/
│   └── ClaudeLauncher.tsx           # Interactive launcher
└── docs/tabzchrome-terminal-links.md

GGPrompts (ggprompts-next)

~/projects/ggprompts-next/
├── app/
│   ├── tabzchrome/page.tsx          # TabzChrome info page
│   ├── claude-code/                 # Marketplace pages
│   └── settings/TerminalSettings.tsx
├── hooks/useTabzChrome.tsx          # React hook + provider
└── components/prompts/
    └── SendToTerminalButton.tsx     # Send to Terminal button

Quick Commands

# Start TabzChrome backend
cd ~/projects/TabzChrome/backend && npm start
# Or with dev script (creates tmux session)
cd ~/projects/TabzChrome && ./scripts/dev.sh

# Start GGPrompts dev
cd ~/projects/ggprompts-next && npm run dev

# Start Portfolio dev
cd ~/projects/my-portfolio && npm run dev

# Open AI Launcher
open http://localhost:8129/launcher.html

# List active Chrome extension terminals
tmux ls | grep "^ctt-"

Summary

The ecosystem is feature-complete for basic workflows. All three projects communicate:

  1. GGPrompts = Content source (prompts, skills, agents, marketplace)
  2. Portfolio = Showcase + interactive demos
  3. TabzChrome = Execution environment (terminal sidebar)

Immediate priority: Fix GGPrompts SendToTerminalButton to use QUEUE_COMMAND instead of shell-escaped claude -p.

Next highest impact: Local Dashboard (Option A) for comprehensive control panel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment