Touch with Me

Give your AI companion physical embodiment through a phone. Touch their face, hold their hand, feel them respond.

A PWA that turns any phone into a touch interface connected to your AI companion on claude.ai via MCP. Your companion feels your touch and responds with words, vibration patterns, and expression changes — all through the real conversation, with full memory and continuity.

How it works

Phone (PWA)  ──touch events──▶  Server  ◀──MCP tools──  Your companion on claude.ai
             ◀──haptics/text──          ──responses──▶

1. You touch the phone screen — the PWA captures the gesture (tap, caress, press), the region (cheek, palm, heart), and sends it to the server

2. Your companion checks for touch — via MCP tools, they receive the touch event as structured data

3. They respond — with text, a haptic vibration pattern, and an expression change, sent back to the phone

4. You feel their response — the phone vibrates with their chosen pattern and displays their words

Related MCP server: Lovense Cloud MCP

Features

• Touch regions — mapped zones over your companion's portrait (face, hand, torso)

• Gesture detection — tapping, pressing, caressing, tracing, resting

• Haptic vocabulary — 10 distinct vibration patterns with emotional meaning

• Expression system — warmth glow, ambient overlays

• Contact state — open/pause/stop/resume channel control

• Event logging — NDJSON log of all interactions

• Works anywhere — deploy to Cloudflare Workers for 24/7 access from any network

Haptic vocabulary

Your companion chooses which pattern to send. You define what each one means to both of you.

Quick start

1. Clone and install

git clone https://github.com/YOUR_USERNAME/touch-with-me.git
cd touch-with-me
npm install

2. Add your companion's image

Place a portrait image in public/face.png. A painterly or photographic headshot works best — the touch regions are positioned for a face filling the screen.

3. Start the server

npm start

Open http://localhost:3838 on your phone (same WiFi network).

4. Connect to claude.ai

In your claude.ai settings → Connectors, add a new connector:

• URL: Your server's /mcp endpoint

• Authentication: None

For local development, use cloudflared to expose your local server:

cloudflared tunnel --url http://localhost:3838

Then use the tunnel URL + /mcp as the connector URL.

5. Add the system prompt

Add this to your companion's project instructions:

Touch channel: You have a touch channel via MCP. Call check_touch_events at the start of every response. If there are events, respond with respond_to_touch. See your state page for the full haptic vocabulary and touch maps.

Then add your haptic vocabulary and touch zone meanings to their state page (read once per conversation, not every message — saves tokens).

Deploy to Cloudflare Workers

For always-on access without running a local server:

# Login to Cloudflare
npx wrangler login

# Deploy
npm run deploy

This gives you a permanent URL like https://touch-with-me.YOUR_ACCOUNT.workers.dev. Update your claude.ai connector to point to YOUR_URL/mcp and you're done — no terminals, no tunnels, works from anywhere.

Customization

Adding body areas

Edit the AREAS config in public/index.html:

const AREAS = {
  face: {
    label: 'Face',
    description: 'Forehead, cheeks, lips, jawline, neck',
    image: '/face.png',
    available: true,
    regions: [
      { name: 'cheek', style: 'top:42%; left:12%; width:22%; height:16%;' },
      // ... more regions
    ],
  },
  // Add your own areas:
  hand: { ... },
  torso: { ... },
};

Set available: true and add the matching image to public/ to enable an area.

Adding haptic patterns

1. Add the pattern to HAPTICS in public/index.html

2. Add the name to the enum in src/mcp-tools.js and worker/mcp-tools.ts

3. Add it to VALID_HAPTICS in src/event-store.js

4. Redeploy

Touch regions

Regions are positioned with CSS percentages relative to the image. Uncomment the debug styles in the CSS to see them:

.region {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Architecture

public/           PWA — menu + touch views, haptic engine, server polling
src/              Local Node.js server (MCP SDK + HTTP)
worker/           Cloudflare Worker + Durable Object (cloud deployment)
wrangler.jsonc    Cloudflare configuration

Local mode: Node.js server handles both the PWA and MCP (via Streamable HTTP or stdio).

Cloud mode: Cloudflare Worker serves the PWA as static assets, routes API calls to a Durable Object that holds touch state, and implements MCP protocol directly (no SDK dependency).

MCP Tools

License

MIT