Editor Integrations

Complete guide to integrating Lovelace CLI with code editors

Overview

Lovelace CLI integrates with popular code editors through the Agent Client Protocol (ACP), providing seamless AI-powered development assistance directly in your editing environment.

Supported Editors

VS Code

Official Extension: Lovelace for VS Code

Installation

bash

# From VS Code marketplace
code --install-extension lovelace-ai.lovelace-vscode

# From command line
lovelace extensions install vscode

Features

AI Chat Panel: Integrated chat with workspace context
Inline Code Actions: Quick fixes and suggestions
Agent Task Runner: Execute analysis and generation tasks
Workspace Synchronization: Auto-sync with Lovelace workspaces
Session Management: Access previous conversations

Configuration

json

// settings.json
{
  "lovelace.enabled": true,
  "lovelace.acp.autoStart": true,
  "lovelace.acp.port": 3000,
  "lovelace.workspace.autoDetect": true,
  "lovelace.chat.provider": "anthropic",
  "lovelace.chat.showInSidebar": true,
  "lovelace.analysis.autoRun": false,
  "lovelace.agents.enableCodeActions": true
}

Keyboard Shortcuts

Action	Shortcut	Description
Open Chat	`Cmd+Shift+L`	Open AI chat panel
Analyze File	`Cmd+Alt+A`	Analyze current file
Run Agent	`Cmd+Alt+R`	Run agent on selection
Quick Chat	`Cmd+K Cmd+L`	Quick chat input

Zed Editor

Official Package: Lovelace Zed Extension

Installation

bash

# From Zed extensions
zed: extensions install lovelace-ai

# Enable in settings

Configuration

json

// settings.json
{
  "languages": {
    "TypeScript": {
      "language_servers": ["typescript-language-server", "lovelace-acp"]
    },
    "Python": {
      "language_servers": ["pylsp", "lovelace-acp"]
    }
  },
  "lovelace": {
    "enabled": true,
    "acp_port": 3000,
    "workspace_auto_detect": true,
    "chat_panel": "right",
    "keybindings": {
      "chat_toggle": "cmd-shift-l",
      "analyze_file": "cmd-alt-a",
      "quick_chat": "cmd-k cmd-l"
    }
  }
}

Features

Language Server Integration: Native LSP-style integration
Inline Diagnostics: AI-powered code analysis
Chat Panel: Dedicated chat interface
Command Palette: Quick access to Lovelace commands

Neovim

Plugin: lovelace.nvim

Installation

Using lazy.nvim:

lua

{
  "lovelace-ai/lovelace.nvim",
  dependencies = {
    "nvim-lua/plenary.nvim",
    "MunifTanjim/nui.nvim",
  },
  config = function()
    require("lovelace").setup({
      acp = {
        enabled = true,
        port = 3000,
        auto_start = true,
      },
      chat = {
        provider = "anthropic",
        position = "right",
        width = 50,
      },
      analysis = {
        auto_run = false,
        show_diagnostics = true,
      },
    })
  end,
}

Key Mappings

lua

-- Default key mappings
vim.keymap.set("n", "<leader>lc", "<cmd>LovelaceChat<cr>", { desc = "Open Lovelace Chat" })
vim.keymap.set("n", "<leader>la", "<cmd>LovelaceAnalyze<cr>", { desc = "Analyze Current File" })
vim.keymap.set("v", "<leader>lr", "<cmd>LovelaceRunAgent<cr>", { desc = "Run Agent on Selection" })
vim.keymap.set("n", "<leader>ls", "<cmd>LovelaceSessions<cr>", { desc = "Browse Sessions" })

Commands

:LovelaceChat - Open chat window
:LovelaceAnalyze - Analyze current file
:LovelaceRunAgent - Run agent on selection
:LovelaceStatus - Show connection status
:LovelaceSessions - Browse chat sessions

Emacs

Package: lovelace-mode

Installation

Using use-package:

elisp

(use-package lovelace-mode
  :ensure t
  :config
  (setq lovelace-acp-port 3000)
  (setq lovelace-workspace-auto-detect t)
  (setq lovelace-chat-provider "anthropic")
  (global-lovelace-mode 1))

Key Bindings

elisp

;; Default key bindings
(define-key lovelace-mode-map (kbd "C-c l c") 'lovelace-chat)
(define-key lovelace-mode-map (kbd "C-c l a") 'lovelace-analyze-file)
(define-key lovelace-mode-map (kbd "C-c l r") 'lovelace-run-agent)
(define-key lovelace-mode-map (kbd "C-c l s") 'lovelace-sessions)

Sublime Text

Package: Lovelace

Installation

Install via Package Control: Cmd+Shift+P → "Package Control: Install Package" → "Lovelace"
Or clone manually:

bash

cd ~/Library/Application\ Support/Sublime\ Text/Packages/
git clone https://github.com/lovelace-ai/sublime-lovelace.git Lovelace

Settings

json

// Lovelace.sublime-settings
{
  "acp_enabled": true,
  "acp_port": 3000,
  "acp_auto_start": true,
  "workspace_auto_detect": true,
  "chat_provider": "anthropic",
  "show_status_bar": true
}

Integration Setup

Prerequisites

Install Lovelace CLI:
bash
```
npm install -g @lovelace-ai/cli
```
Authenticate:
bash
```
lovelace auth signin
```
Initialize workspace:
bash
```
cd your-project
lovelace workspace init
```

ACP Server Setup

Start the ACP server for editor communication:

bash

# Start ACP server
lovelace acp start

# Start with custom port
lovelace acp start --port 3001

# Start with specific workspace
lovelace acp start --workspace my-project

Editor-Specific Setup

VS Code Setup

Install extension from marketplace
Configure settings in settings.json
Reload VS Code
Extension automatically connects to ACP server

Zed Setup

Enable in extensions panel
Add configuration to settings.json
Restart Zed
Check status in command palette

Neovim Setup

Install plugin with package manager
Add configuration to init.lua
Restart Neovim
Run :LovelaceStatus to verify connection

Common Features Across Editors

AI Chat Integration

All editors provide integrated chat with:

Workspace Context: Automatic project understanding
Code Selection: Send selected code for analysis
Session Persistence: Resume previous conversations
Multi-provider Support: Choose AI provider

Code Analysis

Integrated analysis features:

File Analysis: Analyze current file
Project Analysis: Full project insights
Diff Analysis: Analyze recent changes
Security Scanning: Identify potential issues

Agent Execution

Run agent workers directly from editor:

Analysis Workers: Code quality, architecture review
Generation Workers: Tests, documentation, refactoring
Background Execution: Long-running tasks don't block editor

Workspace Management

Seamless workspace integration:

Auto-detection: Automatically detect Lovelace projects
Multi-workspace: Switch between workspaces
Synchronization: Keep editor and CLI in sync

Troubleshooting

Connection Issues

ACP Server Not Running:

bash

# Check server status
lovelace acp status

# Start server if stopped
lovelace acp start

# Check server logs
lovelace acp logs

Port Conflicts:

bash

# Find process using port
lsof -i :3000

# Start on different port
lovelace acp start --port 3001

# Update editor configuration

Extension Not Loading:

Check extension is enabled
Verify ACP server is running
Check editor logs for errors
Restart editor after configuration changes

Authentication Issues

Token Expired:

bash

# Check auth status
lovelace auth status

# Refresh tokens
lovelace auth refresh

# Re-authenticate if needed
lovelace auth signin

Workspace Access:

bash

# List available workspaces
lovelace workspace list

# Switch to correct workspace
lovelace workspace switch project-name

Performance Issues

Slow Responses:

Check agent daemon status: lovelace agents daemon status
Reduce analysis scope in editor settings
Increase ACP timeout settings

Memory Usage:

Monitor ACP server memory: ps aux | grep "lovelace acp"
Restart ACP server: lovelace acp restart
Adjust max sessions: lovelace config set acp.max_sessions 5

Custom Editor Integration

Building Custom ACP Client

For editors not yet supported, implement ACP client:

javascript

// Example: Basic ACP client
class LovelaceACPClient {
  constructor(port = 3000) {
    this.port = port;
    this.requestId = 0;
  }

  async sendRequest(method, params = {}) {
    const request = {
      jsonrpc: "2.0",
      id: ++this.requestId,
      method,
      params
    };

    const response = await fetch(`http://localhost:${this.port}/jsonrpc`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request)
    });

    return await response.json();
  }

  async chatMessage(message, sessionId = null) {
    return await this.sendRequest('chat/message', {
      message,
      session_id: sessionId,
      include_context: true
    });
  }

  async analyzeFile(filePath) {
    return await this.sendRequest('analysis/file', {
      file_path: filePath,
      include_suggestions: true
    });
  }
}

Integration Guidelines

Use ACP Protocol: Implement standard JSON-RPC communication
Handle Errors: Implement proper error handling and user feedback
Manage Sessions: Maintain chat session state
Provide UI: Create intuitive interface for Lovelace features
Follow Patterns: Use established patterns from existing integrations

Best Practices

Development Workflow

Start ACP on Project Open: Automatically start ACP when opening Lovelace projects
Context Awareness: Use workspace context for relevant AI responses
Incremental Analysis: Analyze changes as you work, not entire project
Session Management: Organize conversations by feature or task

Performance Optimization

Lazy Loading: Load Lovelace features only when needed
Caching: Cache analysis results and workspace data
Background Processing: Run long tasks in background
Resource Limits: Set appropriate memory and CPU limits

Security Considerations

Token Management: Securely store and refresh authentication tokens
Data Privacy: Respect user privacy settings
Network Security: Use HTTPS for all communications
Audit Logging: Log important actions for security review

See Also:

Editor Integration Guide - Detailed ACP protocol documentation
ACP Reference - Complete protocol specification
Troubleshooting - Common issues and solutions