Создание сайтов на 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). Он предоставляет доступ к последней версии документации в реальном времени, помогая инструментам ИИ избегать устаревших рекомендаций и следовать текущим лучшим практикам.

Что такое 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

mcp.json

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

Локальный прокси

mcp.json

{
  "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:

.github/workflows/claude.yml

# ...остальная конфигурация 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 при ответах на вопросы или выполнении задач программирования.

1. Откройте настройки Warp и перейдите в AI > MCP Servers > Manage MCP Servers.
2. Нажмите «Add».
3. Введите следующую конфигурацию. Вы можете настроить запуск MCP-сервера Astro Docs при старте, используя флаг start_on_launch:

   MCP Configuration

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

4. Нажмите «Save».

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

Claude.ai / Claude Desktop

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

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

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

Windsurf

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

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

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

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

   Конфигурация MCP

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

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

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

Gemini CLI

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

Вы можете настроить MCP-серверы на глобальном уровне в файле ~/.gemini/settings.json или в файле .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, поэтому требуется конфигурация локального прокси:

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

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

   Конфигурация MCP

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

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

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

ChatGPT

Ограниченная доступность

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

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

Raycast

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

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

Добавить в Raycast

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

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

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

Помните

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: Инструменты ИИ могут использовать устаревшие шаблоны. Просите их проверять последнюю документацию, особенно для новых функций, таких как сессии и действия. Это также важно для функций, которые значительно изменились с момента их выпуска, например, коллекции контента, или ранее экспериментальных функций, которые больше не являются экспериментальными.
• Используйте правила проекта: Если ваш инструмент ИИ поддерживает это, настройте правила проекта для соблюдения лучших практик и стандартов кодирования, таких как указанные выше.