Своя IDE за 30 минут: собираем браузерный редактор с Claude и Google AI Studio без единой строчки кода

Зачем собирать свою IDE в 2026 году

Открываешь очередной AI-редактор — Cursor, Warp, Zed. И видишь одно и то же: подписка $20 в месяц, облачная обработка кода, ограничения на количество запросов. Твой код улетает в неизвестном направлении, а ты платишь за эту привилегию.

Проблема не в деньгах. Проблема в зависимости. Когда GitHub Copilot глючит — ты не можешь работать. Когда Claude Code ограничивает запросы — ты стоишь в очереди. Когда интернет отключается — ты беспомощен.

А что если собрать свою IDE из готовых компонентов? Не писать код, а склеить работающие инструменты. Браузерный редактор кода + SSH-клиент + два AI-помощника. Все локально, все под контролем.

Что получится в итоге

Представь веб-страницу, которая умеет:

• Открывать и редактировать файлы через Monaco Editor (тот же движок, что в VS Code)
• Подключаться к серверам по SSH прямо из браузера
• Общаться с Claude 3.5 Sonnet через официальный API
• Использовать Google AI Studio для работы с Gemini 2.0 Flash
• Переключаться между моделями одной кнопкой
• Работать полностью в браузере без установки

Звучит как сложный проект? На самом деле все компоненты уже написаны. Нам нужно только правильно их соединить.

1 Выбираем движок редактора

Monaco Editor — не просто "движок из VS Code". Это полноценная IDE в браузере. Подсветка синтаксиса для 50+ языков, автодополнение, линтеры, мультикурсор. И все это работает без установки.

Есть три способа получить Monaco:

1. CDN версия — подключаем через script тег, работает из коробки
2. npm пакет — больше контроля, но нужен сборщик
3. Готовые обертки — типа monaco-editor-wrapper

Мы выбираем первый вариант. Почему? Потому что нам нужен результат за 30 минут, а не проект на год.

<!-- Подключаем Monaco Editor -->
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>

2 Добавляем SSH прямо в браузер

Тебе не нужно устанавливать Putty или OpenSSH. xterm.js + WebSocket = полноценный SSH-клиент в браузере. Работает через сервер-прокси на Node.js.

Схема простая:

• Браузер подключается к твоему серверу по WebSocket
• Сервер на Node.js устанавливает SSH соединение с целевым хостом
• Все нажатия клавиш передаются туда-обратно

// Пример серверной части (Node.js)
const WebSocket = require('ws');
const { Client } = require('ssh2');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  const conn = new Client();
  
  ws.on('message', (data) => {
    // Передаем данные в SSH соединение
    conn.write(data);
  });
  
  conn.on('ready', () => {
    conn.shell((err, stream) => {
      if (err) throw err;
      
      stream.on('data', (data) => {
        // Отправляем вывод обратно в браузер
        ws.send(data.toString());
      });
      
      stream.on('close', () => {
        ws.close();
      });
    });
  });
  
  conn.connect({
    host: 'ваш-сервер.com',
    username: 'user',
    password: 'password'
  });
});

В браузере используем xterm.js:

<div id="terminal"></div>
<script src="https://unpkg.com/xterm@5.3.0/lib/xterm.js"></script>
<script>
  const term = new Terminal();
  term.open(document.getElementById('terminal'));
  
  const ws = new WebSocket('ws://localhost:8080');
  ws.onmessage = (event) => {
    term.write(event.data);
  };
  
  term.onData((data) => {
    ws.send(data);
  });
</script>

Да, это работает. Нет, это не магия. Это обычный WebSocket прокси.

3 Интегрируем Claude API без танцев с бубном

Anthropic наконец-то сделали нормальный API. На февраль 2026 года Claude 3.5 Sonnet — лучший выбор для работы с кодом. Быстрее, умнее, дешевле чем 3.0 Opus.

Получаешь API ключ в консоли Anthropic. Копируешь. Вставляешь.

// Простейшая интеграция Claude
async function askClaude(prompt, code) {
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': 'твой-ключ',
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-3-5-sonnet-20241022',
      max_tokens: 4000,
      messages: [
        {
          role: 'user',
          content: `Код: ${code}\n\nЗадание: ${prompt}`
        }
      ]
    })
  });
  
  const data = await response.json();
  return data.content[0].text;
}

Вот и вся интеграция. Никаких сложных SDK, никаких абстракций. Прямой HTTP запрос.

4 Подключаем Google AI Studio для Gemini 2.0

Google AI Studio — это не просто "еще один чат". Это швейцарский нож для разработчика на февраль 2026 года:

• Gemini 2.0 Flash Thinking — специально обучен на цепочках рассуждений
• Бесплатно до 60 запросов в минуту (на февраль 2026)
• Поддержка файлов: загружаешь код, получаешь анализ
• Встроенный поиск по Google (опционально)

Интеграция еще проще чем с Claude:

// Используем официальный Google AI JavaScript SDK
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI("ВАШ_API_КЛЮЧ");
const model = genAI.getGenerativeModel({ 
  model: "gemini-2.0-flash-thinking",
  systemInstruction: "Ты опытный разработчик, помогаешь писать код."
});

async function askGemini(prompt) {
  const result = await model.generateContent(prompt);
  return result.response.text();
}

Ключ получаешь в Google AI Studio. Бесплатно. Навсегда (пока что).

5 Собираем интерфейс: где тут кнопки?

Вот самая хитрая часть. Нужно сделать так, чтобы:

1. Редактор кода занимал левую половину
2. Терминал был справа внизу
3. Чат с AI — справа вверху
4. Кнопка переключения между Claude и Gemini — сверху

CSS Grid решает все проблемы:

<div class="container">
  <div class="header">
    <button id="claude-btn">Claude 3.5</button>
    <button id="gemini-btn">Gemini 2.0</button>
  </div>
  
  <div class="main">
    <div class="editor" id="editor-container"></div>
    
    <div class="sidebar">
      <div class="chat" id="chat-container"></div>
      <div class="terminal" id="terminal-container"></div>
    </div>
  </div>
</div>

<style>
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

.main {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 10px;
}

.sidebar {
  display: grid;
  grid-template-rows: 1fr 300px;
  gap: 10px;
}

.editor, .chat, .terminal {
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

Это базовая структура. Добавляешь кнопки "Отправить", поле ввода, историю сообщений — и готово.

Три ошибки, которые сломают все

Видел десятки таких проектов. Все падают на одних и тех же граблях.

Прокси для API ключей: 15 строк кода

Вот минимальный сервер на Node.js, который прячет ключи:

// server.js
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.use(express.json());

app.post('/api/claude', async (req, res) => {
  const { prompt } = req.body;
  
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.CLAUDE_API_KEY, // ключ в переменных окружения
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-3-5-sonnet-20241022',
      messages: [{ role: 'user', content: prompt }]
    })
  });
  
  const data = await response.json();
  res.json(data);
});

app.listen(3000, () => {
  console.log('Прокси сервер запущен');
});

Теперь фронтенд шлет запросы на localhost:3000/api/claude, а ключ безопасно лежит в .env файле.

Зачем это все, если есть Cursor?

Хороший вопрос. Cursor — отличный инструмент. Warp — прекрасный терминал. Claude Code — умный помощник.

Но у них есть общая проблема: они хотят быть всем. А твоя IDE — решает конкретные задачи:

• Быстрое прототипирование — открыл браузер, начал писать
• Работа с удаленными серверами — один интерфейс для локального и удаленного кода
• Сравнение моделей — одна и та же задача для Claude и Gemini
• Нулевая установка — поделился ссылкой с коллегой

Кстати, если интересно сравнение готовых решений, у нас есть подробный разбор в статье "Cursor против Warp против Claude Code".

Что делать дальше: от прототипа к продакшену

У тебя работает базовая версия. Что теперь?

Добавь эти три фичи

1. Сохранение сессий — LocalStorage для кода и истории чата
2. Шаблоны проектов — кнопка "Создать React проект" генерирует заготовку
3. Горячие клавиши — Ctrl+Enter для запуска кода в терминале

Оптимизируй то, что бесит

Monaco Editor грузит языковые пакеты лениво — это хорошо. Но можно лучше:

// Загружаем только нужные языки
require.config({
  paths: { vs: 'https://unpkg.com/monaco-editor@0.45.0/min/vs' }
});

require(['vs/editor/editor.main'], () => {
  // Только JavaScript и Python для начала
  monaco.languages.register({ id: 'javascript' });
  monaco.languages.register({ id: 'python' });
  
  // Остальные языки грузим по требованию
  document.getElementById('add-go-btn').onclick = () => {
    monaco.languages.register({ id: 'go' });
  };
});

Сделай это расширением браузера

manifest.json + папка с файлами = расширение Chrome. Теперь твоя IDE открывается по клику на иконку.

Финальный совет: не переусердствуй

Видел как люди тратят месяцы на кастомизацию Monaco Editor. Добавляют темы, плагины, интеграции. А потом понимают — они просто воссоздали VS Code в браузере.

Твоя цель не идеальная IDE. Твоя цель — инструмент, который решает конкретные задачи:

• Быстро проверить идею
• Поработать с удаленным сервером
• Сравнить ответы разных AI
• Поделиться средой с коллегой

Все остальное — шум.

Собираешь минимальную рабочую версию за день. Используешь неделю. Понимаешь что действительно нужно. Добавляешь только это.

Потому что лучшая IDE — та, которую ты сделал сам. Даже если она умеет только половину того, что умеет VS Code.