AI-powered платформа разработки

FillLifeAI

Интеллектуальная платформа для создания веб-сайтов и книг с помощью многоагентной системы искусственного интеллекта

0
AI агентов
0
Типа проектов
0
Таблиц в БД
Узнать больше v

Что такое FillLifeAI?

Платформа, которая объединяет искусственный интеллект и разработку программного обеспечения в единую удобную среду

🎯

Цель проекта

FillLifeAI создан для того, чтобы любой человек — даже без опыта программирования — мог создавать полноценные веб-сайты и писать книги с помощью искусственного интеллекта. Платформа берёт на себя всю техническую сложность: генерацию кода, управление файлами, контроль версий и проверку качества.

💡

Идея

Вместо одного универсального AI-помощника, FillLifeAI использует конвейер из специализированных агентов. Каждый агент отвечает за свой этап работы: один анализирует задачу, другой пишет код, третий проверяет качество, четвёртый исправляет ошибки. Это имитирует работу реальной команды разработчиков.

🇷🇺

Для кого

Интерфейс полностью на русском языке. Платформа ориентирована на русскоязычных пользователей — предпринимателей, авторов книг, начинающих разработчиков и всех, кто хочет создавать цифровые продукты без глубоких технических знаний.

⚙️

Технологии

Построен на современном стеке: React + TypeScript на фронтенде, Node.js + Express на сервере, PostgreSQL для хранения данных, и OpenAI SDK для взаимодействия с языковыми моделями. Всё это работает как единое приложение.

Два направления создания контента

Пользователь выбирает тип проекта при создании, и система автоматически генерирует соответствующие шаблоны файлов

🌐

Веб-сайты

При создании веб-проекта автоматически генерируются три файла-шаблона:

  • index.html — структура страницы с подключёнными стилями и скриптами
  • style.css — базовые стили с современным дизайном и адаптивной вёрсткой
  • script.js — JavaScript-файл для интерактивности

Далее AI-агенты могут редактировать, дополнять и полностью переписывать эти файлы по запросу пользователя.

📚

Книги

Для книжного проекта создаётся структура из Markdown-файлов:

  • README.md — описание книги и оглавление
  • chapter-1.md — первая глава с базовой разметкой
  • notes.md — заметки и черновики

AI помогает писать текст, развивать сюжет, проверять грамматику и стилистику, а также структурировать содержание.

Как это работает?

Путь от идеи до готового результата в несколько простых шагов

01

Регистрация и вход

Пользователь регистрируется по номеру телефона и паролю. Система создаёт защищённую сессию с хранением в PostgreSQL. Пароли хешируются алгоритмом bcrypt — даже если база данных будет скомпрометирована, пароли останутся в безопасности.

02

Создание проекта

На главной странице пользователь нажимает «Новый проект», выбирает тип (веб-сайт или книга), даёт название и описание. Система автоматически создаёт проект и генерирует начальные файлы-шаблоны с правильной структурой.

03

Рабочее пространство

Открывается рабочее пространство (Workspace) — интерфейс, похожий на IDE. Слева — список файлов проекта, в центре — редактор кода с подсветкой синтаксиса, справа — AI-чат. Есть вкладки «Превью», «Код» и «Переменные».

04

Общение с AI

Пользователь пишет запрос в чат: «Добавь навигационное меню» или «Напиши главу про путешествие героя». AI-конвейер обрабатывает запрос через 8 специализированных стадий и возвращает готовый результат с изменениями файлов.

05

Применение изменений

Файловые изменения от AI парсятся через движок диффов (diff-engine) и применяются к файлам проекта. Каждое изменение версионируется — можно откатиться к любой предыдущей версии файла. Превью обновляется в реальном времени.

Архитектура системы

Трёхуровневая архитектура с чётким разделением ответственности

🖥️

Фронтенд (Клиент)

React 18 + TypeScript

Типизированный UI с компонентной архитектурой. TypeScript отлавливает ошибки ещё до запуска кода.

Vite

Сверхбыстрая сборка и горячая перезагрузка (HMR) — изменения видны мгновенно без перезагрузки страницы.

TanStack React Query

Управление серверным состоянием: кэширование, автообновление, повторные попытки при ошибках сети.

shadcn/ui + Tailwind CSS

Система UI-компонентов на базе Radix UI с утилитарными CSS-классами. Поддержка тёмной и светлой темы.

Wouter

Легковесный роутер (менее 2 КБ) вместо тяжёлого React Router. Обеспечивает навигацию между страницами.

Framer Motion

Плавные анимации переходов между страницами и элементами интерфейса.

⚙️

Бэкенд (Сервер)

Node.js + Express

RESTful API под префиксом /api/. Обрабатывает все CRUD-операции, аутентификацию и AI-запросы.

TypeScript + tsx

Весь серверный код на TypeScript. В разработке запускается через tsx, в продакшене компилируется esbuild.

SSE (Server-Sent Events)

Потоковая передача ответов AI — текст появляется посимвольно, как будто AI печатает в реальном времени.

Сессии в PostgreSQL

express-session + connect-pg-simple: сессии хранятся в БД, а не в памяти. Это позволяет перезапускать сервер без потери авторизации.

Diff Engine

Движок диффов: парсит блоки FILE_UPDATE из ответов AI, вычисляет структурированные различия, создаёт наборы изменений (changesets).

Compression Pipeline

Семантическое сжатие памяти проекта: создаёт сводки, отпечатки (fingerprints), извлекает сущности для долгосрочного контекста AI.

🗄️

База данных

PostgreSQL

Основное хранилище: пользователи, проекты, файлы, версии, сообщения чата, настройки AI — всё в реляционной БД.

Drizzle ORM

Типобезопасный ORM для TypeScript. Схема определена в общем модуле (shared/schema.ts) и используется на клиенте и сервере.

25+ таблиц

users, projects, projectFiles, fileVersions, chatMessages, changesets, reasoningCache, agentConfig, tokenUsage и другие.

Многоагентная AI система

Конвейер из 8 специализированных стадий обработки, имитирующий работу команды разработчиков

1

Router (Маршрутизатор)

Классифицирует входящий запрос пользователя. Определяет, нужно ли писать код, редактировать файл, отвечать на вопрос или выполнить другое действие. Направляет запрос в нужную ветку обработки.

MODEL_ROUTER
>
2

Thinking (Размышление)

Глубокий анализ задачи. AI «думает вслух» — разбирает задачу на части, определяет зависимости, выбирает подход к решению. Результаты кэшируются для повторного использования.

Внутренняя стадия
>
3

BA (Бизнес-аналитик)

Формализует требования. Преобразует свободный текст пользователя в структурированное техническое задание: какие файлы затронуты, какие функции нужны, какие ограничения учесть.

MODEL_BA
>
4

Writer (Писатель)

Генерирует код или текст. Это «рабочая лошадка» конвейера — создаёт HTML, CSS, JavaScript, Markdown по техническому заданию от бизнес-аналитика. Оформляет результат в блоках FILE_UPDATE.

MODEL_WRITER
>
5

Self-Healing (Самоисцеление)

Автоматическое обнаружение и исправление ошибок. Проверяет сгенерированный код на синтаксические ошибки, незакрытые теги, отсутствующие импорты — и исправляет их без участия пользователя.

Автоматическая стадия
>
6

Critic (Критик)

Оценивает качество результата. Проверяет код на соответствие требованиям, лучшим практикам, читаемость и производительность. Выставляет оценку и указывает на проблемы.

MODEL_CRITIC
>
7

Revision (Ревизия)

Если критик нашёл проблемы — ревизор исправляет их. Принимает замечания критика и дорабатывает код, устраняя найденные недостатки. Может пройти несколько циклов критик > ревизия.

MODEL_REVISION
>
8

NoRepeat (Антиповтор)

Финальная проверка на дублирование. Убеждается, что AI не повторяет ранее данные ответы и не генерирует избыточный код. Очищает результат и подготавливает его к отправке пользователю.

MODEL_NOREPEAT

Зачем это нужно? Один AI-агент склонен к ошибкам, которые он сам не замечает. Конвейер из специализированных агентов позволяет каждому этапу сосредоточиться на своей задаче и проверить работу предыдущего. Это значительно повышает качество результата — точно так же, как в реальной команде разработчиков: один пишет код, другой делает код-ревью.

Ключевые возможности

Полный набор инструментов для создания и управления проектами

📝

Редактор кода

Встроенный редактор с подсветкой синтаксиса для HTML, CSS, JavaScript и Markdown. Поддержка вкладок для переключения между файлами проекта.

👁️

Живой предпросмотр

Мгновенный предпросмотр веб-страниц прямо в интерфейсе. Изменения в коде отображаются сразу без перезагрузки.

💬

AI-чат в проекте

Чат-интерфейс для общения с AI прямо в рабочем пространстве. AI видит контекст проекта и может редактировать файлы через блоки FILE_UPDATE.

🗨️

Standalone чат

Отдельная страница для свободного общения с AI без привязки к проекту. Поддержка нескольких разговоров с историей.

📱

Стриминг Android

Страница Phone для потоковой передачи экрана Android-устройства через WebRTC. Позволяет тестировать мобильные приложения.

🔄

Версионирование

Каждое изменение файла создаёт новую версию. Можно просмотреть диффы между версиями и откатиться к любой предыдущей.

📦

Changesets

Группировка связанных изменений в наборы (changesets). Позволяет атомарно применять или откатывать целые пакеты правок.

🔐

Аутентификация

Вход по номеру телефона и паролю. Пароли хешируются bcrypt. Сессии хранятся в PostgreSQL для надёжности.

🌙

Тёмная тема

Полная поддержка тёмной и светлой темы. Переключение одной кнопкой, настройка сохраняется между сессиями.

🧠

Память проекта

AI запоминает контекст проекта через compression pipeline: создаёт сводки, извлекает ключевые сущности, формирует «отпечатки» для долгосрочной памяти.

⚙️

Настройки AI

Гибкая настройка моделей для каждой стадии конвейера. Можно использовать разные модели для разных задач, управлять температурой и другими параметрами.

📊

Отслеживание токенов

Учёт использования токенов AI по каждому запросу. Позволяет контролировать расходы и оптимизировать промпты.

Плюсы и минусы проекта

Честная оценка сильных и слабых сторон платформы

✅ Преимущества

Многоагентный AI конвейер

8 специализированных стадий обработки обеспечивают значительно более высокое качество результата по сравнению с одним универсальным AI. Каждый агент проверяет и дополняет работу предыдущего.

Самоисцеление кода

Автоматическое обнаружение и исправление ошибок без участия пользователя. Система сама находит синтаксические ошибки, незакрытые теги и исправляет их.

Полноценное версионирование

Каждое изменение файла сохраняется. Можно просмотреть историю, сравнить версии и откатиться. Это защищает от случайной потери данных.

Современный технологический стек

React 18, TypeScript, Vite, Tailwind CSS, Drizzle ORM — всё это проверенные, актуальные технологии с активным сообществом и хорошей документацией.

Типобезопасность end-to-end

TypeScript на клиенте и сервере + общая схема в shared/schema.ts. Изменение модели данных автоматически выявляет все места, где нужно обновить код.

Русскоязычный интерфейс

Весь UI на русском языке. Это снижает порог входа для русскоязычных пользователей, которым неудобно работать с англоязычными инструментами.

Гибкая настройка моделей

Каждая стадия конвейера может использовать свою модель. Можно подключить быструю модель для маршрутизации и мощную для генерации кода.

Потоковая передача ответов

SSE-стриминг: текст AI появляется в реальном времени, а не после долгого ожидания. Улучшает пользовательский опыт при работе с большими ответами.

⚠️ Недостатки

Зависимость от Ollama

Для AI-функций требуется запущенный сервер Ollama с загруженными моделями. Без него все AI-функции недоступны. Это усложняет развёртывание в облаке.

Ограниченный набор языков

Поддерживаются только HTML, CSS, JavaScript и Markdown. Для создания сложных веб-приложений на React, Vue или серверных языках потребуется расширение.

Нет реального выполнения кода

Превью показывает HTML-страницы, но нет полноценной песочницы для запуска JavaScript. Ошибки в скриптах можно увидеть только в браузере пользователя.

Сложность конвейера

8 стадий AI-обработки означают 8 обращений к языковой модели. Это увеличивает время ответа и потребление ресурсов. Для простых задач конвейер избыточен.

Отсутствие коллаборации

Нет возможности совместной работы нескольких пользователей над одним проектом. Каждый проект привязан к одному пользователю.

Нет автоматического деплоя

Созданные сайты можно только просмотреть в превью. Для публикации в интернете нужно вручную скачать файлы и разместить на хостинге.

Ресурсоёмкость

Запуск Ollama с большими моделями требует значительных ресурсов (GPU и RAM). На слабых машинах работа AI будет медленной или невозможной.

Нет тестирования

Отсутствуют автоматические тесты (unit, integration). Это повышает риск регрессий при дальнейшей разработке и усложняет рефакторинг.

Страницы приложения

Каждая страница решает конкретную задачу в рабочем процессе

Вход и регистрация по номеру телефона. Красивая форма с валидацией, анимациями и переключением между режимами входа/регистрации.

Дашборд с обзором проектов, быстрым доступом к последним файлам и общей статистикой.

Список всех проектов с фильтрацией по типу (книга/сайт), поиском, карточками с описаниями и бейджами типов.

IDE-подобный интерфейс: файловый менеджер, редактор кода, превью, AI-чат. Основное место работы над проектом.

Свободное общение с AI без привязки к проекту. Поддержка нескольких бесед, история сохраняется в БД.

WebRTC-стриминг экрана Android-устройства для тестирования мобильных интерфейсов.

Безопасность

Многоуровневая система защиты данных и пользователей

🔒

Хеширование паролей

Все пароли хешируются алгоритмом bcrypt перед сохранением в базу данных. Даже при утечке БД, восстановить исходные пароли практически невозможно. bcrypt автоматически добавляет «соль» к каждому паролю.

🍪

Безопасные сессии

Сессии хранятся в PostgreSQL через connect-pg-simple, а не в куках или памяти сервера. Это предотвращает подделку сессий и обеспечивает их сохранность при перезагрузке.

🛡️

Валидация URL Ollama

Сервер принимает подключения только к локальным хостам: 127.0.0.1, localhost, 0.0.0.0, host.docker.internal, *.local. Это защита от SSRF-атак — злоумышленник не может заставить сервер обращаться к произвольным внешним адресам.

Валидация данных

Все входящие данные проверяются через Zod-схемы. Невалидные данные отклоняются до того, как попадут в базу данных или будут обработаны AI.

Планы развития

Направления, в которых проект может расти и улучшаться

01

Песочница для кода

Полноценная среда исполнения JavaScript с доступом к DOM, возможностью устанавливать npm-пакеты и запускать фреймворки (React, Vue).

02

Совместная работа

Мультипользовательское редактирование в реальном времени через WebSocket. Несколько участников смогут одновременно работать над одним проектом.

03

Публикация сайтов

Интеграция с хостинг-провайдерами для публикации сайтов одной кнопкой. Собственные домены, SSL-сертификаты, CDN.

04

Расширение языков

Поддержка Python, TypeScript, React, Vue, Node.js и других технологий. Превращение платформы в полноценную cloud IDE.

05

Маркетплейс шаблонов

Библиотека готовых шаблонов сайтов и книг, созданных сообществом. Возможность публиковать и монетизировать свои шаблоны.

06

Облачные модели

Поддержка облачных AI-провайдеров (OpenAI, Anthropic, Google) как альтернатива локальному Ollama для пользователей без мощного оборудования.

FillLifeAI — это мост между идеей и реализацией

Платформа демонстрирует, как многоагентная система искусственного интеллекта может автоматизировать сложный процесс создания программного обеспечения. Каждый специализированный агент выполняет свою роль, проверяет работу других и обеспечивает высокое качество результата.

Проект построен на проверенных технологиях, имеет чёткую архитектуру и потенциал для масштабирования. При устранении текущих ограничений — добавлении песочницы, поддержки новых языков и облачных моделей — FillLifeAI может стать полноценной платформой для создания цифровых продуктов.

React TypeScript Node.js Express PostgreSQL Drizzle ORM Vite Tailwind CSS OpenAI SDK Ollama