Remote Access

Monitor Claude Code sessions from anywhere using secure Cloudflare Tunnels.

Overview

Cloudflare Tunnel creates secure, temporary public URLs for local Claude Code dashboards:

Analytics Dashboard - Real-time session monitoring
Chat Interface - Mobile-optimized conversation viewer
2025 Year in Review - Usage statistics dashboard

Tunnels are temporary and private - they expire when you close the dashboard and require the full URL to access.

Setup

Install Cloudflared

macOS
Windows
Linux

brew install cloudflared

winget install --id Cloudflare.cloudflared

# Debian/Ubuntu
wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

# Or via package manager
sudo apt-get install cloudflared

Verify installation:

cloudflared version
# cloudflared version 2024.2.1

Using Remote Access

Analytics Dashboard

Launch analytics with remote access:

npx claude-code-templates@latest --analytics --tunnel

Output:

🚀 Starting Claude Code Analytics Dashboard...
🚀 Creating secure tunnel...

╔════════════════════════════════════════════════════════════╗
║                                                            ║
║             🌍 CLOUDFLARE TUNNEL ACTIVE                    ║
║                                                            ║
║   🔗 https://abc-def-ghi.trycloudflare.com                ║
║                                                            ║
║   🔒 This tunnel is private and secure - only             ║
║      accessible by you                                     ║
║                                                            ║
╚════════════════════════════════════════════════════════════╝

📊 Analytics running locally: http://localhost:3333

Share the trycloudflare.com URL to access from:

Mobile devices
Remote machines
Team members (temporary access)

Chat Interface

Mobile-optimized chat viewer with tunnel:

npx claude-code-templates@latest --chats --tunnel

Output:

💬 Starting Claude Code Chat Interface...
☁️  Cloudflare Tunnel ready: https://xyz-123-abc.trycloudflare.com

📱 Local access: http://localhost:3334
☁️  Remote access: https://xyz-123-abc.trycloudflare.com

🌐 Opening remote URL: https://xyz-123-abc.trycloudflare.com

The remote URL opens automatically in your default browser.

2025 Year in Review

Share your usage statistics:

npx claude-code-templates@latest --2025 --tunnel

How It Works

Tunnel Architecture

Cloudflare Tunnel creates a secure connection:

Your Machine                    Cloudflare Edge           Internet
┌─────────────────┐            ┌────────────────┐       ┌─────────┐
│ Dashboard       │            │                │       │         │
│ localhost:3333  │<─────────>│  Tunnel Proxy  │<─────>│ Browser │
│                 │   WebSocket│                │ HTTPS │         │
└─────────────────┘            └────────────────┘       └─────────┘

Key features:

No port forwarding required
No firewall changes needed
Automatic HTTPS with valid certificates
WebSocket support for real-time updates

Implementation

The tunnel launcher (from src/analytics.js and src/chats-mobile.js):

async startCloudflareTunnel() {
  // Check if cloudflared is installed
  const checkProcess = spawn('cloudflared', ['version'], { stdio: 'pipe' });
  
  // Start tunnel
  this.cloudflareProcess = spawn('cloudflared', [
    'tunnel',
    '--url', `http://localhost:${this.port}`,
    '--no-autoupdate'
  ]);
  
  // Parse tunnel URL from output
  this.cloudflareProcess.stderr.on('data', (data) => {
    const output = data.toString();
    const urlMatch = output.match(/https:\/\/[a-zA-Z0-9.-]+\.trycloudflare\.com/);
    
    if (urlMatch) {
      const tunnelUrl = urlMatch[0];
      console.log(`☁️  Cloudflare Tunnel ready: ${tunnelUrl}`);
    }
  });
}

URL Format

Tunnel URLs follow the pattern:

https://{random-slug}.trycloudflare.com

Examples:

https://abc-def-ghi.trycloudflare.com
https://xyz-123-abc.trycloudflare.com
https://quick-fire-light.trycloudflare.com

Tunnel URLs are randomly generated each time. Don’t bookmark them - they won’t work after the tunnel closes.

Mobile Access

Access dashboards from your phone or tablet:

Start Dashboard with Tunnel

npx claude-code-templates@latest --chats --tunnel

Copy Tunnel URL

☁️  Remote access: https://xyz-123-abc.trycloudflare.com

Open on Mobile

Send URL to yourself (Slack, email, SMS)
Scan QR code (if using --qr flag)
Type URL directly in mobile browser

Mobile Optimization

The chat interface is optimized for mobile:

/* From chats-mobile.js */
@media (max-width: 768px) {
  .conversation-card {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .message-content {
    max-width: 100%;
    overflow-x: auto;
  }
}

Mobile features:

Responsive layouts
Touch-optimized controls
Swipe gestures
Auto-scrolling conversations

Security

Tunnel Privacy

Free Cloudflare Tunnels are:

Private (require full random URL)
Temporary (expire when you close the tunnel)
Not indexed by search engines
Not guessable (URLs have high entropy)

However, anyone with the URL can access the dashboard while the tunnel is active.

Best Practices

DO:

✅ Use tunnels for temporary access
✅ Share URLs through private channels (Slack DM, encrypted email)
✅ Close tunnel when done (Ctrl+C in terminal)
✅ Use local access (localhost) when possible

DON’T:

❌ Share tunnel URLs publicly
❌ Post tunnel URLs on social media
❌ Leave tunnels running indefinitely
❌ Use tunnels for sensitive production data

Protecting Sensitive Data

If dashboards show sensitive information:

# 1. Don't use --tunnel flag
npx claude-code-templates@latest --analytics

# 2. Access via localhost only
# Open: http://localhost:3333

# 3. Or use SSH tunneling for secure remote access
ssh -L 3333:localhost:3333 user@remote-machine

Advanced Usage

Custom Tunnel Configuration

Cloudflared supports additional options:

# Custom tunnel with specific hostname
cloudflared tunnel --url http://localhost:3333 --hostname custom-name.trycloudflare.com

# With authentication
cloudflared tunnel --url http://localhost:3333 --credentials-file /path/to/credentials.json

Modify the launcher in src/analytics.js to add custom flags:

this.cloudflareProcess = spawn('cloudflared', [
  'tunnel',
  '--url', `http://localhost:${this.port}`,
  '--no-autoupdate',
  // Add custom flags here
  '--protocol', 'http2',
  '--compression-quality', '5'
]);

Persistent Named Tunnels

For longer-term access, create a named tunnel:

# Login to Cloudflare
cloudflared login

# Create named tunnel
cloudflared tunnel create claude-analytics

# Configure tunnel
cat > ~/.cloudflared/config.yml <<EOF
tunnel: claude-analytics
credentials-file: /path/to/credentials.json

ingress:
  - hostname: analytics.yourdomain.com
    service: http://localhost:3333
  - service: http_status:404
EOF

# Run named tunnel
cloudflared tunnel run claude-analytics

Benefits:

Consistent URL
Custom domain
Access control
Load balancing

Named tunnels require a Cloudflare account and domain. Free tier is sufficient for personal use.

Tunnel Monitoring

Monitor tunnel status:

# Check tunnel process
ps aux | grep cloudflared

# View tunnel logs
cloudflared tunnel info claude-analytics

# List active tunnels
cloudflared tunnel list

Troubleshooting

Tunnel Not Starting

❌ Error: cloudflared command not found

Solutions:

Install cloudflared (see Setup section)

Add to PATH:

export PATH="$PATH:/path/to/cloudflared"

Use full path in scripts

No Tunnel URL Displayed

🚀 Creating secure tunnel...
[cloudflared] ... (output but no URL)

Debugging:

# Test cloudflared manually
cloudflared tunnel --url http://localhost:3333

# Check for errors in output
# Look for firewall/network issues

Tunnel Disconnects Frequently

Causes:

Network instability
Firewall blocking WebSocket connections
ISP restrictions

Solutions:

# Use HTTP/2 protocol (more stable)
cloudflared tunnel --url http://localhost:3333 --protocol http2

# Increase heartbeat interval
cloudflared tunnel --url http://localhost:3333 --heartbeat-interval 30s

WebSocket Errors

WebSocket connection failed: Error during WebSocket handshake

Cloudflare Tunnel supports WebSocket by default, but check:

# Verify cloudflared version (ensure latest)
cloudflared version

# Update if needed
brew upgrade cloudflared  # macOS

Alternatives to Tunnels

SSH Port Forwarding

For secure remote access without Cloudflare:

# On remote machine
ssh -R 3333:localhost:3333 user@remote-server

# Or reverse tunnel
ssh -L 3333:localhost:3333 user@remote-machine

VPN Access

Access via VPN:

# Connect to VPN
sudo openvpn --config company.ovpn

# Start dashboard (local only)
npx claude-code-templates@latest --analytics

# Access via VPN IP
http://10.0.0.5:3333

ngrok Alternative

Similar tunnel service:

# Install ngrok
brew install ngrok  # macOS

# Start tunnel
ngrok http 3333

Examples

Monitor from Mobile While Coding

# On development machine
npx claude-code-templates@latest --analytics --tunnel

# Copy URL to phone
# Monitor Claude Code activity in real-time from mobile

# Start chat interface with tunnel
npx claude-code-templates@latest --chats --tunnel

# Share URL in Slack:
# "Check out this conversation: https://xyz.trycloudflare.com"

Remote Debugging

# Developer 1: Start analytics with tunnel
npx claude-code-templates@latest --analytics --tunnel

# Developer 2: Access from home
# Open tunnel URL
# See real-time conversation state and debug issues

Performance Considerations

Latency

Cloudflare Tunnel adds minimal latency:

Local: Less than 1ms
Tunnel: 10-50ms (depending on location)
WebSocket: Real-time updates still feel instant

Bandwidth

Analytics dashboard bandwidth usage:

Initial load: ~500KB (HTML, CSS, JS)
WebSocket updates: ~1-5KB per message
Polling: ~10KB per refresh

Scaling

Free tunnels support:

Unlimited bandwidth
100+ concurrent connections
WebSocket connections

For higher traffic, consider named tunnels with load balancing.

Next Steps

Creating Components

Build custom agents, commands, and MCPs

Sandbox Execution

Run Claude Code in isolated environments

​Remote Access

​Overview

​Setup

​Install Cloudflared

​Using Remote Access

​Analytics Dashboard

​Chat Interface

​2025 Year in Review

​How It Works

​Tunnel Architecture

​Implementation

​URL Format

​Mobile Access

​Mobile Optimization

​Security

​Tunnel Privacy

​Best Practices

​Protecting Sensitive Data

​Advanced Usage

​Custom Tunnel Configuration

​Persistent Named Tunnels

​Tunnel Monitoring

​Troubleshooting

​Tunnel Not Starting

​No Tunnel URL Displayed

​Tunnel Disconnects Frequently

​WebSocket Errors

​Alternatives to Tunnels

​SSH Port Forwarding

​VPN Access

​ngrok Alternative

​Examples

​Monitor from Mobile While Coding

​Share Demo with Team

​Remote Debugging

​Performance Considerations

​Latency

​Bandwidth

​Scaling

​Next Steps

Creating Components

Sandbox Execution

Remote Access

Overview

Setup

Install Cloudflared

Using Remote Access

Analytics Dashboard

Chat Interface

2025 Year in Review

How It Works

Tunnel Architecture

Implementation

URL Format

Mobile Access

Mobile Optimization

Security

Tunnel Privacy

Best Practices

Protecting Sensitive Data

Advanced Usage

Custom Tunnel Configuration

Persistent Named Tunnels

Tunnel Monitoring

Troubleshooting

Tunnel Not Starting

No Tunnel URL Displayed

Tunnel Disconnects Frequently

WebSocket Errors

Alternatives to Tunnels

SSH Port Forwarding

VPN Access

ngrok Alternative

Examples

Monitor from Mobile While Coding

Share Demo with Team

Remote Debugging

Performance Considerations

Latency

Bandwidth

Scaling

Next Steps