Imported from jeremylongshore/tons-of-skills-marketplace (skills/.curated/clay-local-dev-loop/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill clay-local-dev-loop. Copyright stays with the author (MIT).

Clay Local Dev Loop

Overview

Clay is a web-based platform with no local runtime. Your local dev loop consists of: (1) scripts that push data into Clay via webhooks, (2) Clay enrichment running in the cloud, and (3) HTTP API columns pushing enriched data back to your local endpoint via ngrok. This skill sets up that feedback loop.

Prerequisites

• Completed clay-install-auth setup
• Node.js 18+ or Python 3.10+
• ngrok installed (npm install -g ngrok or ngrok.com)
• Clay table with webhook source configured

Instructions

Step 1: Expose Your Local Server via ngrok

Clay's HTTP API enrichment columns need a public URL to call your local endpoints.

# Start ngrok tunnel to your local server
ngrok http 3000
# Copy the HTTPS forwarding URL (e.g., https://abc123.ngrok-free.app)

Step 2: Create a Local Webhook Receiver

// src/clay-receiver.ts — receives enriched data from Clay HTTP API columns
import express from 'express';

const app = express();
app.use(express.json());

// Clay HTTP API column calls this endpoint
app.post('/api/clay/enriched', (req, res) => {
  const enrichedData = req.body;
  console.log('Enriched record received from Clay:', {
    email: enrichedData.email,
    company: enrichedData.company_name,
    title: enrichedData.job_title,
    enrichment_source: enrichedData._clay_source,
  });

  // Process the enriched data (save to DB, trigger outreach, etc.)
  res.json({ status: 'received', timestamp: new Date().toISOString() });
});

// Health check for Clay HTTP API column testing
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', service: 'clay-dev-receiver' });
});

app.listen(3000, () => {
  console.log('Clay dev receiver listening on http://localhost:3000');
  console.log('Configure Clay HTTP API column to POST to: <ngrok-url>/api/clay/enriched');
});

Step 3: Build a Test Data Sender

// src/send-test-leads.ts — push test data into Clay via webhook
const CLAY_WEBHOOK_URL = process.env.CLAY_WEBHOOK_URL!;

const testLeads = [
  { email: 'cto@stripe.com', domain: 'stripe.com', source: 'dev-test' },
  { email: 'vp@notion.so', domain: 'notion.so', source: 'dev-test' },
  { email: 'head@figma.com', domain: 'figma.com', source: 'dev-test' },
];

async function sendTestBatch() {
  for (const lead of testLeads) {
    const res = await fetch(CLAY_WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(lead),
    });
    console.log(`Sent ${lead.email}: ${res.status}`);
    await new Promise(r => setTimeout(r, 200)); // Respect rate limits
  }
  console.log('\nCheck your Clay table — enrichment columns should auto-run.');
  console.log('Enriched data will POST back to your ngrok endpoint.');
}

sendTestBatch();

Step 4: Configure Clay HTTP API Column to Call You Back

In your Clay table:

1. Click + Add Column > HTTP API
2. Set Method: POST
3. Set URL: https://your-ngrok-url.ngrok-free.app/api/clay/enriched
4. Set Body (JSON): Map enriched columns using Clay's {{column_name}} syntax:

{
  "email": "{{Email}}",
  "company_name": "{{Company Name}}",
  "job_title": "{{Job Title}}",
  "employee_count": "{{Employee Count}}",
  "linkedin_url": "{{LinkedIn URL}}"
}

1. Enable Auto-run on new rows

Step 5: Dev Loop Iteration Cycle

# Terminal 1: Run ngrok
ngrok http 3000

# Terminal 2: Run your local receiver
npx tsx src/clay-receiver.ts

# Terminal 3: Send test data to Clay
npx tsx src/send-test-leads.ts

# Watch Terminal 2 for enriched data flowing back from Clay

Iteration cycle:

1. Modify enrichment columns or Claygent prompts in Clay UI
2. Re-send test data via webhook
3. Observe enriched results in your local receiver
4. Adjust and repeat

Step 6: Mock Clay Responses for Unit Tests

// tests/clay-webhook.test.ts — test without hitting Clay
import { describe, it, expect } from 'vitest';

const mockClayEnrichedPayload = {
  email: 'jane@stripe.com',
  company_name: 'Stripe',
  employee_count: 8000,
  industry: 'Financial Technology',
  job_title: 'VP Engineering',
  linkedin_url: 'https://linkedin.com/in/janedoe',
  _clay_source: 'clearbit',
  _clay_enriched_at: '2026-03-22T10:00:00Z',
};

describe('Clay enriched data handler', () => {
  it('processes enriched lead correctly', async () => {
    const res = await fetch('http://localhost:3000/api/clay/enriched', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(mockClayEnrichedPayload),
    });
    expect(res.status).toBe(200);
    const body = await res.json();
    expect(body.status).toBe('received');
  });
});

Error Handling

Output

The development loop returns a local test receipt with fixture version, callback result, validation status, and any sanitized correlation ID. Use synthetic or irreversibly redacted fixtures; never tunnel production lead data, live secrets, or CRM credentials into a developer workstation.

Examples

Start the local handler, submit the mocked payload shown above through a temporary tunnel, and assert that the response is accepted without writing a real contact to a database or CRM. If the tunnel URL changes or the test fails, update only the staging test configuration and revoke the temporary endpoint after the session.

Resources

• Clay University -- HTTP API Integration
• ngrok Documentation

Next Steps

Once your dev loop works, see clay-sdk-patterns for production-ready integration patterns.