🛠️ OpenClaw Local Dev Studio

Complete local development environment for OpenClaw skills - Test, debug, and iterate without deploying.

🎯 Why This Exists

Deploying skills to production just to test them is slow and risky. OpenClaw Local Dev Studio lets you:

• Test skills locally without deploying
• Mock OpenClaw APIs and tool responses
• Hot reload on file changes
• Debug with breakpoints and logs
• Simulate different runtime environments

🚀 Quick Start

Install globally

npm install -g openclaw-local-dev-studio

Create a new skill

openclaw-dev init my-skill
cd my-skill

Start dev server

openclaw-dev start

This launches:

• Local OpenClaw runtime on http://localhost:3000
• Hot reload file watcher
• Mock API server for tool calls
• WebSocket for real-time logs

📖 Commands

openclaw-dev init <name>

Create a new skill project with boilerplate:

openclaw-dev init weather-bot

Generates:

weather-bot/
├── SKILL.md          # Skill documentation
├── index.ts          # Skill entry point
├── test/             # Test files
├── .env.local        # Local config
└── openclaw.config.js # Dev config

openclaw-dev start [options]

Start the local development server:

openclaw-dev start --port 3000 --hot-reload

Options:

• --port <n> - Server port (default: 3000)
• --hot-reload - Enable hot reload (default: true)
• --mock-tools - Use mock tool responses (default: true)
• --debug - Enable debug logging

openclaw-dev test [pattern]

Run tests for your skill:

openclaw-dev test                # Run all tests
openclaw-dev test weather        # Run tests matching "weather"

openclaw-dev simulate <message>

Simulate an incoming message:

openclaw-dev simulate "What's the weather today?"

openclaw-dev mock <tool> [response]

Configure mock tool responses:

openclaw-dev mock web_fetch '{"content": "Hello world"}'

openclaw-dev deploy

Deploy skill to production OpenClaw:

openclaw-dev deploy --env production

🔧 Configuration

openclaw.config.js

module.exports = {
  // Skill metadata
  skill: {
    name: 'weather-bot',
    version: '1.0.0',
    description: 'Weather information skill',
  },

  // Development server
  dev: {
    port: 3000,
    hotReload: true,
    mockTools: true,
  },

  // Mock tool responses
  mocks: {
    web_fetch: async ({ url }) => ({
      content: `Mocked content for ${url}`,
    }),
    exec: async ({ command }) => ({
      stdout: `Mocked output for: ${command}`,
      stderr: '',
      exitCode: 0,
    }),
  },

  // Test configuration
  test: {
    timeout: 5000,
    setupFiles: ['./test/setup.ts'],
  },
};

🎓 Example Skill

// index.ts
import { SkillHandler, ToolContext } from 'openclaw-sdk';

export const handler: SkillHandler = async (input, tools) => {
  // Fetch data
  const data = await tools.web_fetch({
    url: 'https://api.weather.com/current',
  });

  // Process
  const summary = processWeather(data);

  // Respond
  await tools.message({
    action: 'send',
    target: input.user,
    message: summary,
  });

  return { success: true };
};

function processWeather(data: any): string {
  // Your logic here
  return `Temperature: ${data.temp}°C`;
}

Testing

// test/weather.test.ts
import { handler } from '../index';
import { createMockTools } from 'openclaw-local-dev-studio';

describe('Weather Skill', () => {
  it('fetches and formats weather', async () => {
    const tools = createMockTools({
      web_fetch: async () => ({
        content: '{"temp": 22, "conditions": "sunny"}',
      }),
    });

    const result = await handler(
      { user: 'test-user', message: 'weather' },
      tools
    );

    expect(result.success).toBe(true);
  });
});

🎨 VSCode Extension (Bonus)

Install the companion VSCode extension for:

• Syntax highlighting for SKILL.md
• IntelliSense for OpenClaw APIs
• Debugging integration
• Quick commands in command palette

code --install-extension openclaw.local-dev-studio

🏗️ Architecture

┌─────────────────────────────────────┐
│   Your Skill Code (TypeScript)     │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│  OpenClaw Local Runtime             │
│  - Tool API Mocking                 │
│  - Context Simulation               │
│  - State Management                 │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│  Dev Server                         │
│  - Hot Reload (chokidar)            │
│  - WebSocket Logs                   │
│  - HTTP API                         │
└─────────────────────────────────────┘

📦 Project Structure

openclaw-local-dev-studio/
├── bin/
│   └── cli.js              # CLI entry point
├── src/
│   ├── server.ts           # Dev server
│   ├── runtime.ts          # OpenClaw runtime mock
│   ├── tools/              # Mock tool implementations
│   │   ├── web_fetch.ts
│   │   ├── exec.ts
│   │   └── message.ts
│   ├── watcher.ts          # File watcher (hot reload)
│   ├── simulator.ts        # Message simulator
│   └── deploy.ts           # Deployment helper
└── templates/
    └── skill/              # Skill boilerplate templates

🔌 Integration with OpenClaw

Deploy to Production

Once tested locally, deploy with:

openclaw-dev deploy

This:

1. Runs tests
2. Builds production bundle
3. Validates SKILL.md
4. Pushes to your OpenClaw instance
5. Verifies deployment

Environment Variables

# .env.local
OPENCLAW_API_KEY=your-api-key
OPENCLAW_GATEWAY_URL=https://your-gateway.com
SKILL_DEBUG=true

🤝 Contributing

Contributions welcome! Areas for improvement:

• [ ] More mock tools
• [ ] Visual debugger UI
• [ ] Skill marketplace integration
• [ ] Multi-skill testing
• [ ] Performance profiling

📄 License

MIT © Alex - Built for rapid OpenClaw development

🔗 Links

• OpenClaw Documentation
• Skill Development Guide
• VSCode Extension

Stop deploying to test. Start developing locally. 🚀