Мы создали собственный ИИ-чатбот для документации, обученный на документации платформы Blue.


В Blue мы всегда ищем способы упростить жизнь наших клиентов. У нас есть подробная документация по каждой функции, видео на YouTube, советы и хитрости и различные каналы поддержки.

Мы внимательно следим за развитием ИИ (искусственного интеллекта), поскольку очень заинтересованы в автоматизации управления проектами. Мы также выпустили такие функции, как автоматическая категоризация с помощью ИИ и резюме контента с помощью ИИ, чтобы упростить работу для наших тысяч клиентов.

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

Ответ был довольно ясен: Нам нужен ИИ-чатбот, обученный на нашей документации.

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

Для софтверных компаний в частности, не следует рассматривать маркетинговый сайт как отдельную "вещь" — он является частью вашего продукта. Это связано с типичной жизнью клиента:

  • Осведомленность (Обнаружение): Здесь потенциальные клиенты впервые натыкаются на ваш потрясающий продукт. Ваш чатбот может стать их дружелюбным гидом, сразу указывающим на ключевые функции и преимущества.
  • Рассмотрение (Обучение): Теперь они заинтересованы и хотят узнать больше. Ваш чатбот становится их персональным наставником, выдавая информацию, адаптированную к их конкретным потребностям и вопросам.
  • Покупка/Конверсия: Это момент истины — когда перспектива решает сделать шаг и стать клиентом. Ваш чатбот может сгладить любые последние препятствия, ответить на вопросы "прямо перед покупкой" и, возможно, даже предложить выгодную сделку, чтобы закрепить договор.
  • Адаптация: Они купили, что дальше? Ваш чатбот превращается в полезного помощника, проводящего новых пользователей через настройку, показывающего им основы и убеждающегося, что они не чувствуют себя потерянными в стране чудес вашего продукта.
  • Удержание: Поддержание счастья клиентов — вот название игры. Ваш чатбот на связи 24/7, готов устранить проблемы, предложить советы и хитрости и убедиться, что ваши клиенты чувствуют любовь.
  • Расширение: Время подняться на новый уровень! Ваш чатбот может тонко предлагать новые функции, дополнительные продажи или кросс-продажи, которые соответствуют тому, как клиент уже использует ваш продукт. Это как иметь действительно умного, ненавязчивого продавца всегда в резерве.
  • Адвокатство: Счастливые клиенты становятся вашими самыми большими болельщиками. Ваш чатбот может поощрять удовлетворенных пользователей распространять информацию, оставлять отзывы или участвовать в реферальных программах. Это как иметь рекламную машину, встроенную прямо в ваш продукт!

Решение: создавать или покупать

Как только мы решили внедрить ИИ-чатбот, следующим большим вопросом было: создавать или покупать? Как небольшая команда, лазерно сфокусированная на нашем основном продукте, мы обычно предпочитаем решения "как услуга" или популярные платформы с открытым исходным кодом. В конце концов, мы не занимаемся изобретением велосипеда для каждой части нашего технологического стека.

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

Наши требования были простыми, но неподлежащими обсуждению:

  • Небрендированный опыт: Этот чатбот — не просто приятный виджет; он будет размещен на нашем маркетинговом сайте и в конечном итоге в нашем продукте. Мы не заинтересованы в рекламе чужого бренда на нашей собственной цифровой территории.
  • Отличный UX: Для многих потенциальных клиентов этот чатбот может быть их первой точкой контакта с Blue. Он задает тон их восприятию нашей компании. Давайте признаем: если мы не можем справиться с правильным чатботом на нашем сайте, как мы можем ожидать, что клиенты доверят нам свои критически важные проекты и процессы?
  • Разумная стоимость: С большой пользовательской базой и планами интегрировать чатбот в наш основной продукт, нам нужно было решение, которое не разорит банк при масштабировании использования. В идеале мы хотели опцию BYOK (Принеси свой ключ). Это позволило бы нам использовать наш собственный ключ OpenAI или другого ИИ-сервиса, платя за прямые переменные затраты вместо наценки стороннему поставщику, который на самом деле не запускает модели.
  • Совместимость с API OpenAI Assistants: Если мы собирались использовать программное обеспечение с открытым исходным кодом, мы не хотели иметь проблемы с управлением конвейером для приема документов, индексации, векторных баз данных и всего этого. Мы хотели использовать API OpenAI Assistants, который абстрагировал бы всю сложность за API. Честно говоря — это действительно хорошо сделано.
  • Масштабируемость: Мы хотим иметь этот чатбот в нескольких местах, с потенциально десятками тысяч пользователей в год. Мы ожидаем значительное использование, и мы не хотим быть заперты в решении, которое не может масштабироваться с нашими потребностями.

Коммерческие ИИ-чатботы

Те, которые мы рассмотрели, имели тенденцию к лучшему UX, чем решения с открытым исходным кодом — как, к сожалению, часто бывает. Вероятно, есть отдельная дискуссия, которую нужно провести однажды о том, почему многие решения с открытым исходным кодом игнорируют или недооценивают важность UX.

Мы предоставим список здесь, на случай, если вы ищете надежные коммерческие предложения:

  • Chatbase: Chatbase позволяет создать пользовательский ИИ-чатбот, обученный на вашей базе знаний, и добавить его на ваш сайт или взаимодействовать с ним через их API. Он предлагает такие функции, как надежные ответы, генерация лидов, расширенная аналитика и возможность подключения к нескольким источникам данных. Для нас это показалось одним из самых отполированных коммерческих предложений.
  • DocsBot AI: DocsBot AI создает пользовательские боты ChatGPT, обученные на вашей документации и контенте для поддержки, предпродаж, исследований и многого другого. Он предоставляет встраиваемые виджеты для легкого добавления чатбота на ваш сайт, возможность автоматически отвечать на тикеты поддержки и мощный API для интеграции.
  • CustomGPT.ai: CustomGPT.ai создает персональный опыт чатбота, принимая данные вашего бизнеса, включая содержимое сайта, службу поддержки, базы знаний, документы и многое другое. Он позволяет лидам задавать вопросы и получать мгновенные ответы на основе вашего контента, без необходимости поиска. Интересно, что они также утверждают, что превосходят OpenAI в RAG (Retrieval Augmented Generation)!
  • OpenAssistantGPT: Это интересное коммерческое предложение, потому что оно также является программным обеспечением с открытым исходным кодом. Оно кажется немного на раннем этапе, и ценообразование не казалось реалистичным ($27/месяц за неограниченные сообщения никогда не будет работать коммерчески для них).

Мы также рассматривали InterCom Fin, который является частью их программного обеспечения для поддержки клиентов. Это означало бы переход с HelpScout, который мы используем с момента запуска Blue. Это могло бы быть возможным, но InterCom Fin имеет безумные цены, которые просто исключили его из рассмотрения.

И это действительно проблема многих коммерческих предложений. InterCom Fin берет $0.99 за каждый запрос в поддержку клиентов, а ChatBase берет $399/месяц за 40,000 сообщений. Это почти $5k в год за простой виджет чата.

Учитывая, что цены на вывод ИИ падают как сумасшедшие. OpenAI довольно кардинально снизил свои цены:

  • Оригинальный GPT-4 (8k контекста) стоил $0.03 за 1K токенов запроса.
  • GPT-4 Turbo (128k контекста) стоил $0.01 за 1K токенов запроса, снижение на 50% от оригинального GPT-4.
  • Модель GPT-4o стоит $0.005 за 1K токенов, что является дальнейшим снижением на 50% от цены GPT-4 Turbo.

Это снижение затрат на 83%, и мы не ожидаем, что это останется стагнирующим.

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

ИИ-чатботы с открытым исходным кодом

Как упоминалось, варианты с открытым исходным кодом, которые мы рассмотрели, были в основном разочаровывающими в отношении требования "Отличный UX".

Мы рассматривали:

  • Deepchat: Это компонент чата, независимый от фреймворка, для ИИ-сервисов, который подключается к различным ИИ API, включая OpenAI. У него также есть возможность для пользователей загружать ИИ-модель, которая работает непосредственно в браузере. Мы поиграли с этим и получили рабочую версию, но реализация API OpenAI Assistants казалась довольно багованной с несколькими проблемами. Однако это очень многообещающий проект, и их песочница действительно хорошо сделана.
  • OpenAssistantGPT: Рассматривая это снова с точки зрения открытого исходного кода, это потребовало бы от нас развертывания довольно много инфраструктуры, чего мы не хотели делать, потому что хотели полагаться как можно больше на API OpenAI Assistants.

Создание собственного чатбота

И вот, не сумев найти что-то, что соответствовало бы всем нашим требованиям, мы решили создать собственный ИИ-чатбот, который мог бы взаимодействовать с API OpenAI Assistants. Это, в конце концов, оказалось относительно безболезненным!

Наш сайт использует Nuxt3, Vue3 (который является тем же фреймворком, что и платформа Blue) и TailwindUI.

Первым шагом было создание API (интерфейса программирования приложений) в Nuxt3, который может "говорить" с API OpenAI Assistants. Это было необходимо, поскольку мы не хотели делать все на фронтенде, так как это обнажило бы наш ключ API OpenAI всему миру, с потенциалом для злоупотребления.

Наш бэкенд API действует как безопасный посредник между браузером пользователя и OpenAI. Вот что он делает:

  • Управление разговорами: Он создает и управляет "потоками" для каждого разговора. Думайте о потоке как об уникальной сессии чата, которая помнит все, что вы сказали.
  • Обработка сообщений: Когда вы отправляете сообщение, наш API добавляет его в правильный поток и просит ассистента OpenAI создать ответ.
  • Умное ожидание: Вместо того чтобы заставлять вас смотреть на экран загрузки, наш API проверяет OpenAI каждую секунду, чтобы увидеть, готов ли ваш ответ. Это как иметь официанта, который следит за вашим заказом, не беспокоя повара каждые две секунды.
  • Безопасность прежде всего: Обрабатывая все это на сервере, мы держим ваши данные и наши ключи API в безопасности.

Затем был фронтенд и пользовательский опыт. Как обсуждалось ранее, это было критически важно, потому что у нас нет второго шанса произвести первое впечатление!

При проектировании нашего чатбота мы уделили скрупулезное внимание пользовательскому опыту, обеспечивая, чтобы каждое взаимодействие было плавным, интуитивным и отражало приверженность Blue качеству. Интерфейс чатбота начинается с простого, элегантного синего круга, используя HeroIcons для наших иконок (которые мы используем по всему сайту Blue), чтобы действовать как наш открывающий виджет чатбота. Этот дизайнерский выбор обеспечивает визуальную согласованность и немедленное узнавание бренда.

Мы понимаем, что иногда пользователям может потребоваться дополнительная поддержка или более глубокая информация. Вот почему мы включили удобные ссылки в интерфейс чатбота. Ссылка на электронную почту для поддержки легко доступна, позволяя пользователям обратиться к нашей команде напрямую, если им нужна более персонализированная помощь. Кроме того, мы включили ссылку на документацию, обеспечивая легкий доступ к более comprehensive ресурсам для тех, кто хочет глубже погрузиться в предложения Blue.

Пользовательский опыт дополнительно улучшается вкусными анимациями fade-in и fade-up при открытии окна чатбота. Эти тонкие анимации добавляют нотку изысканности в интерфейс, делая взаимодействие более динамичным и привлекательным. Мы также реализовали индикатор набора текста, небольшую, но важную функцию, которая сообщает пользователям, что чатбот обрабатывает их запрос и создает ответ. Эта визуальная подсказка помогает управлять ожиданиями пользователей и поддерживает ощущение активного общения.

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

За кулисами мы реализовали интеллектуальную обработку для оптимизации ответов чатбота. Наша система автоматически анализирует ответы ИИ, чтобы удалить ссылки на наши внутренние документы, обеспечивая, что представленная информация чистая, релевантная и сосредоточена исключительно на решении запроса пользователя.

Для улучшения читаемости и более тонкого общения мы включили поддержку markdown с использованием библиотеки 'marked'. Эта функция позволяет нашему ИИ предоставлять богато отформатированный текст, включая выделение жирным и курсивом, структурированные списки и даже фрагменты кода при необходимости. Это похоже на получение хорошо отформатированного, адаптированного мини-документа в ответ на ваши вопросы.

И последнее, но не менее важное, мы приоритизировали безопасность в нашей реализации. Используя библиотеку DOMPurify, мы санитизируем HTML, сгенерированный из парсинга markdown. Этот важный шаг обеспечивает, что любые потенциально вредные скрипты или код удаляются перед отображением контента вам. Это наш способ гарантировать, что полезная информация, которую вы получаете, не только информативна, но и безопасна для потребления.

Будущие разработки

Итак, это только начало, у нас есть несколько захватывающих вещей в дорожной карте для этой функции.

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

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

Мы понимаем, что вы можете работать над несколькими проектами или иметь различные запросы. Вот почему мы разрабатываем возможность поддерживать несколько различных потоков разговора с нашим чатботом. Эта функция позволит вам плавно переключаться между различными темами, не теряя контекста — как иметь несколько вкладок, открытых в вашем браузере.

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

Мы также рады создать набор специализированных ИИ-ассистентов, каждый адаптированный для конкретных потребностей. Ищете ли вы ответы на вопросы предпродаж, настройку нового проекта или устранение неполадок с продвинутыми функциями, вы сможете выбрать ассистента, который лучше всего подходит вашим текущим потребностям. Это как иметь команду экспертов Blue под рукой, каждый специализирующийся на различных аспектах нашей платформы.

Наконец, мы работаем над тем, чтобы позволить вам загружать скриншоты напрямую в чат. ИИ проанализирует изображение и предоставит объяснения или шаги по устранению неполадок на основе того, что он видит. Эта функция сделает проще, чем когда-либо, получить помощь с конкретными проблемами, с которыми вы сталкиваетесь при использовании Blue, преодолевая разрыв между визуальной информацией и текстовой помощью.

Заключение

Мы надеемся, что это глубокое погружение в процесс разработки нашего ИИ-чатбота предоставило ценные insights в наше мышление о разработке продуктов в Blue. Наше путешествие от определения потребности в чатботе до создания собственного решения демонстрирует, как мы подходим к принятию решений и инновациям.

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

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

Этот проект олицетворяет наш подход в Blue: мы не боимся засучить рукава и создать что-то с нуля, когда это правильный выбор для нашего продукта и наших пользователей. Именно эта готовность пройти дополнительную милю позволяет нам предоставлять инновационные решения, которые действительно удовлетворяют потребности наших клиентов.

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

Спасибо, что присоединились к нам в этом путешествии через наш процесс разработки. Мы надеемся, что это дало вам представление о вдумчивом, ориентированном на пользователя подходе, который мы применяем ко всем аспектам Blue. Следите за обновлениями, пока мы продолжаем развивать и улучшать нашу платформу, чтобы лучше служить вам.

Если вас интересует, вы можете найти ссылку на исходный код этого проекта здесь:

  • ChatWidget: Это Vue-компонент, который управляет самим виджетом чата.
  • Chat API: Это промежуточное ПО, которое работает между компонентом чата и API OpenAI Assistants

AI Ассистент

Ответы генерируются с использованием ИИ и могут содержать ошибки.

Как я могу вам помочь?

Спросите меня о чем угодно, связанном с Blue или этой документацией.

Введите для отправки • Shift+Enter для новой строки • ⌘I для открытия