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

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

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

Контекстные файлы

Astro предоставляет файлы llms.txt и llms-full.txt, которые содержат полный контент документации в формате, оптимизированном для использования ИИ. Это статические файлы с содержимым документации Astro в упрощённом формате Markdown. Некоторые инструменты ИИ могут автоматически обнаруживать эти файлы, если указать https://docs.astro.build в качестве источника документации.

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

MCP-сервер Astro Docs

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

:::tip[Что такое MCP?]Model Context Protocol (MCP) — это стандартизированный способ доступа инструментов ИИ к внешним инструментам и источникам данных.:::

В отличие от моделей ИИ, обученных на статичных данных, 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

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": {
      "httpUrl": "https://mcp.docs.astro.build/mcp",
    }
  }
}

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

Zed

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

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

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

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

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

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

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

ChatGPT

:::caution[Ограниченная доступность]Интеграция с MCP-сервером доступна только для пользователей ChatGPT Pro, Team и Enterprise. Процесс настройки сложнее, чем для других инструментов.:::

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

Raycast

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

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

Добавить в Raycast

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

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

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

:::note[Помните]MCP-сервер Astro Docs предоставляет доступ к текущей документации, но инструменты ИИ всё ещё отвечают за интерпретацию и генерацию кода. ИИ может ошибаться, поэтому всегда тщательно проверяйте сгенерированный код и тестируйте его.:::

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

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

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

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

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

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

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

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

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

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