# D3 MCP Server

A TypeScript Express-based Model Context Protocol (MCP) server for D3.js information. This server provides D3 visualization documentation, chart recommendations, and code generation through the MCP protocol.

## Features

- 📊 **D3 Resources**: Access documentation and examples from D3 sources
- 🔍 **Chart Recommendation**: Get recommendations for the right chart type based on your data and goals
- 💻 **Code Generation**: Generate D3 code examples for various chart types
- 🔌 **MCP Integration**: Connect AI tools directly to D3 knowledge

## Prerequisites

- Node.js 16.x or higher
- npm or yarn

## Installation

1. Clone the repository
```bash
git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server
```

2. Install dependencies
```bash
npm install
```

3. Build the project
```bash
npm run build
```

## Usage

1. Start the server
```bash
npm start
```

2. The server will be running at http://localhost:3000 (or the PORT specified in your .env file)

3. Connect to the MCP endpoint at http://localhost:3000/mcp-sse using an MCP client

## Development

For development with hot reloading:
```bash
npm run dev
```

## Available MCP Resources and Tools

### Resources

- **d3-docs://{topic}**: Access D3 documentation on specific topics
- **d3-charts://{chartType}**: Get information about specific D3 chart types

### Tools

- **generate-d3-chart**: Generate D3 code for different chart types
  - Parameters: chartType, dataFormat, features (optional)
  
- **recommend-chart**: Get recommendations for D3 chart types based on your data
  - Parameters: dataDescription, purpose

## Examples

### MCP Client Connection Example

```typescript
import { McpClient } from "@modelcontextprotocol/sdk/client/mcp.js";
import { SseClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

// Create an MCP client
const client = new McpClient();

// Connect to the D3 MCP server
const transport = new SseClientTransport("http://localhost:3000/sse");
await client.connect(transport);

// Get chart recommendations
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "Monthly sales data for 5 product categories over 2 years",
  purpose: "Show trends and compare performance across categories"
});

console.log(result.content[0].text);
```

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.