Pocket Stack

Appearance

开发环境配置 ​

本教程以Trae为例。

MCP安装 ​

shadcn-ui MCP ​

为了正确选用前端UI组件，需要安装shadcn-ui MCP。

  1. 点击Trae右上角的设置按钮
  2. 点击MCP选项卡
  3. 选择从市场添加，搜索shadcn-ui
  4. 点击安装按钮

或者，选择手动添加：

json
{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ],
      "env": {},
      "fromGalleryId": "byted-mcp.shadcn-ui",
      "disabled": false
    }
  }
}

Pockebase MCP ​

访问：https://github.com/citywill/pocketbase-mcp/releases/tag/latest

下载和你系统相符的版本。解压两个文件并存放到特定位置，例如/my-path/pocketbase-mcp。

手动添加MCP：

json
{
  "mcpServers": {
    "pocketbase": {
      "command": "node",
      "args": [
        "/my-path/pocketbase-mcp/index.js"
      ],
      "env": {
        "POCKETBASE_URL": "http://localhost:8090",
        "POCKETBASE_ADMIN_EMAIL": "admin@example.com",
        "POCKETBASE_ADMIN_PASSWORD": "admin12345"
      }
    }
  }
}

详情请见：https://github.com/citywill/pocketbase-mcp

Chrome DevTools MCP ​

在MCP市场搜索安装chrome-devtools-mcp，或者手动添加：

json
{
  "mcpServers": {
    "Chrome DevTools MCP": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ],
      "env": {}
    }
  }
}

创建智能体 ​

Trae支持创建多个智能体，每个智能体可以定义各自的MCP和提示词。建议为每个PocketStack项目创建智能体，并选择以上MCP。