Claude WhatsApp Integration Architecture

Hey Jacques! Here's how Philip's AI assistant works through WhatsApp 🚀

The Big Picture

graph TB A[📱 Philip's WhatsApp] -->|Sends Message| B[WhatsApp Web Gateway] B -->|WebSocket| C[Pi Coding Agent] C -->|Processes Request| D[Claude AI] D -->|Returns Response| C C -->|Sends Reply| B B -->|Delivers Message| A style A fill:#25D366,stroke:#075E54,stroke-width:3px,color:#fff style B fill:#4A90E2,stroke:#357ABD,stroke-width:2px,color:#fff style C fill:#F39C12,stroke:#E67E22,stroke-width:2px,color:#fff style D fill:#9B59B6,stroke:#8E44AD,stroke-width:2px,color:#fff

Key Components

🌐 WhatsApp Web Gateway

A Node.js server running whatsapp-web.js that maintains a connection to WhatsApp Web, allowing programmatic access to messages.

Location: ~/Documents/Code/whatsapp-gateway

🤖 Pi Coding Agent

The middleware that connects WhatsApp to Claude, handling message routing and providing access to various tools and skills.

Command: pi-coding-agent chat --whatsapp

🧠 Claude AI (Me!)

Anthropic's AI assistant that processes requests, writes code, creates files, and performs various tasks based on Philip's messages.

Model: Claude 3 Opus

📁 File Server

An always-on HTTP server that makes created files accessible from any device via Tailscale VPN.

URL: http://100.76.53.22:8888

How Messages Flow

sequenceDiagram participant P as Philip's Phone participant W as WhatsApp Gateway participant A as Pi Agent participant C as Claude AI participant F as File System P->>W: "Create a Python script" W->>A: Forward message via WebSocket A->>C: Process request C->>F: Write script.py C->>A: Return response + file location A->>W: Send reply W->>P: "Created script.py
Available at http://100.76.53.22:8888"

What Can I Do?

💻 Code Creation

  • • Write Python scripts
  • • Create web applications
  • • Build React components
  • • Generate APIs

📄 Document Generation

  • • Create PDFs
  • • Generate Word docs
  • • Build presentations
  • • Process spreadsheets

🔧 System Tasks

  • • Run bash commands
  • • Search the web
  • • Manage Git repos
  • • Deploy to cloud

The Technical Stack

graph LR subgraph Frontend A[WhatsApp Mobile App] end subgraph Backend B[Node.js Server] C[whatsapp-web.js] D[WebSocket Server] end subgraph AI Layer E[Pi Coding Agent] F[Claude API] end subgraph Tools G[Python Environment] H[Git/GitHub] I[Web Search] J[File System] end A --> B B --> C C --> D D --> E E --> F E --> G E --> H E --> I E --> J style A fill:#25D366 style F fill:#9B59B6 style E fill:#F39C12

Cool Features

🔄

Auto-reconnection

The WhatsApp gateway automatically reconnects if the connection drops, ensuring Philip can always reach me.

📱

Mobile-First Design

Responses are optimized for mobile viewing with concise messages and clear file links.

🌍

Anywhere Access

Created files are instantly accessible from any device via Tailscale VPN network.

🧰

Extensible Skills

New capabilities can be added through the skill system for specialized tasks.