В мире искусственного интеллекта, где доминируют гиганты вроде OpenAI, Anthropic и Google, разработчики часто сталкиваются с одной и той же бюрократической и технической преградой: необходимостью использовать серверные прокси. Даже если вы хотите просто протестировать локальную модель или использовать API стороннего провайдера, стандартные библиотеки (например, Python-клиент OpenAI) часто требуют настройки серверной части для обхода ограничений безопасности браузеров. Это создает лишний слой сложности, задержки и потенциальных точек отказа. Но что, если можно было бы взаимодействовать с мощными языковыми моделями напрямую из интерфейса вашего веб-браузера, без единой строки кода на бэкенде?
Именно эту задачу решает инструмент под названием CORS Chat, созданный известным разработчиком и блогером Саймоном Уиллисоном (Simon Willison). Этот проект, разработанный с использованием передовых моделей генерации кода, представляет собой легковесное веб-приложение, которое позволяет общаться с любыми API, совместимыми с OpenAI Responses, прямо в браузере. Главное условие — сервер должен корректно обрабатывать CORS (Cross-Origin Resource Sharing) заголовки. Это открывает невероятные возможности для локального тестирования моделей, таких как Qwen или Llama, запущенных на вашем собственном оборудовании, а также для быстрого доступа к облачным сервисам вроде OpenRouter.
В этой статье мы подробно разберем, как работает CORS Chat, почему он важен для современного AI-разработчика, как настроить его для локальных моделей в LM Studio и какие технические нюансы, такие как рендеринг SVG в реальном времени, делают этот инструмент по-настоящему уникальным. Мы также обсудим вопросы безопасности, которые возникают при прямом доступе к API из браузера, и дадим практические рекомендации по использованию.
01Что такое CORS Chat и зачем он нужен?
CORS Chat — это не просто еще один чат-интерфейс. Это инструмент для разработчиков, который устраняет разрыв между фронтендом (браузером) и бэкендом (LLM-сервером). Обычно, когда вы запускаете локальную LLM-модель, например, через LM Studio или Ollama, сервер по умолчанию блокирует запросы из других источников (браузеров) в целях безопасности. Это стандартное поведение CORS. Чтобы обойти это, разработчики часто пишут простые прокси-серверы на Node.js, Python или Go, которые принимают запрос от браузера, добавляют необходимые заголовки и пересылают их на локальный сервер LLM.
CORS Chat убирает необходимость в этом прокси. Если вы запустите свой LLM-сервер с включенной опцией CORS (например, флаг --cors в LM Studio), CORS Chat сможет отправлять запросы напрямую. Это упрощает архитектуру до предела: у вас есть только один компонент — браузер. Это особенно полезно для:
- Быстрого прототипирования: Не нужно настраивать серверную инфраструктуру, чтобы проверить, как модель отвечает на промпты.
- Локального тестирования: Идеально для разработчиков, работающих с моделями на своих машинах (MacBook, NVIDIA DGX Spark и т.д.).
- Обучения: Понимание того, как работают HTTP-запросы к LLM, становится более наглядным.
Инструмент поддерживает настройку пользовательских заголовков, что позволяет авторизоваться в различных API, сохранять историю диалогов локально в браузере (используя localStorage) и управлять несколькими сессиями одновременно. Это делает его мощным комбайном для работы с разными моделями и провайдерами.
02Техническая архитектура: Как это работает?
В основе CORS Chat лежит простая, но эффективная концепция. Приложение представляет собой статический веб-сайт (HTML, CSS, JavaScript), который можно запустить локально или разместить на любом статическом хостинге. Когда пользователь вводит сообщение, JavaScript-код формирует HTTP-запрос (обычно POST) к указанному endpoint'у, совместимому с OpenAI Responses API.
Ключевым моментом здесь является совместимость с OpenAI Responses API. Это относительно новый стандарт, который заменяет старый Chat Completions API. Он предлагает более структурированный подход к обработке ответов, включая поддержку сложных типов данных, инструментов (tools) и потоковой передачи (streaming). CORS Chat полностью поддерживает этот формат, что делает его актуальным даже в 2026 году, когда OpenAI активно продвигает новые стандарты.
Приложение также поддерживает потоковую передачу токенов (streaming). Это означает, что вы видите ответ модели в реальном времени, буква за буквой, а не ждете окончания генерации всего ответа. Это критически важно для UX, так как создает ощущение мгновенного отклика. Кроме того, CORS Chat умеет обрабатывать не только текстовые ответы, но и медиа-контент. Например, если модель генерирует SVG-изображения (что часто делают модели для создания диаграмм или схем), CORS Chat может прогрессивно рендерить их прямо в чате по мере поступления токенов. Это «фишка», которая выделяет этот инструмент среди других простых обертки.
03Настройка для локальных моделей: LM Studio и NVIDIA DGX Spark
Одним из главных сценариев использования CORS Chat является тестирование локально запущенных моделей. Саймон Уиллисон лично тестировал инструмент с моделью Qwen 3.8 27B, запущенной в LM Studio на MacBook Pro M5 и на NVIDIA DGX Spark. Давайте разберем, как настроить это для себя.
Шаг 1: Запуск LM Studio с CORS
LM Studio — это популярный клиент для запуска локальных LLM. По умолчанию он блокирует запросы из браузера. Чтобы CORS Chat мог работать с ним, нужно включить поддержку CORS. В интерфейсе LM Studio найдите настройки сервера и активируйте опцию --cors или аналогичную (в зависимости от версии). Это позволит серверу LM Studio принимать запросы от любого источника, включая ваш локальный CORS Chat.
Шаг 2: Настройка CORS Chat
Откройте CORS Chat в браузере. В настройках укажите URL вашего локального сервера LM Studio. Обычно это http://localhost:1234/v1/responses (или аналогичный путь, в зависимости от версии API). Также укажите параметры модели, если они требуются. Например, для Qwen 3.8 27B вы можете указать имя модели, как оно зарегистрировано в LM Studio.
Шаг 3: Тестирование
Отправьте первое сообщение. Если все настроено правильно, вы увидите ответ модели в реальном времени. Проверьте, как модель справляется с разными типами задач: генерацией текста, кода, анализом данных. Обратите внимание на скорость отклика и качество ответов.
04Работа с облачными провайдерами: OpenRouter
Помимо локальных моделей, CORS Chat отлично работает с облачными провайдерами, такими как OpenRouter. OpenRouter — это агрегатор API для различных LLM, который предоставляет единый интерфейс для доступа к сотням моделей от разных провайдеров (Anthropic, Google, Meta и др.).
Для работы с OpenRouter через CORS Chat вам понадобится API-ключ. В настройках CORS Chat укажите URL endpoint'а OpenRouter (обычно https://openrouter.ai/api/v1/responses) и добавьте ваш API-ключ в заголовки авторизации. Это позволяет использовать мощные модели, такие как Claude или Gemini, без необходимости писать серверный код для хранения ключей.
Это особенно полезно для разработчиков, которые хотят быстро протестировать разные модели в одном интерфейсе, не переключаясь между разными клиентами или библиотеками. CORS Chat становится единой точкой входа для всех ваших AI-экспериментов.
05Безопасность и ограничения
Хотя CORS Chat предлагает удобство прямого доступа, важно понимать риски, связанные с использованием API-ключей в браузере. Когда вы вводите ключ в настройки CORS Chat, он сохраняется в localStorage вашего браузера. Это означает, что любой скрипт, выполняющийся на той же странице, может получить доступ к этому ключу. Если вы используете CORS Chat на публичном компьютере или в небезопасной сети, это может быть рискованно.
Кроме того, прямое использование API-ключей в браузере может привести к их утечке, если вы случайно поделитесь своим URL или если ваш браузер будет скомпрометирован. Для продакшн-использования рекомендуется всегда использовать серверный прокси, который хранит ключи на сервере и скрывает их от клиента.
Однако для локального тестирования и разработки риски минимальны. Если вы используете CORS Chat только на своем компьютере для доступа к локальным моделям или к своим собственным API-ключам в безопасной сети, это вполне приемлемо. Просто будьте осторожны и не используйте этот инструмент для работы с критически важными данными или ключами от финансовых аккаунтов.
06Уникальная функция: Прогрессивный рендеринг SVG
Одной из самых интересных особенностей CORS Chat является его способность обрабатывать SVG-изображения в реальном времени. Когда модель генерирует SVG-код (например, для создания диаграмм, схем или простых иллюстраций), CORS Chat может парсить этот код и рендерить его прямо в чате по мере поступления токенов.
Это создает удивительный визуальный эффект: вы видите, как изображение «рисует» себя на экране, пока модель еще генерирует ответ. Это не только красиво, но и полезно для отладки. Вы можете видеть, как модель строит структуру SVG, и корректировать промпты, если что-то идет не так.
Эта функция требует, чтобы модель поддерживала генерацию SVG и чтобы CORS Chat мог правильно интерпретировать ответ. Однако для моделей, которые хорошо справляются с генерацией кода (таких как Qwen, Llama и другие), это работает отлично. Это делает CORS Chat не просто чат-интерфейсом, а мощным инструментом для визуализации результатов работы LLM.
07Сохранение и экспорт диалогов
CORS Chat сохраняет историю диалогов локально в браузере. Это означает, что вы можете закрыть вкладку, открыть ее снова и продолжить разговор с того же места. Кроме того, вы можете экспортировать диалоги в формате JSON. Это полезно для:
- Резервного копирования: Сохраните важные диалоги, чтобы не потерять их.
- Анализа: Экспортируйте диалоги для последующего анализа в других инструментах.
- Демонстрации: Покажите результаты работы модели коллегам или клиентам.
Экспорт в JSON позволяет легко интегрировать CORS Chat с другими инструментами. Вы можете написать скрипт, который будет читать этот JSON и автоматически тестировать модель на разных промптах. Это делает CORS Chat частью более широкого рабочего процесса разработки AI-приложений.
08Что это значит на практике
CORS Chat — это не просто еще один чат-бот. Это инструмент, который меняет подход к тестированию и разработке с LLM. Он устраняет необходимость в серверной инфраструктуре для простых задач, позволяя разработчикам сосредоточиться на самом важном — на качестве ответов модели и эффективности промптов.
Для локальных разработчиков это означает возможность быстро тестировать новые модели, такие как Qwen 3.8 27B, без настройки сложных серверов. Для облачных пользователей это означает удобный способ доступа к множеству моделей через единый интерфейс. А для всех остальных это пример того, как можно использовать современные веб-технологии для упрощения работы с AI.
Если вы работаете с LLM, особенно локально, обязательно попробуйте CORS Chat. Он может сэкономить вам часы настройки и дать вам более прямой контроль над процессом взаимодействия с моделями. И помните: безопасность прежде всего, но для локального тестирования этот инструмент является отличным выбором.
Источник: Simon Willison ↗