Создание сайтов на Astro с помощью инструментов ИИ

Редакторы с поддержкой ИИ и инструменты агентного программирования обычно хорошо знакомы с основными API и концепциями Astro. Однако некоторые из них могут использовать устаревшие API и не знать о новых функциях или последних изменениях во фреймворке.

Это руководство описывает, как улучшить инструменты ИИ с помощью актуальных знаний об Astro и предоставляет лучшие практики для создания сайтов на Astro с использованием ИИ.

MCP-сервер Astro Docs

Вы можете обеспечить актуальность знаний об Astro для ваших инструментов ИИ с помощью MCP-сервера документации Astro (Model Context Protocol). Он предоставляет доступ к последней версии документации в реальном времени, помогая инструментам ИИ избегать устаревших рекомендаций и следовать текущим лучшим практикам.

В отличие от моделей ИИ, обученных на статичных данных, MCP-сервер предоставляет доступ к самой актуальной документации Astro. Сервер бесплатный, с открытым исходным кодом и работает удалённо, не требуя локальной установки.

MCP-сервер Astro Docs использует API kapa.ai для поддержания актуального индекса документации Astro.

Детали сервера

Название: Astro Docs
URL-адрес: https://mcp.docs.astro.build/mcp
Транспортный протокол: Потоковый HTTP

Установка

Процесс настройки зависит от используемого инструмента разработки с ИИ. В некоторых инструментах MCP-серверы могут называться коннекторами, адаптерами, расширениями или плагинами.

Ручная настройка

Многие инструменты поддерживают общий формат конфигурации JSON для MCP-серверов. Если для вашего инструмента нет конкретных инструкций, вы можете добавить MCP-сервер Astro Docs, используя следующую конфигурацию в настройках 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 — это инструмент агентного программирования, работающий в командной строке. Подключение MCP-сервера Astro Docs позволяет ему использовать последнюю документацию при генерации кода Astro.

Установка через команду в терминале:

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

Подробнее об использовании MCP-серверов с Claude Code

Claude Code GitHub Action

Claude Code также предоставляет GitHub Action, который может выполнять команды в ответ на события GitHub. Подключение MCP-сервера Astro Docs позволяет ему использовать последнюю документацию при ответах на вопросы в комментариях или генерации кода Astro.

Вы можете настроить его для использования MCP-сервера Astro Docs, добавив следующее в файл workflow:

# ...остальная конфигурация workflow
- 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"

Подробнее об использовании MCP-серверов с Claude Code GitHub Action

Codex CLI

Codex CLI — это инструмент для программирования с ИИ, работающий в командной строке, который может использовать MCP сервер Astro Docs для доступа к документации при генерации кода Astro.

Вы можете настроить MCP-сервера глобально в файле ~/.codex/config.toml или в файле .codex/config.toml в корне проекта.

[mcp_servers.astro-docs]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]

Подробнее об использовании MCP-серверов с Codex CLI

Cursor

Cursor — это редактор кода с ИИ. Добавление MCP-сервера Astro Docs позволяет Cursor использовать последнюю документацию Astro при выполнении задач разработки.

Установка по кнопке ниже:

Добавить в Cursor

Подробнее об использовании MCP-серверов с Cursor

Visual Studio Code

Visual Studio Code поддерживает MCP-серверы при использовании Copilot Chat. Добавление MCP-сервера Astro Docs позволяет VS Code использовать последнюю документацию Astro при ответах на вопросы или выполнении задач программирования.

Установка по кнопке ниже:

Добавить в VS Code

Подробнее об использовании MCP-серверов с VS Code

Warp

Warp (ранее Warp Terminal) — это среда разработки для работы с несколькими ИИ-агентами. Добавление MCP-сервера Astro Docs позволяет Warp использовать последнюю документацию Astro при ответах на вопросы или выполнении задач программирования.

Откройте настройки Warp и перейдите в AI > MCP Servers > Manage MCP Servers.
Нажмите «Add».

Введите следующую конфигурацию. Вы можете настроить запуск MCP-сервера Astro Docs при старте, используя флаг start_on_launch:

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

Нажмите «Save».

Подробнее об использовании MCP-серверов с Warp

Claude.ai / Claude Desktop

Claude.ai — это универсальный ИИ-ассистент. Добавление MCP-сервера Astro Docs позволяет ему использовать последнюю документацию при ответах на вопросы по Astro или генерации кода Astro.

Перейдите в настройки коннекторов Claude.ai.
Нажмите «Add custom connector». Возможно, вам нужно будет прокрутить вниз, чтобы найти эту опцию.
Введите URL сервера: https://mcp.docs.astro.build/mcp.
Установите название «Astro docs».

Подробнее об использовании MCP-серверов с Claude.ai

Windsurf

Windsurf — это инструмент агентного программирования с ИИ, доступный как плагин для редакторов или автономный редактор. Он может использовать MCP-сервер Astro Docs для доступа к документации при выполнении задач программирования.

Windsurf не поддерживает потоковый HTTP, поэтому требуется конфигурация локального прокси:

Откройте файл ~/.codeium/windsurf/mcp_config.json в вашем редакторе.

Добавьте следующую конфигурацию в настройки MCP Windsurf:

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

Сохраните конфигурацию и перезапустите Windsurf.

Подробнее об использовании MCP-серверов с Windsurf

Gemini CLI

Gemini CLI — это инструмент командной строки для программирования с ИИ, который может использовать MCP-сервер Astro Docs для доступа к документации при генерации кода Astro.

Вы можете настроить MCP-серверы на глобальном уровне в файле ~/.gemini/settings.json или в файле .gemini/settings.json в корне проекта.

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

Подробнее об использовании MCP-серверов с Gemini CLI

Google Antigravity

Google Antigravity — это агентная платформа для разработки.

Откройте ~/.gemini/antigravity/mcp_config.json следуя инструкциям руководства по подключению пользовательских MCP-серверов.

Добавьте следующую конфигурацию в mcp_config.json:

{
  "mcpServers": {
    "astro-docs": {
      "serverUrl": "https://mcp.docs.astro.build/mcp"
    }
  }
 }

Сохраните файл и нажмите “Refresh” во вкладке “Manage MCPs”.

Zed

Zed поддерживает MCP-серверы при использовании его ИИ-возможностей. Он может использовать MCP-сервер Astro Docs для доступа к документации при выполнении задач программирования.

Откройте файл ~/.config/zed/settings.json в вашем редакторе.

Добавьте следующую конфигурацию в настройки MCP Zed:

{
  "context_servers": {
    "Astro docs": {
      "settings": {},
      "enabled": true,
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

Сохраните конфигурацию.

Подробнее об использовании MCP-серверов с Zed

ChatGPT

Обратитесь к документации OpenAI по MCP для получения конкретных инструкций по настройке.

Raycast

Raycast может подключаться к MCP-серверам для улучшения своих ИИ-возможностей. Для использования ИИ-функций, таких, как MCP, требуется аккаунт Raycast Pro, поэтому убедитесь, что вы обновили аккаунт перед установкой. Добавление MCP-сервера Astro Docs позволяет Raycast использовать последнюю документацию Astro при ответах на вопросы.

Установка по кнопке ниже:

Добавить в Raycast

Подробнее об использовании MCP-серверов с Raycast

Opencode AI

Opencode AI — это консольный инструмент программирования с ИИ с открытым исходным кодом, который может использовать MCP сервер Astro Docs для доступа к документации при генерации кода Astro.

Вы можете настроить MCP-сервера в своём конфигурационном файле Opencode, обычно с названием opencode.json, расположенном в корне вашего проекта или вашем каталоге глобальной конфигурации (например, ~/.config/opencode/opencode.json).

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "Astro docs": {
      "type": "remote",
      "url": "https://mcp.docs.astro.build/mcp",
      "enabled": true
    }
  }
}

Подробнее об использовании Opencode AI

GitHub Copilot Coding Agent

GitHub Copilot можно использовать как coding agent на базе GitHub Actions. Включение MCP-сервера Astro Docs позволяет ему получать доступ к актуальной документации Astro при ответах на вопросы или выполнении задач по программированию.

Вы можете настроить его на использование MCP-сервера Astro Docs для доступа к документации, добавив следующее в настройки Copilot coding agent вашего репозитория, доступные по адресу https://github.com/<your-org>/<your-repo>/settings/copilot/coding_agent:

{
  "mcpServers": {
    "astro-docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp",
      "tools": ["mcp__astro-docs__search_astro_docs"]
    }
  }
}

Подробнее о расширении GitHub Copilot coding agent с помощью MCP-серверов.

Использование

После настройки вы можете задавать своему инструменту ИИ вопросы об Astro, и он будет получать информацию непосредственно из последней документации. Агенты программирования смогут обращаться к актуальной документации при выполнении задач, а чат-боты смогут точно отвечать на вопросы о функциях, API и лучших практиках Astro.

Решение проблем

Если возникли проблемы:

Убедитесь, что ваш инструмент поддерживает потоковый транспортный протокол HTTP.
Проверьте правильность URL сервера: https://mcp.docs.astro.build/mcp.
Убедитесь, что у вашего инструмента есть доступ к интернету.
Обратитесь к документации по интеграции MCP для вашего инструмента.

Если проблемы сохраняются, создайте ишью в репозитории MCP-сервера Astro Docs.

Поддержка ИИ в Discord

Та же технология, которая используется в MCP-сервере Astro, доступна в виде чат-бота в Astro Discord для самостоятельной поддержки. Посетите канал #support-ai, чтобы задавать вопросы об Astro или вашем коде на естественном языке. Ваши беседы автоматически организуются в треды, и вы можете задавать неограниченное количество дополнительных вопросов.

Беседы с чат-ботом публичны и подчиняются тем же правилам сервера относительно языка и поведения, что и другие каналы, но волонтёры поддержки не посещают их активно. Для помощи от сообщества создайте тред в обычном канале #support.

Фоновый режим

Добавлено в: astro@7.0.0 Новое

При обнаружении ИИ-агента для программирования, astro dev автоматически запускает dev-сервер как отдельный фоновый процесс. Это предотвращает блокировку dev-сервером терминала агента и позволяет ему продолжать работу во время работы сервера.

При запуске dev-сервера создаётся lock-файл (.astro/dev.json), в который записываются URL-адрес сервера, порт и PID. Это предотвращает запуск нескольких серверов для одного и того же проекта.

Если вы не используете ИИ-агента для программирования, то astro dev запускается как приоритетный процесс и выводится в терминале.

Для того, чтобы отключить фоновый режим, установите переменную окружения ASTRO_DEV_BACKGROUND перед запуском astro dev:

ASTRO_DEV_BACKGROUND=0 astro dev

См. справочник по CLI (EN) с полным списком флагов и подкомманд для astro dev.

Health эндпойнт

Dev-сервер добавляет эндпойнт /_astro/status, который возвращает JSON-ответ {"ok": true}. Он позволяет агентам и другим инструментам проверять готов ли dev-сервер принимать запросы. Этот эндпойнт доступен только в dev-сервере и не присутствует в продакшен-сборках.

Советы по разработке на Astro с использованием ИИ

Начинайте с шаблонов: Вместо создания с нуля просите инструменты ИИ использовать существующий шаблон Astro или команду npm create astro@latest с опцией template.
Используйте astro add для интеграций: Просите инструменты ИИ использовать astro add для официальных интеграций (например, astro add tailwind, astro add react). Для других пакетов используйте команду вашего менеджера пакетов вместо прямого редактирования package.json.
Проверяйте актуальные API: Инструменты ИИ могут использовать устаревшие шаблоны. Просите их проверять последнюю документацию, особенно для новых функций, таких как сессии и действия. Это также важно для функций, которые значительно изменились с момента их выпуска. Например, коллекции контента, или ранее экспериментальных функций, которые больше не являются экспериментальными.
Используйте правила проекта: Если ваш инструмент ИИ поддерживает это, настройте правила проекта для соблюдения лучших практик и стандартов кодирования, таких как указанные выше.

Внести свой вклад Сообщество Поддержать