About Headless Code Editor MCP Server
Headless Code Editor MCP Server is an LSP-based editor for AI-assisted code changes through managed editing sessions. It currently focuses on TypeScript, JavaScript, and React analysis, with file access limited to allowed directories.
Key features
- 01LSP language intelligence
- 02Restricted-directory file access
- 03Session-based editing and state
- 04TypeScript and JavaScript analysis
- 05React component detection and editing
- 06Format-preserving edits
Use cases
- 01Edit code in an allowed workspace
- 02Analyze TypeScript or JavaScript files
- 03Inspect and modify React components
- 04Validate the current edited code
MCP support
As an MCP server, it exposes tools to create editing sessions, edit code, validate state, and close sessions.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMEHeadless Code Editor MCP Server
A robust, language-agnostic headless code editor that leverages the Language Server Protocol (LSP) for code intelligence and the Model Context Protocol (MCP) for AI-assisted code manipulation.
Features
- LSP integration for language intelligence
- Secure file system operations with strict access controls
- Session-based editing with state management
- TypeScript/JavaScript language support with in-depth analysis
- React component detection and manipulation
- Format-preserving edit operations
- Comprehensive logging and error tracking
Installation
# Install dependencies
npm install
# Build the project
npm run build
# Run tests
npm test
Usage
Starting the Server
# Start with allowed directory
node build/index.js /path/to/workspace
# Start with multiple allowed directories
node build/index.js /path/to/workspace1 /path/to/workspace2
MCP Tools
start_session: Create a new editing sessionedit_code: Apply edits to codevalidate_code: Validate current code stateclose_session: Clean up and close a session
Example Integration
const client = new Client(
{ name: "example-client", version: "1.0.0" },
{ capabilities: {} }
);
// Connect to server
const transport = new StdioClientTransport({
command: "node",
args: ["./build/index.js", "/workspace"]
});
await client.connect(transport);
// Start session
const result = await client.request({
method: "tools/call",
params: {
name: "start_session",
arguments: {
filePath: "/workspace/example.ts",
languageId: "typescript"
}
}
});
Architecture
- LSP Manager: Coordinates language server lifecycle and communication
- Document Manager: Handles document state and synchronization
- Session Manager: Manages editing sessions and state
- Edit Operation Manager: Processes and validates code edits
- File System Manager: Provides secure file system access
Security Features
- Path validation and normalization
- Access control through allowed directories
- Input sanitization
- File system operation boundaries
- Symlink security checks
Incomplete Tasks
Language Support
- Python language server integration
- Java language server integration
- Support for additional language servers
Framework Support
- Component state analysis
- Hook dependencies tracking
- Automatic import management
- Type-aware refactoring
Edit Operations
- Multi-file edit operations
- Complex refactoring operations
- Workspace-wide changes
- Conflict resolution system
Performance
- Operation batching
- Incremental update optimization
- Memory usage optimization
- Large file handling improvements
Testing
- End-to-end test suite
- Performance benchmarks
- Load testing
- Cross-platform testing
Documentation
- API documentation
- Integration guides
- Deployment guide
- Troubleshooting guide
Infrastructure
- Remote server support
- Configuration system
- Plugin architecture
- Workspace indexing
Monitoring
- Performance metrics
- Operation analytics
- Health monitoring
- Resource usage tracking
Contributing
- Fork the repository
- Create your feature branch
- Add tests for new functionality
- Ensure all tests pass
- Submit a pull request
Documentation
Architecture and Design
- Core Architecture: Foundational architecture and system design
- LSP Smart Editor Architecture: Language Server Protocol integration details
- Framework Integration Guide: Framework-specific support and integration patterns
- Language Server Integration: Language server implementation and configuration
- MVP Implementation Plan: Development roadmap and implementation stages
Our documentation covers:
- System architecture and design principles
- Component interactions and dependencies
- Framework integration patterns
- Language server specifications
- Implementation guidelines and best practices
- Security considerations
- Performance optimization strategies
For additional documentation needs, see our Incomplete Tasks section.
License
MIT
Development Status
Currently in alpha stage (v0.0.10) with basic TypeScript/JavaScript support and React component analysis. See the Incomplete Tasks section for planned features.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.