Open Components — MCP-сервер для Claude Code: правила UI-компонентов
Отдаёт агенту контракты и правила UI-компонентов по разделам, чтобы код соответствовал стандарту UX, DX и AX. Подключается без входа в аккаунт.
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcpЧто делает Open Components
Open Components — это стандарт UI-компонентов из трёх слоёв: пользовательский опыт, опыт разработчика и опыт агента. MCP-сервер отдаёт агенту контракты, каждое правило и документацию по секциям, как инструменты. Полезно, когда компоненты пишет не человек, а модель, и нужно, чтобы результат держал ту же планку.
Сервер живёт по адресу https://mcp.opencomponents.dev/mcp, работает бесплатно и без входа. Документация каждой страницы выложена ещё и в markdown: https://opencomponents.dev/raw/<path>.md для страницы, https://opencomponents.dev/raw/<path>.yaml для контракта со всеми пунктами чек-листа. Схема https://opencomponents.dev/schemas/contract.json описывает формат контрактов, а https://opencomponents.dev/llms-full.txt собирает весь стандарт в один файл — на случай, когда агенту нужно всё сразу.
Есть и агентский плагин в plugins/open-components: он подключает тот же сервер и добавляет скиллы для сборки и проверки компонентов. Плагин сделан в формате Agent Plugin, поэтому работает в VS Code, GitHub Copilot, Cursor, Codex и Claude. Если нужен только доступ к правилам, хватит сервера.
Какие задачи решает
- проверить компонент по чек-листу стандарта
- собрать кнопку или поле ввода с предсказуемым поведением
- дать агенту контракт компонента вместо длинной страницы документации
- сверить API нового компонента с уже принятым в проекте
- подтянуть правила доступности и состояний в код, который пишет модель
Примеры запросов агенту
- Подключи MCP-сервер open-components и покажи правила для компонента Button
- Проверь мой
Button.tsxпо контракту изhttps://opencomponents.dev/raw/docs/components/button.yaml - Собери компонент выбора даты по стандарту Open Components
Как установить Open Components
Командой платформы: удалённый сервер
claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcpКомандой платформы: удалённый сервер
codex mcp add open-components --url https://mcp.opencomponents.dev/mcpФайл настроек
{
"mcpServers": {
"open-components": {
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}Файл настроек
{
"servers": {
"open-components": {
"type": "http",
"url": "https://mcp.opencomponents.dev/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http open-components https://mcp.opencomponents.dev/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Open Components
Как установить Open Components в Claude Code?
Выполните claude mcp add --transport http open-components https://mcp.opencomponents.dev/mcp. Сервер подключится по HTTP, регистрация не нужна.
Что делает Open Components?
Отдаёт агенту контракты, правила и документацию стандарта UI-компонентов по секциям. Агент читает их как инструменты и сверяет с ними свой код.
Чем MCP-сервер отличается от агентского плагина?
Сервер даёт доступ к правилам и контрактам. Плагин в plugins/open-components подключает тот же сервер и добавляет скиллы, которые собирают и проверяют компоненты по стандарту.
