使用 AI 工具构建 Astro 网站

基于 AI 的编辑器和代理编码工具通常对 Astro 的核心 API 和概念有深入的了解。但是，有些人可能使用较旧的 API，并且可能不了解框架的新功能或最新更改。

¥AI-powered editors and agentic coding tools generally have good knowledge of Astro’s core APIs and concepts. However, some may use older APIs and may not be aware of newer features or recent changes to the framework.

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

¥This guide covers how to enhance AI tools with up-to-date Astro knowledge and provides best practices for building Astro sites with AI assistance.

上下文文件

¥Context files

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

¥Astro provides llms.txt and llms-full.txt files that contains the full docs content in a format optimized for AI consumption. These are static files of the Astro Docs content in a streamlined Markdown format. Some AI tools can auto-discover these files if you provide https://astro.nodejs.cn as a docs source.

虽然这些文件提供了 Astro 文档的精简、易于解析版本，但它们文件很大，如果直接在上下文中使用会占用大量令牌，因此需要定期更新以保持最新状态。当 AI 工具无法通过其他方式访问最新文档时，它们最好用作备用方案。MCP 服务器提供实时搜索功能，让你更高效地访问完整文档，因此在可用时，它是你的首选。

¥While these files provide a minimal, easy-to-parse version of Astro’s documentation, they are large files that will use a lot of tokens if used directly in context and will need to be updated regularly to stay current. They are best used as a fallback when the AI tool does not have access to the latest documentation in other ways. The MCP server provides more efficient access to the full documentation with real-time search capabilities, making it the preferred option when available.

Astro Docs MCP 服务器

¥Astro Docs MCP Server

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

¥You can ensure your AI tools have current Astro knowledge through the Astro Docs MCP (Model Context Protocol) server. This provides real-time access to the latest documentation, helping AI tools avoid outdated recommendations and ensuring they understand current best practices.

与使用静态数据训练的 AI 模型不同，MCP 服务器提供对最新 Astro 文档的访问。该服务器免费、开源，可远程运行，无需在本地安装。

¥Unlike AI models trained on static data, the MCP server provides access to the latest Astro documentation. The server is free, open-source, and runs remotely with nothing to install locally.

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

¥The Astro Docs MCP server uses the kapa.ai API to maintain an up-to-date index of the Astro documentation.

服务器详情

¥Server Details

名称：Astro 文档
URL:https://mcp.docs.astro.build/mcp
传输：可流式传输的 HTTP

安装

¥Installation

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

¥The setup process varies depending on your AI development tool. You may see some tools refer to MCP servers as connectors, adapters, extensions, or plugins.

手动设置

¥Manual setup

许多工具支持 MCP 服务器的通用 JSON 配置格式。如果你所选工具没有具体的说明，你可以通过在工具的 MCP 设置中添加以下配置来添加 Astro Docs MCP 服务器：

¥Many tools support a common JSON configuration format for MCP servers. If there are not specific instructions for your chosen tool, you may be able to add the Astro Docs MCP server by including the following configuration in your tool’s MCP settings:

Streamable HTTP
Local Proxy

{
  "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 Docs MCP 服务器可使其在生成 Astro 代码时访问最新文档。

¥Claude Code is an agentic coding tool that runs on the command line. Enabling the Astro Docs MCP server allows it to access the latest documentation while generating Astro code.

使用终端命令安装：

¥Install using the terminal command:

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

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

¥More info on using MCP servers with Claude Code

Claude Code GitHub Action

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

¥Claude Code also provides a GitHub Action that can be used to run commands in response to GitHub events. Enabling the Astro Docs MCP server allows it to access the latest documentation while answering questions in comments or generating Astro code.

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

¥You can configure it to use the Astro Docs MCP server for documentation access by adding the following to the workflow file:

# ...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"

¥More info on using MCP servers with the Claude Code GitHub Action

光标

¥Cursor

光标是一个 AI 代码编辑器。添加 Astro Docs MCP 服务器后，Cursor 可以在执行开发任务时访问最新的 Astro 文档。

¥Cursor is an AI code editor. Adding the Astro Docs MCP server allows Cursor to access the latest Astro documentation while performing development tasks.

点击下方按钮安装：

¥Install by clicking the button below:

Add to Cursor

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

¥More info on using MCP servers with Cursor

Visual Studio Code

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

¥Visual Studio Code supports MCP servers when using Copilot Chat. Adding the Astro Docs MCP server allows VS Code to access the latest Astro documentation when answering questions or performing coding tasks.

点击下方按钮安装：

¥Install by clicking the button below:

Add to VS Code

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

¥More info on using MCP servers with VS Code

Warp

Warp（以前称为 Warp Terminal）是一个用于多个 AI 代理进行编码的代理开发环境。添加 Astro Docs MCP 服务器后，Warp 可以在回答问题或执行编码任务时访问最新的 Astro 文档。

¥Warp (formerly Warp Terminal) is an agent development environment built for coding with multiple AI agents. Adding the Astro Docs MCP server allows Warp to access the latest Astro documentation when answering questions or performing coding tasks.

Open your Warp settings and go to AI > MCP Servers > Manage MCP Servers.
Click “Add”.

Enter the following configuration. You can optionally configure the Astro MCP server to activate on startup using the start_on_launch flag:

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

Click “Save”.

Claude.ai / Claude Desktop

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

¥Claude.ai is a general-purpose AI assistant. Adding the Astro Docs MCP server allows it to access the latest documentation when answering Astro questions or generating Astro code.

Navigate to the Claude.ai connector settings.
Click “Add custom connector”. You may need to scroll down to find this option.
Enter the server URL: https://mcp.docs.astro.build/mcp.
Set the name to “Astro docs”.

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

¥More info on using MCP servers with Claude.ai

Windsurf

Windsurf 是一个由 AI 驱动的代理编码工具，可作为编辑器插件或独立编辑器使用。它可以使用 Astro Docs MCP 服务器在执行编码任务时访问文档。

¥Windsurf is an AI-powered agentic coding tool, available as editor plugins or a standalone editor. It can use the Astro Docs MCP server to access documentation while performing coding tasks.

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

¥Windsurf doesn’t support streaming HTTP, so it requires a local proxy configuration:

Open ~/.codeium/windsurf/mcp_config.json in your editor.

Add the following configuration to your Windsurf MCP settings:

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

Save the configuration and restart Windsurf.

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

¥More info on using MCP servers with Windsurf

Gemini CLI

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

¥Gemini CLI is a command-line AI coding tool that can use the Astro Docs MCP server to access documentation while generating Astro code.

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

¥You can configure MCP servers at the global level in the ~/.gemini/settings.json file, or in a .gemini/settings.json file in a project root.

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

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

¥More info on using MCP servers with Gemini CLI

Zed

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

¥Zed supports MCP servers when using its AI capabilities. It can use the Astro Docs MCP server to access documentation while performing coding tasks.

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

¥Zed doesn’t support streaming HTTP, so it requires a local proxy configuration:

Open ~/.config/zed/settings.json in your editor.

Add the following configuration to your Zed MCP settings:

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

Save the configuration.

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

¥More info on using MCP servers with Zed

ChatGPT

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

¥Refer to the OpenAI MCP documentation for specific setup instructions.

光线投射

¥Raycast

光线投射可以连接到 MCP 服务器以增强其 AI 功能。诸如 MCP 之类的 AI 功能需要 Raycast Pro 账户，因此请确保在尝试安装之前已升级。添加 Astro Docs MCP 服务器后，Raycast 可以在回答问题时访问最新的 Astro 文档。

¥Raycast can connect to MCP servers to enhance its AI capabilities. AI features such as MCP require a Raycast Pro account, so ensure you have upgraded before trying to install. Adding the Astro Docs MCP server allows Raycast to access the latest Astro documentation while answering questions.

点击下方按钮安装：

¥Install by clicking the button below:

Add to Raycast

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

¥More info on using MCP servers with Raycast

用法

¥Usage

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

¥Once configured, you can ask your AI tool questions about Astro, and it will retrieve information directly from the latest docs. Coding agents will be able to consult the latest documentation when performing coding tasks, and chatbots will be able to accurately answer questions about Astro features, APIs, and best practices.

故障排除

¥Troubleshooting

如果你遇到问题：

¥If you encounter issues:

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

如果你仍然遇到问题，请在 Astro Docs MCP 服务器代码库中提交问题。

¥If you are still having problems, open an issue in the Astro Docs MCP Server repository.

Discord AI 支持

¥Discord AI Support

支持 Astro MCP 服务器的技术也可用作 Astro Discord 中的聊天机器人，以提供自助服务支持。访问 #support-ai 通道，以自然语言提问有关 Astro 或你的项目代码的问题。你的对话会自动建立线索，你可以提出无限数量的后续问题。

¥The same technology that powers Astro’s MCP server is also available as a chatbot in the Astro Discord for self-serve support. Visit the #support-ai channel to ask questions about Astro or your project code in natural language. Your conversation is automatically threaded, and you can ask an unlimited number of follow-up questions.

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

¥Conversations with the chatbot are public, and are subject to the same server rules for language and behavior as the rest of our channels, but they are not actively visited by our volunteer support members. For assistance from the community, please create a thread in our regular #support channel.

AI 赋能 Astro 开发的技巧

¥Tips for AI-Powered Astro Development

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

Astro v5.12 中文网 - 粤ICP备13048890号

Nodejs.cn 旗下网站