使用 AI 工具构建 Astro 站点

AI 赋能的编辑器和智能体编程工具通常对 Astro 的核心 API 和概念有很好的了解。但是，有些工具可能使用较旧的 API，并且可能不知道框架的较新功能或最近的更改。

本指南介绍了如何利用最新的 Astro 知识来增强 AI 工具，并提供了在 AI 辅助下构建 Astro 站点的最佳实践。

上下文文件

Astro 提供了 llms.txt 和 llms-full.txt 文件，其中包含为 AI 使用而优化的完整文档内容。这些是 Astro 文档内容的静态文件，采用简化的 Markdown 格式。如果你提供 https://docs.astro.js.cn 作为文档源，一些 AI 工具可以自动发现这些文件。

虽然这些文件提供了 Astro 文档的最小化、易于解析的版本，但它们是大型文件，如果直接在上下文中使用会消耗大量 token，并且需要定期更新以保持最新。当 AI 工具无法通过其他方式访问最新文档时，最好将它们用作后备方案。MCP 服务器提供了更高效的访问完整文档的方式，并具备实时搜索功能，因此在可用时是首选选项。

Astro 文档 MCP 服务器

你可以通过 Astro 文档 MCP（模型上下文协议）服务器，确保你的 AI 工具拥有最新的 Astro 知识。这提供了对最新文档的实时访问，帮助 AI 工具避免过时的建议，并确保它们理解当前的最佳实践。

与基于静态数据训练的 AI 模型不同，MCP 服务器提供对最新 Astro 文档的访问。该服务器是免费、开源的，并且远程运行，无需在本地安装任何东西。

Astro 文档 MCP 服务器使用 kapa.ai API 来维护 Astro 文档的最新索引。

服务器详情

名称：Astro Docs
URL： https://mcp.docs.astro.build/mcp
传输方式：流式 HTTP

安装

设置过程因你的 AI 开发工具而异。你可能会看到一些工具将 MCP 服务器称为连接器、适配器、扩展或插件。

手动设置

许多工具支持通用的 JSON 配置格式来设置 MCP 服务器。如果你选择的工具没有特定的说明，你可以通过在你工具的 MCP 设置中包含以下配置来添加 Astro 文档 MCP 服务器

流式 HTTP
本地代理

{
  "mcpServers": {
    "Astro docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

{
  "mcpServers": {
    "Astro docs": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

Claude Code CLI

Claude Code 是一个在命令行上运行的智能体编程工具。启用 Astro 文档 MCP 服务器使其在生成 Astro 代码时能够访问最新的文档。

使用终端命令安装

claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp

关于在 Claude Code 中使用 MCP 服务器的更多信息

Claude Code GitHub Action

Claude Code 还提供了一个 GitHub Action，可用于响应 GitHub 事件来运行命令。启用 Astro 文档 MCP 服务器使其在回答评论中的问题或生成 Astro 代码时能够访问最新的文档。

你可以通过将以下内容添加到工作流文件中，来配置它使用 Astro 文档 MCP 服务器进行文档访问

# ...rest of your workflow configuration
- uses: anthropics/claude-code-action@beta
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
    mcp_config: |
      {
        "mcpServers": {
          "astro-docs": {
            "type": "http",
            "url": "https://mcp.docs.astro.build/mcp"
          }
        }
      }
    allowed_tools: "mcp__astro-docs__search_astro_docs"

关于在 Claude Code GitHub Action 中使用 MCP 服务器的更多信息

Cursor

Cursor 是一款 AI 代码编辑器。添加 Astro 文档 MCP 服务器允许 Cursor 在执行开发任务时访问最新的 Astro 文档。

点击下方按钮安装

添加到 Cursor

关于在 Cursor 中使用 MCP 服务器的更多信息

Visual Studio Code

Visual Studio Code 在使用 Copilot Chat 时支持 MCP 服务器。添加 Astro 文档 MCP 服务器允许 VS Code 在回答问题或执行编码任务时访问最新的 Astro 文档。

点击下方按钮安装

添加到 VS Code

关于在 VS Code 中使用 MCP 服务器的更多信息

Warp

Warp（前身为 Warp Terminal）是一个专为与多个 AI 智能体协作编码而构建的智能体开发环境。添加 Astro 文档 MCP 服务器允许 Warp 在回答问题或执行编码任务时访问最新的 Astro 文档。

打开你的 Warp 设置，然后转到 AI > MCP Servers > Manage MCP Servers。
点击“添加”。

输入以下配置。你可以选择使用 start_on_launch 标志将 Astro MCP 服务器配置为在启动时激活

{
  "mcpServers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"],
      "env": {},
      "working_directory": null,
      "start_on_launch": true
    }
  }
}

点击“保存”。

关于在 Warp 中使用 MCP 服务器的更多信息

Claude.ai / Claude Desktop

Claude.ai 是一个通用 AI 助手。添加 Astro 文档 MCP 服务器使其在回答 Astro 问题或生成 Astro 代码时能够访问最新的文档。

导航到 Claude.ai 连接器设置。
点击“添加自定义连接器”。你可能需要向下滚动才能找到此选项。
输入服务器 URL： https://mcp.docs.astro.build/mcp。
将名称设置为“Astro docs”。

关于在 Claude.ai 中使用 MCP 服务器的更多信息

Windsurf

Windsurf 是一款 AI 赋能的智能体编程工具，可作为编辑器插件或独立编辑器使用。它可以在执行编码任务时使用 Astro 文档 MCP 服务器来访问文档。

Windsurf 不支持流式 HTTP，因此需要本地代理配置

在你的编辑器中打开 ~/.codeium/windsurf/mcp_config.json。

将以下配置添加到你的 Windsurf MCP 设置中

{
  "mcpServers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

保存配置并重启 Windsurf。

关于在 Windsurf 中使用 MCP 服务器的更多信息

Gemini CLI

Gemini CLI 是一款命令行 AI 编码工具，可以在生成 Astro 代码时使用 Astro 文档 MCP 服务器来访问文档。

你可以在 ~/.gemini/settings.json 文件中全局配置 MCP 服务器，或者在项目根目录的 .gemini/settings.json 文件中进行配置。

{
  "mcpServers": {
    "Astro docs": {
      "httpUrl": "https://mcp.docs.astro.build/mcp",
    }
  }
}

关于在 Gemini CLI 中使用 MCP 服务器的更多信息

Zed

Zed 在使用其 AI 功能时支持 MCP 服务器。它可以在执行编码任务时使用 Astro 文档 MCP 服务器来访问文档。

Zed 不支持流式 HTTP，因此需要本地代理配置

在你的编辑器中打开 ~/.config/zed/settings.json。

将以下配置添加到你的 Zed MCP 设置中

{
  "context_servers": {
    "Astro docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

保存配置。

关于在 Zed 中使用 MCP 服务器的更多信息

ChatGPT

有关具体的设置说明，请参阅 OpenAI MCP 文档。

Raycast

Raycast 可以连接到 MCP 服务器以增强其 AI 功能。像 MCP 这样的 AI 功能需要 Raycast Pro 账户，因此在尝试安装前请确保你已升级。添加 Astro 文档 MCP 服务器允许 Raycast 在回答问题时访问最新的 Astro 文档。

点击下方按钮安装

添加到 Raycast

关于在 Raycast 中使用 MCP 服务器的更多信息

用法

配置完成后，你可以向你的 AI 工具询问有关 Astro 的问题，它将直接从最新的文档中检索信息。编码智能体在执行编码任务时将能够查阅最新的文档，而聊天机器人将能够准确回答有关 Astro 功能、API 和最佳实践的问题。

故障排除

如果你遇到问题

验证你的工具是否支持流式 HTTP 传输。
检查服务器 URL 是否正确： https://mcp.docs.astro.build/mcp。
确保你的工具有正常的互联网访问权限。
查阅你特定工具的 MCP 集成文档。

如果问题仍然存在，请在 Astro Docs MCP Server 仓库中提交一个 issue。

Discord AI 支持

为 Astro MCP 服务器提供支持的相同技术也作为聊天机器人在 Astro Discord 中提供，用于自助支持。访问 #support-ai 频道，用自然语言询问有关 Astro 或你的项目代码的问题。你的对话会自动形成话题串，你可以无限次地提出后续问题。

与聊天机器人的对话是公开的，并且与我们其他频道一样，受制于相同的服务器语言和行为规则，但我们的志愿者支持成员不会主动访问这些对话。如需社区援助，请在我们常规的 #support 频道中创建一个话题串。

AI 赋能 Astro 开发的技巧

从模板开始：不要从头开始构建，而是要求 AI 工具从现有的 Astro 模板开始，或者使用带有模板选项的 npm create astro@latest。
使用 astro add 添加集成：要求 AI 工具使用 astro add 来添加官方集成（例如 astro add tailwind、astro add react）。对于其他包，请使用你偏好的包管理器的命令进行安装，而不是直接编辑 package.json。
验证当前 API：AI 工具可能会使用过时的模式。要求它们检查最新的文档，特别是对于像会话和操作这样的新功能。对于自首次发布以来有重大变化的功能（如内容集合），或者以前是实验性但现在可能不再是实验性的功能，这一点也很重要。
使用项目规则：如果你的 AI 工具支持，请设置项目规则以强制执行最佳实践和编码标准，例如上面列出的那些。

贡献社区赞助