localhost:3100 — Inside the DenchClaw Interface

Open your browser and type localhost:3100. That URL is the front door to your DenchClaw workspace — a fully-featured AI CRM interface running entirely on your machine.

This post is a complete tour of what's inside that URL: every panel, every view, every interaction, and how to make it your own.

The Dock-Like Sidebar#

The left sidebar is your navigation hub. It contains:

Object List: Each CRM object you've created (People, Companies, Deals, etc.) has its own sidebar icon. Click to open the object's view. Objects show a small count badge with the number of entries.

Apps Section: Custom .dench.app applications appear in the sidebar with their configured icons. Any app you build with the App Builder shows up here.

Settings: Gateway configuration, channel setup, profile management.

Chat: The AI agent chat, always accessible in the bottom-left corner.

The sidebar is collapsible for more screen real estate. On smaller screens, it hides automatically.

CRM Object Views#

Clicking any object in the sidebar opens its main view. Every object supports six view types, switchable via tabs at the top:

Table View#

The default view. Columns represent fields, rows represent entries. Features:

• Sortable columns: Click any column header to sort
• Column resize: Drag column borders to resize
• Column hide/show: Right-click a header to toggle columns
• Inline editing: Click any cell to edit in place
• Multi-select: Shift+click to select multiple rows for bulk actions
• Row actions: Hover a row to see quick action buttons

The table uses virtual rendering — you can have 100,000 rows and it scrolls smoothly.

Kanban View#

Card-based view grouped by an enum field (typically Status or Stage). Features:

• Drag and drop: Move cards between columns
• Column counts: Each column shows the count and sum of numeric fields
• Compact cards: Shows primary fields only; click to expand
• Add card: "+ Add" button at the bottom of each column
• Collapsed columns: Click column header to collapse

Kanban is ideal for sales pipelines, content calendars, and any workflow with discrete stages.

Calendar View#

Entries plotted on a calendar based on a date field. Features:

• Month/Week/Day views: Toggle between granularities
• Drag to reschedule: Drag entries to different dates
• Color coding: Color entries by enum field (e.g., status)
• Create from calendar: Click a date to create a new entry with that date pre-filled

Timeline View#

Gantt-chart style view for entries with both start and end dates. Features:

• Zoom levels: Day, week, month, quarter
• Group by field: Stack entries by category
• Dependency lines: Show relationships between entries
• Drag to extend: Drag entry edges to extend dates

Gallery View#

Card-based visual layout — like a mood board or product grid. Useful when entries have image URLs or rich visual data.

List View#

Compact vertical list, like a todo list. One line per entry. Good for tasks and notes.

Saved Views#

Below the view type switcher, you'll see saved views — filtered and sorted snapshots of your data. Examples:

• "Stale Leads" (contacts with Status=Lead, sorted by Last Contacted ascending)
• "Deals Closing This Month" (deals with Close Date in current month)
• "SF Companies" (companies with City = San Francisco)

Create a saved view by:

1. Setting your filters and sorts
2. Clicking "Save View"
3. Naming it

Or ask the agent:

"Save the current view as 'High Priority Deals' — deals over $50k sorted by close date"

Views are saved in the .object.yaml file and persist across sessions.

The Entry Detail Page#

Clicking any row opens the entry detail page — the individual page for that contact, company, deal, etc.

Fields Panel: All field values, editable in place. Relation fields show linked entries with a click-through link.

Document Area: Each entry has its own markdown document. This is freeform space for notes, meeting summaries, proposals, background research. The agent can write to this document on request.

Activity Feed: A chronological log of all changes to this entry — who changed what, when. Agent actions are attributed to the agent.

Related Entries: If this entry has relations, linked entries appear in cards. Click to navigate.

Action Buttons: Any Action fields defined on the object appear as buttons in the top-right. Click to run the associated script.

The AI Chat Panel#

The chat panel is accessible from any view — bottom-left corner, or keyboard shortcut Cmd+K (Mac) / Ctrl+K (Windows/Linux).

The chat panel gives you access to the DenchClaw agent. You can:

• Query your CRM in natural language
• Create and update entries
• Ask for analysis and reports
• Build apps
• Import data
• Configure settings
• Anything the agent can do

The chat panel shows:

• Message history: Full conversation history for the current session
• Streaming responses: Responses appear token-by-token as they're generated
• Tool call indicators: When the agent runs a tool (SQL query, file read, browser action), it shows visually in the chat
• Report cards: When the agent generates charts or tables, they appear inline in the chat

Reports and Dashboards#

When you ask the agent for analytics, it generates structured reports that render as interactive charts:

"Show me deal pipeline by stage as a bar chart"

The agent runs a SQL query, generates a report.json, and the UI renders it as a Chart.js visualization inline in the chat. You can:

• Pin to sidebar: Reports can be saved to the sidebar as persistent dashboards
• Embed in object views: Add a report as a widget to any object view
• Full screen: Click to expand any report to full screen
• Export: Download as PNG or the underlying data as CSV

The App Platform#

The "Apps" section in the sidebar shows custom .dench.app applications. These are self-contained web applications with full DuckDB access via the window.dench bridge.

Built-in apps include the Pipeline Dashboard (installed by default). You can add more by asking the agent to build them, or by installing them from the DenchClaw skills store.

Each app opens in a full-page tab. Apps can be:

• Full page: The entire main content area
• Widget: A compact card in a dashboard grid

Settings and Configuration#

The Settings page (gear icon in sidebar) lets you:

Profile: View your OpenClaw profile configuration. Edit the agent system prompt. View workspace info.

Channels: Connect Telegram, WhatsApp, Discord, and other messaging channels. Each has a setup wizard.

Database: View database stats, run migrations, export data.

Skills: Browse installed skills, enable/disable skills, link to clawhub.ai to install new ones.

Appearance: Toggle dark/light mode. Set sidebar width. Configure compact vs. expanded view.

API Keys: Add API keys for AI models, external services, integrations.

PWA: Add to Dock#

Add DenchClaw to your Mac Dock as a PWA:

1. Open localhost:3100 in Chrome
2. Click the three-dot menu (⋮)
3. Select "Install DenchClaw..." (or "Save and share" → "Install page as app")
4. Click "Install"

DenchClaw appears as a standalone app in your Dock and Applications folder. It opens without browser chrome (no tabs, no address bar) — just the CRM interface.

Keyboard shortcut to open: Cmd+Space → type "DenchClaw" → Enter

Keyboard Shortcuts#

Frequently Asked Questions#

Why localhost:3100 and not 3000?#

Port 3000 is commonly used by development servers (React, Next.js, etc.). DenchClaw uses 3100 to avoid conflicts during development.

Can I use DenchClaw on my phone?#

Yes, via your phone's browser at http://[your-mac-local-ip]:3100. For better mobile access, use Telegram/WhatsApp integration — you can query your CRM from any messaging app.

Is the interface customizable?#

Yes. The sidebar order can be rearranged. Object views can be customized. Custom apps can replace or extend any view. Dark mode is available.

Can I open multiple objects in different windows?#

Each browser tab can have a different object view open. The PWA mode supports multiple windows.

Does the interface work offline?#

The UI loads and cached data is viewable offline. Real-time data changes and AI chat require the gateway to be running (which works locally — no internet required for data operations).

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