| name | bluefish-mcp-connector |
| description | MCP connector for Bluefish web development editor – enables AI-assisted web development, template management, and multi-file editing through Claude |
| license | GPL |
| tags | ["dev","editor","mcp","bluefish","web"] |
| difficulty | beginner |
| time_to_master | 4-8 weeks |
| version | 1.0.0 |
Bluefish MCP Connector
Overview
This skill enables Claude to interact with Bluefish through the Model Context Protocol (MCP). It provides a bridge between Claude's AI capabilities and Bluefish's CLI/Plugin, allowing natural language control of Bluefish operations, intelligent automation, and AI-powered assistance for Bluefish workflows.
When to Use This Skill
- HTML/CSS/JS template generation
- Multi-file search and replace with AI patterns
- Site project management and file organization
- Code validation and W3C compliance checking
- Snippet library management
Architecture
┌─────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ Claude │────▶│ MCP Server │────▶│ Bluefish │
│ (Client) │◀────│ (TypeScript) │◀────│ (CLI/Plugin )│
└─────────────┘ └─────────────────┘ └──────────────────┘
Core Concepts
MCP Server Setup
The connector implements an MCP server that exposes Bluefish operations as tools Claude can invoke. The server translates natural language intentions into CLI/Plugin calls.
Key Endpoints/Interfaces
bluefish-cli open, project-manage, validate, snippet-insert
Implementation
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const server = new McpServer({
name: "bluefish-mcp-connector",
version: "1.0.0",
});
server.tool(
"list_resources",
"List and query Bluefish resources with optional filters",
{
query: z.string().optional().describe("Search query or filter"),
limit: z.number().optional().describe("Max results to return"),
},
async ({ query, limit }) => {
const response = await fetch(`${BASE_URL}bluefish-cli open`, {
headers: { "Authorization": `Bearer ${API_KEY}` },
});
const data = await response.json();
return {
: [{ : , : .(data, , ) }],
};
}
);
server.(
,
,
{
: z.().(),
: z.({}).().().(),
},
({ name, config }) => {
response = (, {
: ,
: {
: ,
: ,
},
: .({ name, ...config }),
});
data = response.();
{
: [{ : , : }],
};
}
);
server.(
,
,
{
: z.().(),
: z.().().(),
},
({ , timeframe }) => {
response = (, {
: { : },
});
data = response.();
{
: [{ : , : .(data, , ) }],
};
}
);
transport = ();
server.(transport);
Claude Desktop Configuration
{
"mcpServers": {
"bluefish-mcp-connector": {
"command": "node",
"args": ["path/to/bluefish-mcp-connector/index.js"],
"env": {
"BLUEFISH_API_KEY": "your-api-key",
"BLUEFISH_BASE_URL": "https://your-instance-url"
}
}
}
}
Best Practices
- Authentication: Store API keys securely using environment variables; never hardcode credentials
- Rate Limiting: Implement request throttling to respect Bluefish API rate limits
- Error Handling: Provide clear, actionable error messages for common failure scenarios
- Pagination: Handle paginated responses for large datasets efficiently
- Caching: Cache frequently accessed read-only data to reduce API calls
- Security: Validate all inputs before passing to the Bluefish API; sanitize outputs
- Logging: Log all API interactions for debugging and audit purposes
Example Prompts
"Create a responsive HTML5 template with semantic markup and CSS grid layout"
Security Considerations
- All API credentials must be stored as environment variables
- Implement input validation and sanitization for all tool parameters
- Use HTTPS for all API communications
- Follow the principle of least privilege for API token permissions
- Audit log all write operations for compliance tracking
Resources
Changelog
| Version | Date | Changes |
|---|
| 1.0.0 | 2026-04-01 | Initial MCP connector skill |
Part of SkillGalaxy - 10,000+ comprehensive skills for AI-assisted development.
