Terminal Commands

Add "Run in Terminal" buttons to any web page

data-terminal-command Attribute

Add data-terminal-command to any HTML element to make it queue commands to TabzChrome.

<!-- Simple button --> <button data-terminal-command="npm run dev">Start Dev Server</button> <!-- Link style --> <a href="#" data-terminal-command="git status">Check Git Status</a> <!-- Code block with run option --> <code data-terminal-command="npm install express">npm install express</code> <!-- Any element works --> <div data-terminal-command="docker compose up -d">Launch Containers</div>

How It Works

  1. Click the element with data-terminal-command
  2. TabzChrome sidebar opens and focuses the chat input
  3. Command populates in the chat input field
  4. User selects terminal tab to send the command to
  5. Visual feedback - element shows "✓ Queued!" with green background

Live Demo

Click these buttons to queue commands (requires TabzChrome extension installed):

Note: These buttons will only work if TabzChrome extension is installed and backend is running.

WebSocket QUEUE_COMMAND API

Send commands directly from CLI tools or scripts using WebSocket. Requires authentication token.

Using websocat 
# Install websocat
$ cargo install websocat
# or: brew install websocat

# Get auth token (generated on backend startup)
$ TOKEN=$(cat /tmp/tabz-auth-token)

# Send a command with token
$ echo '{"type":"QUEUE_COMMAND","command":"npm run dev"}' | websocat "ws://localhost:8129?token=$TOKEN"

Shell Function

Add to your .bashrc or .zshrc:

.bashrc / .zshrc 
# Queue command/prompt to TabzChrome sidebar
tabz() {
  local cmd="$*"
  local token=$(cat /tmp/tabz-auth-token 2>/dev/null)
  if [[ -z "$token" ]]; then
    echo "Error: TabzChrome backend not running (no auth token found)"
    return 1
  fi
  echo "{\"type\":\"QUEUE_COMMAND\",\"command\":$(echo "$cmd" | jq -Rs .)}" | websocat "ws://localhost:8129?token=$token"
}

# Usage:
$ tabz npm run dev
$ tabz "Explain this error and suggest a fix"

Multi-line Prompts

Send complex prompts with heredoc:

Multi-line prompt 
$ TOKEN=$(cat /tmp/tabz-auth-token)
$ cat <<'EOF' | jq -Rs '{type:"QUEUE_COMMAND",command:.}' | websocat "ws://localhost:8129?token=$TOKEN"
Implement a new feature that:
1. Adds user authentication
2. Uses JWT tokens
3. Includes refresh token rotation
EOF

JavaScript API (localhost only)

For web apps running on localhost (prompt libraries, dashboards, etc.):

// Fetch auth token (localhost only due to CORS) async function connectToTabz() { const res = await fetch('http://localhost:8129/api/auth/token'); const { token } = await res.json(); return new WebSocket(`ws://localhost:8129?token=${token}`); } // Queue a command to the chat input let ws; async function queueToTabz(command) { if (!ws || ws.readyState !== WebSocket.OPEN) { ws = await connectToTabz(); await new Promise(r => ws.onopen = r); } ws.send(JSON.stringify({ type: 'QUEUE_COMMAND', command })); }

Note: For remote web pages (like GitHub Pages), use data-terminal-command instead - the content script handles auth automatically.

Prompt Library Example

Build a prompt template UI with fillable fields:

Code Review Prompt

Preview:

Bug Fix Prompt

Preview:

Comparison: QUEUE_COMMAND vs Spawn API

Use Case Method Result
Send command to existing terminal QUEUE_COMMAND Populates chat input, user picks tab
Create new terminal + run command POST /api/spawn New tab appears with command running
Prompt library / templates QUEUE_COMMAND User reviews before sending
Claude Code launcher POST /api/spawn New Claude session starts automatically

Architecture

+------------------+ +------------------+ +------------------+ | Web Page | | CLI / Script | | Localhost App | | data-terminal- | | (websocat) | | (templates) | | command | | | | | +--------+---------+ +--------+---------+ +--------+---------+ | | | | content script | token from | token from | (no auth needed) | /tmp/tabz-auth-token | /api/auth/token v v v +------------------------------------------------------------------------+ | TabzChrome Backend | | ws://localhost:8129?token=AUTH_TOKEN | | | | case 'QUEUE_COMMAND': | | broadcast({ type: 'QUEUE_COMMAND', command: data.command }); | +-----------------------------------+------------------------------------+ | | broadcast to extension v +------------------------------------------------------------------------+ | Chrome Extension (background.ts) | | | | - Opens sidebar if closed | | - Forwards QUEUE_COMMAND to sidepanel | +-----------------------------------+------------------------------------+ | v +------------------------------------------------------------------------+ | Sidepanel (React) | | | | - Populates chat input with command | | - User picks terminal tab and sends | +------------------------------------------------------------------------+

Requirements