Детальный промпт для AI-агента
Создание «AI Browser Shell» — Специализированной Chromium-оболочки
Назначение этого документа: скопировать целиком и вставить в AI-агент
(Cursor, Claude, Gemini, Copilot Workspace и т.д.) как стартовую инструкцию
для пошаговой реализации проекта.
СИСТЕМНЫЙ ПРОМПТ (SYSTEM)
| Ты — senior full-stack инженер и системный архитектор с глубокой экспертизой в:
- Сборка и кастомизация Chromium (GN/Ninja, C++ уровень chrome/browser/)
- Electron / Tauri для десктопных приложений
- Node.js / TypeScript бэкенд
- REST API интеграции (OpenAI-compatible, Anthropic, Google AI)
- Linux-администрирование (Debian, systemd, nginx)
- Удалённый доступ (Apache Guacamole, noVNC, X11)
- Безопасность (TLS, шифрование ключей, sandbox)
Ты работаешь поэтапно, каждый шаг подтверждаешь с пользователем перед переходом
к следующему. Код пишешь production-ready, с обработкой ошибок и комментариями.
Предпочитаешь TypeScript для нового кода, C++ только для модификаций ядра Chromium.
|
ОСНОВНОЙ ПРОМПТ (USER)
КОНТЕКСТ ПРОЕКТА
Мне нужно создать специализированную браузерную оболочку «AI Browser Shell» — кастомизированный Chromium-браузер, заточенный исключительно под работу с AI-агентами (Google Gemini, Anthropic Claude, DeepSeek). Это локальный инструмент в духе Cursor IDE, но в форм-факторе браузера, с удалённым доступом к серверу на минимизированной Debian.
Ключевая фича: перед отправкой запроса в AI, встроенный сервис переводит мой русскоязычный текст на английский — это экономит токены, т.к. кириллица потребляет в ~1.5-2x больше токенов чем латиница.
АРХИТЕКТУРА (следуй ей строго)
| ПОЛЬЗОВАТЕЛЬ (RU-ввод)
│
▼
┌─────────────────────────────────────────────┐
│ AI BROWSER SHELL (Chromium Fork) │
│ │
│ [1] UI Layer ──► [2] Translation Engine │
│ │ │
│ ▼ │
│ [3] AI Router │
│ ┌────┼────┐ │
│ ▼ ▼ ▼ │
│ Gemini Claude DeepSeek │
│ │
│ [4] Token Dashboard │
│ [5] Config & Key Manager │
└─────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────┐
│ СЕРВЕР: Debian 12 Minimal + Guacamole │
│ (удалённый доступ через HTML5) │
└─────────────────────────────────────────────┘
|
ЗАДАНИЕ: ПОШАГОВАЯ РЕАЛИЗАЦИЯ
Реализуй проект в 4 фазах. После каждой фазы — контрольная точка.
Каждый файл сопровождай кратким комментарием о его назначении.
ФАЗА 1: ФУНДАМЕНТ — Chromium Fork + базовый UI
Цель: получить собирающийся кастомный Chromium с AI-sidebar.
Шаг 1.1 — Стратегический выбор базы
Предложи и обоснуй выбор между двумя подходами:
| Подход |
Описание |
| A) Полный форк Chromium |
Клон chromium/chromium с GitHub, модификация на уровне C++, удаление компонентов, сборка через GN+Ninja |
| B) Electron/Tauri обёртка |
Приложение поверх Chromium-рантайма, вся логика на TypeScript, быстрый старт |
Для подхода A (основной):
- Подготовь скрипт
setup_build_env.sh для настройки сборочного окружения на Ubuntu/Debian
- Создай конфиг GN
args.gn с отключением: PDF viewer, media codecs (кроме базовых), Google sync, crash reporter, print preview, WebStore
- Подготовь патч для добавления AI sidebar в
chrome/browser/ui/views/side_panel/
Для подхода B (запасной / MVP):
- Инициализируй Electron-проект с TypeScript
- Структура:
| ai-browser-shell/
├── src/
│ ├── main/ # Electron main process
│ │ ├── main.ts
│ │ ├── ipc-handlers.ts
│ │ └── tray.ts
│ ├── renderer/ # UI (React/Svelte/Vanilla)
│ │ ├── App.tsx
│ │ ├── components/
│ │ │ ├── Sidebar.tsx # AI чат-панель
│ │ │ ├── ProviderSwitch.tsx # Переключатель AI
│ │ │ ├── ChatMessage.tsx # Сообщение в чате
│ │ │ ├── TokenCounter.tsx # Счётчик токенов
│ │ │ └── Settings.tsx # Настройки
│ │ └── styles/
│ ├── services/
│ │ ├── translation/ # Модуль перевода
│ │ ├── providers/ # AI-адаптеры
│ │ ├── storage/ # Хранилище (SQLite)
│ │ └── config/ # Конфигурация
│ └── shared/ # Общие типы и утилиты
│ └── types.ts
├── assets/
├── scripts/ # Скрипты сборки/деплоя
├── config/
│ └── default.json # Конфигурация по умолчанию
├── package.json
├── tsconfig.json
├── electron-builder.yml
└── README.md
|
Шаг 1.2 — Базовый UI (AI Sidebar)
Создай главное окно со следующей компоновкой:
| ┌─────────────────────────────────────────────────────────────┐
│ [◄] [►] [↻] [URL bar .........................] [⚙] [AI]│ ← Toolbar
├────────────────────────────────────────────┬────────────────┤
│ │ AI SIDEBAR │
│ │ │
│ WEB CONTENT AREA │ ┌────────────┐ │
│ │ │ [Gemini ▼] │ │
│ (основной браузер) │ ├────────────┤ │
│ │ │ │ │
│ │ │ Чат с AI │ │
│ │ │ (история │ │
│ │ │ сообщений)│ │
│ │ │ │ │
│ │ │ │ │
│ │ ├────────────┤ │
│ │ │ [RU→EN: ON]│ │
│ │ │ Tokens: 245│ │
│ │ ├────────────┤ │
│ │ │ [Ваш текст]│ │
│ │ │ [ >>>> ] │ │
│ │ └────────────┘ │
└────────────────────────────────────────────┴────────────────┘
|
Требования к sidebar:
- Ширина: 380px по умолчанию, resizable
- Тёмная тема (фон:
#1e1e2e, текст: #cdd6f4, акцент: #89b4fa)
- Dropdown вверху для выбора провайдера: Gemini / Claude / DeepSeek
- Область чата: markdown-рендеринг, подсветка кода (highlight.js или shiki)
- Статусная строка: индикатор перевода ON/OFF, счётчик токенов
- Поле ввода: textarea с автовысотой, отправка по Ctrl+Enter
- Кнопка отправки
ФАЗА 2: TRANSLATION ENGINE + AI ADAPTERS
Цель: рабочий пайплайн: ввод RU → перевод EN → отправка в AI → получение ответа.
Шаг 2.1 — Translation Engine
Реализуй модуль src/services/translation/ со следующей логикой:
| // Требуемый интерфейс
interface TranslationEngine {
translate(text: string, from: string, to: string): Promise<string>;
detectLanguage(text: string): Promise<string>;
isEnabled(): boolean;
getStats(): { cached: number; translated: number; saved_tokens: number };
}
|
Логика работы:
- Получить текст от пользователя
- Определить язык (
detectLanguage):
- Если уже EN → пропустить перевод, отправить как есть
- Если RU → перевести
- КРИТИЧНО: НЕ переводить содержимое блоков кода (
...), inline-код (...), URL-адреса и имена переменных/функций
- Перевести через бэкенд (приоритет):
- Проверить LRU-кэш (макс. 10,000 записей)
- Если нет в кэше → вызвать API перевода
- Сохранить в кэш
- Вернуть переведённый текст
Бэкенды перевода (реализуй все три, переключаемые в конфиге):
| // Бэкенд 1: LibreTranslate (self-hosted, рекомендуемый)
// POST http://localhost:5000/translate
// { q: "текст", source: "ru", target: "en" }
// Бэкенд 2: Google Translate free endpoint
// GET https://translate.googleapis.com/translate_a/single
// ?client=gtx&sl=ru&tl=en&dt=t&q=текст
// Бэкенд 3: Google Cloud Translation API (платный)
// POST https://translation.googleapis.com/language/translate/v2
// Authorization: Bearer API_KEY
|
Fallback-логика: LibreTranslate → Google Free → Google Paid.
При ошибке — отправить оригинальный текст без перевода (не блокировать пользователя).
Шаг 2.2 — AI Provider Adapters
Реализуй src/services/providers/ с единым интерфейсом:
| interface AIProvider {
readonly name: string;
readonly id: 'gemini' | 'claude' | 'deepseek';
sendMessage(params: {
message: string;
systemPrompt?: string;
history?: ChatMessage[];
options?: ModelOptions;
}): AsyncGenerator<string>; // streaming через yield
countTokens(text: string): Promise<number>;
validateKey(): Promise<boolean>;
getModels(): Promise<ModelInfo[]>;
}
interface ModelOptions {
model?: string;
temperature?: number; // 0.0 - 2.0
maxTokens?: number; // макс. токенов в ответе
topP?: number;
}
interface ChatMessage {
role: 'user' | 'assistant' | 'system';
content: string;
timestamp: number;
tokens?: number;
originalLang?: string; // 'ru' если был переведён
originalText?: string; // оригинал до перевода
}
|
Реализуй три адаптера:
Адаптер Gemini:
| Endpoint: https://generativelanguage.googleapis.com/v1beta/models/{model}:streamGenerateContent
Auth: ?key=API_KEY
Модели: gemini-2.0-flash (default), gemini-2.0-pro
Streaming: SSE (server-sent events)
|
Адаптер Claude:
| Endpoint: https://api.anthropic.com/v1/messages
Auth: x-api-key header
Модели: claude-sonnet-4-6 (default), claude-haiku-4-5
Streaming: SSE с event: content_block_delta
Обязательные headers: anthropic-version: 2023-06-01
|
Адаптер DeepSeek:
| Endpoint: https://api.deepseek.com/v1/chat/completions
Auth: Bearer token (OpenAI-compatible)
Модели: deepseek-chat (default), deepseek-reasoner
Streaming: SSE (OpenAI-совместимый формат)
|
Шаг 2.3 — Полный пайплайн (связка перевода и AI)
Свяжи всё в единый flow внутри src/services/chat-pipeline.ts:
| userInput(RU)
│
├─► translationEngine.detectLanguage()
│ └─► "ru" ──► translationEngine.translate(text, "ru", "en")
│ └─► translatedText(EN)
│
├─► tokenCounter.count(translatedText)
│ └─► обновить UI: "Tokens: XXX"
│
├─► selectedProvider.sendMessage({ message: translatedText, ... })
│ └─► streaming chunks ──► рендерить в UI посимвольно
│
├─► tokenCounter.count(fullResponse)
│ └─► обновить UI: "Tokens: XXX (total session: YYYY)"
│
└─► [опционально] translationEngine.translate(response, "en", "ru")
└─► показать перевод ответа
|
ФАЗА 3: ХРАНИЛИЩЕ, БЕЗОПАСНОСТЬ, DASHBOARD
Цель: персистентность данных, безопасное хранение ключей, статистика.
Шаг 3.1 — SQLite хранилище
База данных ~/.ai-browser-shell/data.db:
| -- Таблица сессий (диалогов)
CREATE TABLE sessions (
id TEXT PRIMARY KEY, -- UUID
provider TEXT NOT NULL, -- 'gemini' | 'claude' | 'deepseek'
model TEXT NOT NULL,
title TEXT, -- автогенерация из первого сообщения
created_at INTEGER NOT NULL, -- unix timestamp
updated_at INTEGER NOT NULL
);
-- Таблица сообщений
CREATE TABLE messages (
id TEXT PRIMARY KEY,
session_id TEXT NOT NULL REFERENCES sessions(id),
role TEXT NOT NULL, -- 'user' | 'assistant' | 'system'
content TEXT NOT NULL, -- текст (EN, отправленный в AI)
original_text TEXT, -- оригинал (RU, до перевода)
tokens_in INTEGER DEFAULT 0,
tokens_out INTEGER DEFAULT 0,
created_at INTEGER NOT NULL
);
-- Таблица статистики токенов
CREATE TABLE token_stats (
id INTEGER PRIMARY KEY AUTOINCREMENT,
provider TEXT NOT NULL,
model TEXT NOT NULL,
tokens_in INTEGER NOT NULL,
tokens_out INTEGER NOT NULL,
estimated_cost_usd REAL, -- примерная стоимость
date TEXT NOT NULL -- 'YYYY-MM-DD'
);
-- Кэш переводов
CREATE TABLE translation_cache (
hash TEXT PRIMARY KEY, -- SHA-256 от source_text
source_text TEXT NOT NULL,
translated TEXT NOT NULL,
source_lang TEXT NOT NULL,
target_lang TEXT NOT NULL,
used_at INTEGER NOT NULL -- для LRU-эвикции
);
|
Шаг 3.2 — Шифрование API-ключей
Реализуй src/services/storage/keychain.ts:
- Используй
keytar (npm) для хранения ключей в OS keyring (Windows Credential Vault / macOS Keychain / Linux Secret Service)
- Fallback: AES-256-GCM шифрование файла
~/.ai-browser-shell/keys.enc с мастер-паролем
- НИКОГДА не хранить ключи в plaintext
- При первом запуске — запросить у пользователя API-ключи через UI-мастер настройки
Шаг 3.3 — Token Dashboard (New Tab Page)
При открытии новой вкладки показывать dashboard:
| ┌──────────────────────────────────────────────────────────────────┐
│ AI Browser Shell Dashboard │
├──────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ Сегодня ──────────┐ ┌─ Всего ───────────┐ ┌─ Экономия ─┐│
│ │ Запросов: 47 │ │ Запросов: 1,284 │ │ Токенов ││
│ │ Токенов: 12,450 │ │ Токенов: 342,100 │ │ сэкономле-││
│ │ ~$0.18 │ │ ~$4.80 │ │ но за счёт││
│ └─────────────────────┘ └────────────────────┘ │ перевода: ││
│ │ ~98,400 ││
│ ┌─ Использование по провайдерам (за 7 дней) ───┐ │ (~$1.40) ││
│ │ │ └───────────┘│
│ │ Claude ████████████████████░░░ 68% │ │
│ │ Gemini ██████░░░░░░░░░░░░░░░░ 24% │ │
│ │ DeepSeek ██░░░░░░░░░░░░░░░░░░░░ 8% │ │
│ │ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌─ Последние сессии ────────────────────────────────────────┐ │
│ │ ● "Рефакторинг auth модуля" Claude 2 часа назад │ │
│ │ ● "SQL оптимизация запросов" Gemini 5 часов назад │ │
│ │ ● "Код ревью API endpoints" DeepSeek вчера │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ [Начать новый чат] │
└──────────────────────────────────────────────────────────────────┘
|
ФАЗА 4: УДАЛЁННЫЙ ДОСТУП + ДЕПЛОЙ НА DEBIAN
Цель: развернуть всё на минималистичном Debian-сервере с HTML5-доступом.
Шаг 4.1 — Скрипт подготовки Debian
Создай scripts/setup-debian-server.sh:
| #!/bin/bash
# Назначение: превращение чистого Debian 12 в минимальный рабочий сервер
# для AI Browser Shell с удалённым доступом
#
# Запуск: sudo bash setup-debian-server.sh
# --- Этапы: ---
# 1. Обновление системы
# 2. Установка минимального GUI (Xfce4 core / Openbox)
# 3. Установка X11, dbus, fonts
# 4. Установка и настройка Nginx (reverse proxy + SSL)
# 5. Установка Apache Guacamole (Docker compose)
# 6. Установка Node.js (LTS) для AI Browser Shell бэкенда
# 7. Установка AI Browser Shell
# 8. Настройка автозапуска (systemd service)
# 9. Настройка firewall (ufw: 22, 80, 443)
# 10. Установка fail2ban
# 11. Удаление/отключение лишнего: bluetooth, cups, avahi, snap
# 12. Генерация SSL-сертификата (Let's Encrypt / self-signed)
|
Шаг 4.2 — Docker Compose для Guacamole
Создай deploy/docker-compose.yml:
| # Apache Guacamole — HTML5 удалённый десктоп
# Позволяет подключаться к серверу через обычный браузер
# без установки VNC/RDP клиента
#
# Компоненты:
# guacd — сервер-демон (протоколы VNC/RDP/SSH)
# guacamole — веб-приложение (tomcat)
# postgres — хранилище пользователей и подключений
# nginx — reverse proxy + SSL termination
|
Шаг 4.3 — Systemd сервис
Создай deploy/ai-browser-shell.service:
- Автозапуск приложения при старте системы
- Перезапуск при падении (Restart=on-failure)
- Запуск от непривилегированного пользователя
- Ограничение ресурсов через cgroups (MemoryMax=2G)
Шаг 4.4 — Nginx конфигурация
Создай deploy/nginx/ai-shell.conf:
- HTTPS на 443 (SSL cert от Let's Encrypt)
- Проксирование
/guacamole/ → Guacamole на :8080
- Проксирование
/api/ → внутренний API на :3000 (если есть)
- WebSocket support для Guacamole
- Security headers (HSTS, CSP, X-Frame-Options)
КОНФИГУРАЦИЯ ПО УМОЛЧАНИЮ
Используй эту структуру для файла config/default.json:
| {
"app": {
"name": "AI Browser Shell",
"version": "1.0.0",
"theme": "dark",
"language": "ru",
"sidebar_width": 380,
"sidebar_position": "right"
},
"translation": {
"enabled": true,
"source_lang": "auto",
"target_lang": "en",
"translate_responses": false,
"skip_code_blocks": true,
"backend_priority": ["libretranslate", "google_free", "google_cloud"],
"cache_max_entries": 10000,
"libretranslate": {
"url": "http://localhost:5000"
}
},
"providers": {
"default": "claude",
"gemini": {
"model": "gemini-2.0-flash",
"max_tokens": 8192,
"temperature": 0.7
},
"claude": {
"model": "claude-sonnet-4-6",
"max_tokens": 8192,
"temperature": 0.7
},
"deepseek": {
"model": "deepseek-chat",
"max_tokens": 8192,
"temperature": 0.7
}
},
"shortcuts": {
"send_message": "Ctrl+Enter",
"switch_provider": "Ctrl+Shift+P",
"toggle_sidebar": "Ctrl+B",
"new_session": "Ctrl+Shift+N",
"toggle_translation": "Ctrl+Shift+T"
}
}
|
ТРЕБОВАНИЯ К КАЧЕСТВУ КОДА
- TypeScript strict mode — никаких
any, все типы явные
- Обработка ошибок — каждый внешний вызов (API, файлы, сеть) обёрнут в try/catch с информативными сообщениями
- Логирование — winston или pino, уровни: error/warn/info/debug, ротация логов
- Тесты — unit-тесты для translation engine и provider adapters (vitest / jest)
- Без хардкода — все конфигурируемые параметры в
config/default.json
- Graceful degradation — если перевод недоступен → отправлять оригинал; если провайдер недоступен → показать ошибку, предложить переключиться
ВАЖНЫЕ ОГРАНИЧЕНИЯ
- НЕ использовать платные API без явного подтверждения пользователя
- НЕ хранить API-ключи в plaintext нигде (ни в коде, ни в конфигах, ни в логах)
- НЕ отправлять телеметрию или аналитику куда-либо
- НЕ включать автообновления без согласия пользователя
- НЕ делать лишних сетевых запросов (кэшировать агрессивно)
- Весь код — open-source ready (MIT лицензия, без проприетарных зависимостей)
ПОРЯДОК ДЕЙСТВИЙ
Начни реализацию в таком порядке:
| [1] Выбор подхода (Chromium fork vs Electron) — обоснуй
│
▼
[2] Инициализация проекта, структура, package.json, tsconfig
│
▼
[3] UI: главное окно + sidebar (без логики, только вёрстка)
│
▼
[4] Translation Engine (все 3 бэкенда + кэш + skip code blocks)
│
▼
[5] AI Adapters (Gemini → Claude → DeepSeek) + streaming
│
▼
[6] Связка pipeline: ввод → перевод → AI → отображение
│
▼
[7] SQLite хранилище + история сессий
│
▼
[8] Шифрование ключей (keytar / AES fallback)
│
▼
[9] Token Dashboard (New Tab Page)
│
▼
[10] Скрипт деплоя на Debian + Guacamole + Nginx + systemd
│
▼
[11] Тестирование и документация
|
На каждом шаге:
- Покажи план файлов, которые будешь создавать/менять
- Напиши код
- Объясни, как тестировать этот шаг
- Дождись моего подтверждения перед переходом к следующему шагу
Начинай с шага [1].