open-index/open-npm huggingface dataset:
npm package: @minhnguyen4396/react-board-map
Description: A React BoardMap component with zoom, pan, and touch support
Latest version: 19.0.3

# React Board Map

A React BoardMap component with zoom, pan, and touch support.

## Usage

```tsx
import {
  BoardMap,
  setting,
  SettingProps,
} from "@minhnguyen4396/react-board-map"

function BoardMap({ children }: { children: React.ReactNode }) {
  const settingRef = useRef<SettingProps>({
    ...setting,
    zoomMin: 0.5,
    zoomMax: 1.4,
    zoomLevel: [0.5, 0.8, 1.1, 1.4],
  })

  return (
    <BoardMap.Root
      settingRef={settingRef}
      bgImageUrl="https://background.jpg"
      className=""
    >
      <BoardMap.Board className="">
        <BoardMap.Grid>
          {children}
        </BoardMap.Grid>
      </BoardMap.Board>
    </BoardMap.Root>
  )
}
```

## API

### Components

- `BoardMap.Root` - Main container component
- `BoardMap.Board` - Interactive board area
- `BoardMap.Grid` - Show items displayed on the board area
- `BoardMapProvider` - React context provider

### Hooks

- `useBoardMap` - Custom hook for BoardMap functionality

### Types

- `SettingProps` - Setting configuration interface

### Default setting

```json
{
  "x": 0,
  "y": 0,
  "actualX": 0,
  "actualY": 0,
  "zoom": 0.55,
  "width": -1,
  "height": -1,
  "centerX": -1,
  "centerY": -1,
  "center": { "x": 0, "y": 0 },
  "deltaX": 0,
  "deltaY": 0,
  "boardWidth": -1,
  "boardHeight": -1,
  "zoomMin": 0.5,
  "zoomMax": 1.1,
  "mobileDefaultZoom": 0.5,
  "desktopDefaultZoom": 0.55,
  "limitX": [0, 0],
  "limitY": [0, 0],
  "desktopOffsetHeight": 0,
  "mobileOffsetHeight": 0,
  "zoomLevel": [0.55, 0.8, 1.1],
  "zoomLevel_mobile": [0.5, 0.5, 0.5]
}
```

## License

MIT
npm package: @minhphongvn/fui-mcp
Description: MCP server for FUI low-code system - manage projects and modules via AI
Author: minhphongvn
Latest version: 1.0.5

# FUI MCP Server

MCP server for FUI low-code system - manage projects and modules via AI.

## Quick Start

No installation required! You can run this MCP server directly using `npx`:

```bash
npx @minhphongvn/fui-mcp
```

## Configuration

### 1. Claude Desktop
Add this to your `%APPDATA%\Claude\claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "fui-mcp": {
      "command": "npx",
      "args": ["-y", "@minhphongvn/fui-mcp"],
      "env": {
        "FUI_API_TOKEN": "YOUR_FUI_API_KEY_HERE"
      }
    }
  }
}
```

### 2. Cursor
Go to **Cursor Settings** > **Features** > **MCP Servers** > **Add New**:

- **Name**: `fui-mcp`
- **Type**: `command`
- **Command**: `npx -y @minhphongvn/fui-mcp`
- **Environment Variables**:
  - `FUI_API_TOKEN` = `your_token_from_fui.vn`

### 3. Chrome Extension Integration
To use this MCP server from a Chrome Extension, run it in SSE mode:

```bash
npx @minhphongvn/fui-mcp --sse
# Server listening on http://localhost:3001
```

Or specify a custom port:
```bash
npx @minhphongvn/fui-mcp --sse --port 8080
```

In your Extension (background script):
```javascript
const eventSource = new EventSource('http://localhost:3001/sse');
eventSource.onmessage = (event) => {
  console.log('MCP Message:', JSON.parse(event.data));
};
// Use POST /messages to send requests
```

### Prerequisites
- [Node.js](https://nodejs.org/) (v18 or higher)
- FUI API Token (Get it from [fui.vn](https://fui.vn/))



## Tools

| Tool | Description |
|------|-------------|
| `create_module` | Create a new module (HTML page) in a project |
| `get_module` | Get module content (HTML, CSS, Vue components) |

## Resources

| URI | Description |
|-----|-------------|
| `lowcode://modules/{projectId}/{moduleId}` | Read module content |

## Prompts

| Prompt | Description |
|--------|-------------|
| `generate-vue-component` | Generate Vue 2 component template |