关键词

Web开发模板用户认证数据库管理PWA自动化测试设计系统集成

项目简介

Astro Basics Website 是一个功能全面的Astro网站模板，旨在展示现代Web开发实践。它包含用户认证、数据库集成、内容管理、PWA功能和企业级安全特性。除了作为功能强大的Web应用，它还集成了Model Context Protocol (MCP) 服务器功能，允许大型语言模型(LLM)客户端以标准化的方式访问和利用其后端服务，如数据库操作、UI自动化和认证管理。

主要功能点

  • 内容管理: 支持'posts', 'docs', 'content'三种内容集合，具备MDX支持和功能完善的评论系统。
  • 用户认证与安全: 集成Clerk进行用户认证，支持角色管理和受保护路由，提供CSRF保护、速率限制和内容安全策略。
  • 数据库集成: 支持Turso (LibSQL) 和 Supabase (PostgreSQL) 两种后端，具备CRUD操作、事务支持和Row-Level Security。
  • 渐进式Web应用 (PWA): 提供服务工作者缓存、离线支持、自定义安装提示和自动更新功能。
  • MCP服务器集成: 通过Model Context Protocol (MCP) 标准，向LLM客户端提供以下功能访问：
    • Supabase数据库操作: 允许LLM执行数据库的读取、写入等操作。
    • Chrome DevTools自动化: 赋予LLM自动化浏览器调试工具的能力。
    • Figma设计系统集成: 使LLM能够访问和交互Figma设计文件。
    • Playwright浏览器测试: 允许LLM执行端到端自动化测试任务。
    • Clerk认证管理: 使LLM能够管理用户身份验证和角色。

安装步骤

  1. 克隆仓库: 打开终端或命令行工具，执行以下命令克隆项目： 
    git clone https://github.com/shawn-sandy/astro-basics.git
  2. 进入项目目录: 
    cd astro-basics
  3. 安装依赖: 安装项目所需的所有Node.js依赖（此步骤可能需要大约4分钟）。 
    npm install
  4. 设置预提交钩子: 配置项目的Git预提交钩子，用于代码质量检查。 
    npm run prepare
  5. 复制环境变量模板: 创建一个'.env'文件，用于存储项目配置。 
    cp .env.example .env
  6. 配置认证 (必需):
    • 访问 clerk.com 注册或登录，获取您的Clerk可发布密钥 ('PUBLIC_CLERK_PUBLISHABLE_KEY') 和秘密密钥 ('CLERK_SECRET_KEY')。
    • 将这些密钥添加到您在步骤5创建的 '.env' 文件中。
  7. 设置数据库 (可选，但推荐):
    • 重要提示: 如果您计划自定义用户角色，请务必在运行数据库迁移之前配置这些角色，因为角色配置会生成数据库迁移文件来定义您的角色Schema。
    • 运行交互式数据库设置向导（推荐）： 
      npm run db:wizard
    • 或者手动运行数据库初始化： 
      npm run db:setup
  8. 启动开发服务器: 启动Astro开发服务器和SCSS观察器，您可以通过浏览器访问网站。 
    npm run start
    开发服务器通常会运行在 'http://localhost:4321'。

服务器配置（供MCP客户端使用）

MCP客户端可以通过以下JSON格式配置连接到此MCP服务器。请注意，'command' 和 'args' 字段定义了如何启动此MCP服务器，'capabilities' 字段则声明了服务器向LLM客户端提供的资源和工具。

{
  "name": "Astro Basics MCP Server",
  "description": "提供对Astro Basics网站后端功能的MCP访问，包括数据库操作、UI自动化、设计系统集成和认证管理。",
  "command": "npm",
  "args": ["run", "start"],
  "capabilities": {
    "resources": [
      {
        "id": "supabase_operations",
        "name": "Supabase数据库操作",
        "description": "允许LLM对Supabase数据库进行查询和修改，管理网站数据。"
      },
      {
        "id": "clerk_authentication",
        "name": "Clerk认证管理",
        "description": "管理用户身份验证和角色，包括用户创建、更新和权限检查，支持网站用户交互。"
      }
    ],
    "tools": [
      {
        "id": "chrome_devtools_automation",
        "name": "Chrome DevTools 自动化",
        "description": "自动化Chrome浏览器开发工具，用于UI检查、调试和模拟用户交互，辅助网站开发和维护。"
      },
      {
        "id": "figma_design_integration",
        "name": "Figma设计系统集成",
        "description": "与Figma设计文件交互，获取设计信息或执行设计相关的自动化任务，确保UI与设计规范一致。"
      },
      {
        "id": "playwright_browser_testing",
        "name": "Playwright浏览器测试",
        "description": "使用Playwright框架执行端到端浏览器测试，模拟用户行为和验证页面功能，确保网站质量。"
      }
    ],
    "prompts": []
  }
}

基本使用方法

在成功安装并启动Astro Basics网站及其内置的MCP服务器后，您的MCP客户端（通常是LLM应用程序）可以通过JSON-RPC协议与服务器建立连接。客户端可以利用服务器暴露的各项'resources'（资源）和'tools'（工具）来执行复杂任务。

例如，一个LLM客户端可以：

  1. 查询用户数据: 调用'supabase_operations'资源，请求获取特定用户的个人资料信息。
  2. 模拟用户行为: 使用'playwright_browser_testing'工具，自动化地在网站上模拟新用户注册流程，并验证注册是否成功。
  3. 检查设计元素: 通过'figma_design_integration'工具，核对网页上某个组件的样式是否与Figma设计稿中的规范一致。
  4. 管理认证信息: 利用'clerk_authentication'资源，为测试目的创建或修改用户角色。

这些操作使得LLM能够深度理解和交互Web应用程序的后端服务，从而实现更高级的自动化和智能决策。

信息

分类

开发者工具

访问项目