MCP Pointer
MCP-сервер и расширение Chrome: выбираете элемент DOM в браузере по Option+клику, агент видит его текст, стили и селектор
Средний риск
Средний уровень ставим, когда инструмент запускает код, ходит в сеть или читает файлы проекта. Перед установкой посмотрите, что именно он делает.
Почему такой уровень
- Читает содержимое и стили страниц в браузере и передает их агенту
- Держит локальный сервер и WebSocket-связь с расширением
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/mcp-pointerОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Выполните в терминале
claude mcp add --transport stdio mcp-pointer -- npx -y @mcp-pointer/server config claudeИли добавьте в файл .mcp.json, в проекте
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Добавьте в файл ~/.cursor/mcp.json, для всех проектов
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Для одного проекта тот же блок кладут в .cursor/mcp.json.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Выполните в терминале
code --add-mcp '{"name":"mcp-pointer","type":"stdio","command":"npx","args":["-y","@mcp-pointer/server","config","claude"]}'Или добавьте в файл .vscode/mcp.json, в проекте
{
"servers": {
"mcp-pointer": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа servers.
Выполните в терминале
codex mcp add mcp-pointer -- npx -y @mcp-pointer/server config claudeИли добавьте в файл ~/.codex/config.toml, для всех проектов
[mcp_servers.mcp-pointer]
command = "npx"
args = ["-y", "@mcp-pointer/server", "config", "claude"]Если файл уже есть, допишите блок в конец.
Добавьте в файл ~/.gemini/settings.json, для всех проектов
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Добавьте в файл ~/.config/devin/mcp_config.json, для всех проектов
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. В легаси Cascade конфиг MCP лежит в ~/.codeium/windsurf/mcp_config.json.
Бывший Windsurf.
Добавьте в файл cline_mcp_settings.json, для всех проектов
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Файл настроек открывается в Cline: вкладка MCP Servers, кнопка Configure MCP Servers.
Добавьте в файл .roo/mcp.json, в проекте
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Форк Roo Code, папки .roo те же.
Добавьте в файл opencode.json, в проекте
{
"mcp": {
"mcp-pointer": {
"type": "local",
"command": [
"npx",
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcp.
Добавьте в файл ~/.config/zed/settings.json, для всех проектов
{
"context_servers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа context_servers.
Добавьте в файл .codeassistant/mcp.json, в проекте
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server",
"config",
"claude"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Настрой MCP-сервер: npx -y @mcp-pointer/server config claude, затем перезапусти агента. Поставь расширение MCP Pointer из Chrome Web Store.
Другие способы из описания автора
npx -y @mcp-pointer/server config claudeНастраивает MCP для Claude Code. После этого перезапустите агента.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
MCP Pointer связывает браузер и агента кодинга через MCP. Расширение Chrome дает выбрать любой элемент страницы по Option+клику, а локальный сервер передает агенту его содержимое: текст, CSS-классы, атрибуты, положение и стили. Можно попросить только видимый текст, убрать текст совсем или менять уровень детализации стилей на каждый вызов. Есть экспериментальное определение React-компонентов по Fiber с именем и файлом-источником. Связь идет по WebSocket, работает с Claude Code, Cursor и Windsurf.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые правят интерфейс вместе с агентом кодинга.
Подходит, если
- Нужно показать агенту конкретный элемент страницы, а не описывать его словами
- Правите верстку или стиль элемента вместе с агентом
- Нужен селектор, классы и стили выбранного элемента
Не подходит, если
- Не используете браузер Chrome и расширение
- Нужна автоматизация действий в браузере, а не передача контекста элемента
Пример запроса к агенту
Я выбрал элемент в браузере, поправь у него отступы и выровняй по сеткеОграничения
Нужно расширение Chrome из Chrome Web Store или собранное вручную, плюс локальный MCP-сервер на Node.js. После настройки агента надо перезапустить. Определение React-компонентов помечено как экспериментальное. Инструмент локальный, внешних вызовов у него нет.
Как отключить. Уберите mcp-pointer из конфигурации MCP агента и удалите расширение из Chrome.
MCP
- Транспорт
- stdio
- Авторизация
- не нужна
Проверка безопасности
- Читает содержимое и стили страниц в браузере и передает их агенту
- Держит локальный сервер и WebSocket-связь с расширением
Коротко о README
README описывает локальный инструмент из двух частей: MCP-сервер на Node.js и расширение Chrome. Расширение ловит выбор элемента по Option+клику, сервер отдает агенту текст, классы, атрибуты, положение и стили через MCP. Детализацию можно менять на каждый вызов, есть экспериментальное определение React-компонентов. Расширение ставится из Chrome Web Store, сервер настраивается одной командой под Claude Code, Cursor и Windsurf. Лицензия MIT.
Частые вопросы
Как выбрать элемент?
Зажмите Option (Alt на Windows) и кликните по элементу на странице, агент получит его текст, стили, селектор и позицию.
Нужны ли ключи или облако?
Нет. Сервер локальный, связь с браузером идет по WebSocket, внешних API у инструмента нет.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой