DenchClaw + VS Code: Manage Your CRM from Your IDE

Mark Rachapoom

March 26, 2026·8 min read

DenchClaw + VS Code: Manage Your CRM from Your IDE

If VS Code is where you spend most of your day, there's no reason to context-switch to a browser to manage your CRM. DenchClaw's workspace is a folder of files — configs, schemas, skill definitions, and a DuckDB database. All of it is accessible and editable from VS Code. This guide covers how to set it up and what to do with it.

Opening the DenchClaw Workspace#

Open the DenchClaw workspace folder directly in VS Code:

code ~/.openclaw-dench/workspace

You'll see a file tree like this:

workspace/
├── workspace.duckdb          ← your CRM data
├── config.json               ← gateway & integration settings
├── objects/                  ← CRM schema definitions
│   ├── person.object.yaml
│   ├── company.object.yaml
│   └── deal.object.yaml
├── skills/                   ← installed skills
│   ├── crm/SKILL.md
│   ├── browser/SKILL.md
│   └── ...
├── apps/                     ← Dench apps
├── docs/                     ← workspace documents
└── memory/                   ← agent memory files

Add this workspace to a VS Code workspace file if you want to combine it with your project code:

// my-project.code-workspace
{
  "folders": [
    { "name": "Project", "path": "./src" },
    { "name": "DenchClaw", "path": "/Users/you/.openclaw-dench/workspace" }
  ],
  "settings": {
    "files.associations": {
      "*.object.yaml": "yaml"
    }
  }
}

Editing Object Schema Files#

CRM objects are defined in .object.yaml files. When you add or modify a field in VS Code, DenchClaw picks it up on the next restart (or live-reload via openclaw config reload).

Example: Adding a field to the deal object#

Open objects/deal.object.yaml. The structure:

name: deal
displayName: Deal
icon: briefcase
fields:
  - key: name
    type: text
    required: true
  - key: value
    type: number
    label: Deal Value ($)
  - key: stage
    type: select
    options:
      - prospect
      - qualified
      - proposal
      - negotiation
      - closed_won
      - closed_lost
  - key: close_date
    type: date
  - key: probability
    type: number
    label: Probability (%)
    min: 0
    max: 100

Add new fields by inserting items into the fields array. VS Code's YAML support handles indentation automatically.

YAML Schema Validation#

Install YAML by Red Hat (extension ID: redhat.vscode-yaml). Then add DenchClaw's schema to your VS Code settings:

// .vscode/settings.json
{
  "yaml.schemas": {
    "https://dench.com/schemas/object.json": "objects/*.object.yaml",
    "https://dench.com/schemas/dench-app.json": "apps/**/.dench.yaml"
  }
}

With schema validation active, VS Code flags invalid field types, missing required properties, and typos in option values. Autocomplete works for field type names and option values.

Recommended VS Code Extensions#

These extensions make working with the DenchClaw workspace much more productive.

YAML (Red Hat)#

ID: redhat.vscode-yaml

Schema validation, autocomplete, and formatting for all YAML files. Required for editing object schemas.

DuckDB Pro (or DuckDB SQL Tools)#

ID: Evidence.duckdb-vscode or search "DuckDB" in the marketplace

Browse your workspace.duckdb file directly in VS Code. Run SQL queries, view table schemas, and explore data without leaving the editor.

To connect:

Open the extension
Add connection → DuckDB
Path: ~/.openclaw-dench/workspace/workspace.duckdb
Mode: Read-only (while gateway is running)

REST Client#

ID: humao.rest-client

Create .http files to test DenchClaw's REST API. This is the easiest way to explore the API without Postman:

### Get all leads
GET http://localhost:3000/api/entries?objectType=person&status=lead
Authorization: Bearer {{denchclaw_token}}
 
### Create a new person
POST http://localhost:3000/api/entries
Authorization: Bearer {{denchclaw_token}}
Content-Type: application/json
 
{
  "objectType": "person",
  "fields": {
    "name": "Jane Smith",
    "email": "jane@acme.com",
    "company": "Acme Corp",
    "status": "lead"
  }
}
 
### Update an entry
PATCH http://localhost:3000/api/entries/{{entry_id}}
Authorization: Bearer {{denchclaw_token}}
Content-Type: application/json
 
{
  "fields": {
    "status": "customer",
    "mrr": 499
  }
}

Store your token in a .env file and reference it with {{denchclaw_token}} — REST Client supports variable substitution from .env files automatically.

GitLens#

ID: eamodio.gitlens

If you're version-controlling your DenchClaw workspace (recommended for skill files and schema), GitLens gives you line-level blame and history.

Markdown All in One#

ID: yzhang.markdown-all-in-one

Skills are markdown files. This extension adds shortcuts, preview, and table of contents support.

JSON Editor#

ID: nickdemayo.vscode-json-editor

Visual editor for config.json. Some people prefer a GUI for nested JSON rather than editing raw text.

Writing Custom Skills in VS Code#

Skills live in skills/<name>/SKILL.md. They're markdown files with natural language instructions the agent follows. VS Code's markdown preview makes it easy to review skill logic as you write it.

Create a new skill:

mkdir -p ~/.openclaw-dench/workspace/skills/hubspot-sync
code ~/.openclaw-dench/workspace/skills/hubspot-sync/SKILL.md

The skill structure:

# HubSpot Sync Skill
 
## Purpose
Sync contacts and deals between HubSpot and DenchClaw.
 
## Trigger
When asked to "sync HubSpot" or "import from HubSpot".
 
## Prerequisites
- HUBSPOT_API_KEY set in environment or config
- `person` and `deal` objects must exist in DenchClaw
 
## Steps
 
### Sync Contacts
1. Call HubSpot Contacts API:
   GET https://api.hubapi.com/crm/v3/objects/contacts?limit=100
   Header: Authorization: Bearer {HUBSPOT_API_KEY}
 
2. For each contact, upsert into DenchClaw:
   - Match on email address
   - Fields: firstname+lastname → name, email, company, phone
   - Set source = 'hubspot'
 
### Sync Deals
1. Call HubSpot Deals API:
   GET https://api.hubapi.com/crm/v3/objects/deals?properties=dealname,amount,dealstage,closedate
   Header: Authorization: Bearer {HUBSPOT_API_KEY}
 
2. For each deal, upsert into DenchClaw:
   - Match on hubspot_deal_id
   - Fields: dealname → name, amount → value, dealstage → stage
 
## Error Handling
- On 401: inform user their HubSpot API key is invalid
- On rate limit (429): wait 10s and retry
- Log sync summary: X contacts imported, Y deals imported

VS Code's split-panel view (markdown source + preview) is ideal for writing skills. You can see exactly how the agent will read the instructions.

Using the VS Code Terminal for CLI Commands#

VS Code's integrated terminal is a full shell. Run DenchClaw CLI commands without switching windows:

# Open terminal: Ctrl+` (or Cmd+`)
 
# Start gateway
openclaw gateway start
 
# Query your database
openclaw db query "SELECT name, email, status FROM v_person ORDER BY created_at DESC LIMIT 20"
 
# Import a CSV you just received
openclaw import people ~/Downloads/new-leads.csv --map "Email=email,Name=name,Company=company"
 
# Ask your agent something
openclaw message "How many deals are in the proposal stage?"

Set up a VS Code task for common operations:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "DenchClaw: Start Gateway",
      "type": "shell",
      "command": "openclaw gateway start",
      "presentation": { "reveal": "silent" }
    },
    {
      "label": "DenchClaw: Stop Gateway",
      "type": "shell",
      "command": "openclaw gateway stop",
      "presentation": { "reveal": "silent" }
    },
    {
      "label": "DenchClaw: DB Shell",
      "type": "shell",
      "command": "duckdb ~/.openclaw-dench/workspace/workspace.duckdb",
      "presentation": { "panel": "new" }
    },
    {
      "label": "DenchClaw: Export Leads",
      "type": "shell",
      "command": "openclaw db query \"SELECT * FROM v_person WHERE status='lead'\" --format csv > /tmp/leads-export.csv && echo 'Exported to /tmp/leads-export.csv'",
      "presentation": { "reveal": "always" }
    }
  ]
}

Run tasks with Ctrl+Shift+P → Tasks: Run Task.

Building Dench Apps in VS Code#

Dench Apps are HTML/CSS/JS web apps that run inside DenchClaw and have access to your CRM data. VS Code is a great environment for building them.

Create an app folder:

mkdir -p ~/.openclaw-dench/workspace/apps/deals-dashboard/public

Write the manifest:

# apps/deals-dashboard/.dench.yaml
name: deals-dashboard
displayName: Deals Dashboard
description: Pipeline overview with charts
entrypoint: public/index.html
permissions:
  - db:read

Write the HTML/JS in public/index.html. The Dench platform API is available in the browser context:

<!DOCTYPE html>
<html>
<head>
  <title>Deals Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: system-ui; padding: 2rem; background: #f8f9fa; }
    .card { background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <h1>Pipeline Dashboard</h1>
  <div class="card">
    <canvas id="pipelineChart"></canvas>
  </div>
  <div class="card" id="dealsTable"></div>
 
  <script>
    async function loadDashboard() {
      const stageData = await Dench.db.query(`
        SELECT stage,
               count(*) as deal_count,
               sum(CAST(value AS DECIMAL)) as total_value
        FROM v_deal
        GROUP BY stage
        ORDER BY total_value DESC
      `);
 
      // Chart
      new Chart(document.getElementById('pipelineChart'), {
        type: 'bar',
        data: {
          labels: stageData.map(r => r.stage),
          datasets: [{
            label: 'Total Value ($)',
            data: stageData.map(r => r.total_value || 0),
            backgroundColor: '#4F46E5'
          }]
        }
      });
 
      // Table
      const deals = await Dench.db.query('SELECT name, value, stage, close_date FROM v_deal ORDER BY close_date LIMIT 20');
      const table = deals.map(d =>
        `<tr><td>${d.name}</td><td>$${d.value}</td><td>${d.stage}</td><td>${d.close_date || '—'}</td></tr>`
      ).join('');
      document.getElementById('dealsTable').innerHTML = `
        <table>
          <thead><tr><th>Deal</th><th>Value</th><th>Stage</th><th>Close Date</th></tr></thead>
          <tbody>${table}</tbody>
        </table>
      `;
    }
 
    loadDashboard();
  </script>
</body>
</html>

VS Code's HTML/JS support means IntelliSense, formatting, and linting all work normally. The only DenchClaw-specific API is Dench.db.query() — everything else is standard web development.

Keeping Your Workspace in Git#

Your DenchClaw workspace is just files. Version-controlling it is straightforward:

cd ~/.openclaw-dench/workspace
git init

A sensible .gitignore:

# .gitignore
workspace.duckdb        # too large, use backups instead
workspace.duckdb.wal
.openclaw/logs/
memory/                 # personal notes — probably don't want in git
config.json             # contains API tokens

What you do want in version control:

objects/*.object.yaml — your schema definitions
skills/ — custom skills you've written
apps/ — Dench apps
docs/ — workspace documentation

VS Code's GitLens extension makes this especially nice — you can see when a skill file was last changed and by whom.

Practical Daily Workflow#

Here's how this looks in practice during a workday:

Open VS Code with the multi-root workspace (project + DenchClaw)
Start gateway via VS Code task or terminal: openclaw gateway start
Check status in the integrated terminal: openclaw message "Any urgent follow-ups today?"
Code your project normally in Cursor or the project folder
Update CRM from the terminal as needed: openclaw message "Mark the Stripe integration ticket as done for Acme Corp"
Review data using the DuckDB extension — open the database, run a query, check numbers

The terminal in VS Code handles the CLI commands. The file explorer handles schema and skill edits. The DuckDB extension handles data exploration. All without leaving the editor.

Ready to try DenchClaw? Install in one command: npx denchclaw. Full setup guide →