Як створити GenAI бота для Bluesky за допомогою Langflow, TypeScript і Node.js

Автор: Phil Nash

pic

Bluesky — це соціальна мережа, побудована на AT Protocol: відкритий, децентралізований спосіб створення соціальних додатків. AT Protocol є відкритим, що означає, що розробники можуть використовувати його для створення власних додатків, від налаштованих стрічок до клієнтів, і, звісно, моїх улюблених: ботів.

З появою генеративного ШІ ми тепер можемо створювати чат-ботів, які ще розумніші. Вони можуть робити все — від реалістичних розмов до незалежних дій як агенти. Langflow, інтерактивна IDE для перетягування, робить створення ШІ-агентів і робочих процесів значно простішим.

У зв'язку з цим, природно, що виникає бажання підключити розумних ботів до соціальних мереж. У цьому дописі ми створимо невеликий додаток на TypeScript, який створює бота для Bluesky, використовуючи Langflow.

Додаток

Додаток, який ми створимо, керуватиме обліковим записом Bluesky, відповідаючи щоразу, коли отримує згадку або відповідь. Згадка — це будь-який пост, що містить обліковий запис, а відповідь — це пост, надісланий у тред, в якому обліковий запис бере участь.

Ми використаємо пакет @skyware/bot, щоб полегшити взаємодію з API Bluesky, а Langflow допоможе генерувати відповіді на пости.

pic

Що вам знадобиться

Для створення цього додатка вам знадобиться:

Коли все буде готово, можна почати створювати бота для Bluesky.

Налаштування додатка

Почнімо з створення нового додатка на Node.js; створіть нову папку з назвою langflow-bluesky-bot і відкрийте її в терміналі.

mkdir langflow-bluesky-bot  
cd langflow-bluesky-bot

Ініціалізуйте новий Node додаток за допомогою:

npm init --yes

Встановіть залежності та розробницькі залежності, які вам знадобляться:

npm install @skyware/bot  
npm install typescript tsx @types/node --save-dev

Відкрийте проект у вашому улюбленому текстовому редакторі, а потім відкрийте файл package.json. Я люблю, коли мої проекти працюють як ES модуля. Щоб зробити те ж саме, додайте наступне під ключем "main".

"type": "module",

Додайте наступні скрипти до package.json. Скрипт build компілюватиме TypeScript, який ми напишемо, у JavaScript, а скрипт start запустить цей JavaScript. Нарешті, для полегшення розробки, скрипт dev буде використовувати tsx для прямого запуску TypeScript і перезапускатиме, коли зміни будуть виявлені.

"scripts": {  
 "build": "tsc",  
 "start": "node --env-file=.env .",  
 "dev": "tsx watch --env-file=.env ./src/index.ts"  
 },

Щодо TypeScript, нам також потрібно налаштувати компілятор.
Створіть файл з назвою tsconfig.json і вставте наступне:

{  
 "compilerOptions": {  
 "target": "es2023",  
 "lib": [  
 "es2023"  
 ],  
 "module": "NodeNext",  
 "sourceMap": true,  
 "outDir": "./dist",  
 "esModuleInterop": true,  
 "forceConsistentCasingInFileNames": true,  
 "strict": true,  
 "skipLibCheck": true  
 }  
}

Створіть файл з назвою .env і вставте наступне:

BSKY_USERNAME=  
BSKY_PASSWORD=  
LANGFLOW_URL=  
LANGFLOW_TOKEN=

Ми заповнимо ці змінні пізніше, коли буде потрібно.

Для останньої частини налаштування створіть директорію src і файл з назвою src/index.ts.

mkdir src  
touch src/index.ts

Тепер ми готові почати роботу над кодом нашого бота.

Кодинг бота

Відкрийте файл src/index.ts у вашому редакторі. Почнімо з імпорту фреймворку для бота та створення об'єкта бота, який буде аутентифікований за допомогою імені облікового запису та пароля для додатку.

import { Bot } from "@skyware/bot";  

const bot = new Bot();  
await bot.login({  
 identifier: process.env.BSKY_USERNAME!,  
 password: process.env.BSKY_PASSWORD!,  
});

Ми ще не заповнили ці деталі у файлі .env. Тому нам потрібно зробити це перед тим, як рухатися далі.

Деталі облікового запису Bluesky

Увійдіть в обліковий запис, який ви хочете підключити до цього додатку. Вам потрібно буде створити пароль для додатку для цього облікового запису. Перейдіть до налаштувань облікового запису, виберіть Паролі для додатків і додайте новий пароль. Як тільки у вас будуть іменний обліковий запис і пароль для додатку, додайте їх у файл .env.

Ми можемо перевірити, чи працюють ці облікові дані, спробувавши надіслати пост з облікового запису. Додайте цей код у файл src/index.ts.

bot.post({  
 text: "Hello world!",  
});

Тепер запустіть бота за допомогою:

npm run dev

Ви повинні побачити новий пост від вашого облікового запису бота. Якщо ні, перевірте облікові дані ще раз.

pic

Зупиніть бота за допомогою Ctrl + C. Видаліть код, який надсилає пост — не хочемо більше спамити стрічку!

Прослуховування подій

Ми будемо слухати події "відповідь" та "згадка". Ви також можете слухати події "цитата", "перепост", "лайк", "підписка" і "повідомлення", якщо хочете обробляти інші варіанти використання для вашого бота. Цей код налаштовує прослуховування двох цих подій однією функцією і виводить повідомлення, коли бот готовий.

bot.on("reply", respondToIncoming);  
bot.on("mention", respondToIncoming);  
console.log(  
 `[✓] @${process.env.BSKY_USERNAME} is listening for mentions and replies.\n`  
);

Тепер нам потрібно визначити функцію respondToIncoming. Почнемо з того, що побачимо, що відбувається, коли нас згадують. У верхній частині файлу імпортуємо тип Post. Потім реалізуємо функцію respondToIncoming. У цьому випадку ми просто виведемо автора поста та текст, який вони надіслали.

// У верхній частині додайте Post до імпорту  
import { Bot, Post } from "@skyware/bot";  

// Внизу  
async function respondToIncoming(post: Post) {  
 console.log(`[>] @${post.author.handle}: ${post.text}\n`);  
}

З цим кодом на місці, запустіть додаток знову:

npm run dev

Ви можете перевірити, чи успішно прослуховуєте ці події, надіславши згадку або відповідь з іншого облікового запису.

pic

Ви можете побачити інші властивості поста, перевіривши документацію для @skyware/bot і ви можете досліджувати їх, виводячи їх у термінал.

Опрос

Зверніть увагу, що може бути затримка між моментом, коли ви надсилаєте згадку чи відповідь вашому боту, і моментом, коли ви побачите пост виведений в лог. Це пов'язано з тим, що @skyware/bot опитує API кожні 5 секунд для оновлень.
Хоча є реальний Firehose, до якого ви можете підписатися, це буде надмірним для цього додатка, опитування (polling) буде цілком достатньо.

Тепер, коли ми можемо бачити пости, що надсилаються до нашого бота, давайте створимо щось для їх обробки.

Langflow

У цьому блозі ми побудуємо простий потік Langflow для відповіді на вхідні пости. Як тільки ви завершите цей етап, я раджу вам поекспериментувати з Langflow і подивитися, що ще ви можете створити. Також є багато прикладів потоків, які можна дослідити для натхнення.

Відкрийте Langflow на панелі DataStax і створіть новий потік. Для цього прикладу ми будемо використовувати шаблон Basic Prompting.

pic

Цей шаблон бере повідомлення, яке надсилається в компонент вводу чату, і передає його в компонент моделі, OpenAI gpt-4o-mini за замовчуванням. Якщо ви хочете використовувати OpenAI для цього додатку, вам потрібно буде заповнити компонент ключем API OpenAI. Ви також можете вибрати використання будь-якого іншого компоненту моделі, якщо це вам більше підходить.

Ви можете змінити, як ваш бот буде відповідати, надаючи системні інструкції через компонент підказки (prompt). Для простого потоку, як цей, ви можете сказати моделі відповідати як пірат, втомлений підліток або герой фільмів 80-х. Або щось більш розумне, мабуть.

Компонент моделі надсилає свій вихід до компонента виводу чату, і це означає, що ви можете тестувати свій потік, спілкуючись з ним через Playground. Коли ви будете задоволені відповідями, натисніть кнопку API. Тут ви зможете знайти URL вашого потоку. Скопіюйте URL і вставте його в файл .env як LANGFLOW_URL.

У верхній частині цього вікна ви можете згенерувати ключ API. Зробіть це, а потім скопіюйте ключ API і вставте його в файл .env як LANGFLOW_TOKEN.

Тепер давайте підключимо Langflow API до коду.

Робота з Langflow API

Створіть функцію з назвою getLangflowResponse.
Ця функція зробить HTTP POST запит до URL Langflow, який ми скопіювали раніше.

Тіло запиту — це об'єкт JSON, який визначає input_type та output_type як "chat", а input_value — це текст, який ми передамо в цю функцію.

Для авторизації запиту ми передаємо заголовок Authorization, який містить рядок "Bearer" і токен, який ми згенерували.

Після того, як ми зробимо запит, ми парсимо відповідь як JSON і витягуємо повідомлення з об'єкта відповіді.

async function getLangflowResponse(text: string) {  
 const body = {  
 input_type: "chat",  
 output_type: "chat",  
 input_value: text,  
 };  
 const response = await fetch(process.env.LANGFLOW_URL!, {  
 method: "POST",  
 headers: {  
 Authorization: `Bearer ${process.env.LANGFLOW_TOKEN!}`,  
 "Content-Type": "application/json",  
 },  
 body: JSON.stringify(body),  
 });  
 if (!response.ok) {  
 throw new Error("Could not respond", { cause: response });  
 }  
 const data = (await response.json()) as any;  
 return data.outputs[0].outputs[0].artifacts.message;  
}

Оновіть функцію responseToIncoming, щоб вона генерувала вміст, використовуючи функцію getLangflowReponse, обробляючи будь-які помилки, а потім публікувала цей результат у відповідь на оригінальний пост за допомогою функції post.reply.

async function respondToIncoming(post: Post) {  
 console.log(`[>] @${post.author.handle}: ${post.text}\n`);  
 try {  
 const text = await getLangflowResponse(post.text);n`);  
 await post.reply({ text });  
 } catch (error) {  
 console.error(error);  
 }  
}

Знову перезапустіть процес бота, зупинивши його за допомогою Ctrl + C, а потім запустіть:

npm run dev

Надішліть собі ще одне згадування, і цього разу ви повинні побачити відповіді від вашого бота, згенеровані потоком Langflow.

pic

Цей приклад бота наразі має особистість саркастичного підлітка. Я не впевнений, що це найкращий бот, який я створив, але це лише початок.

Тепер, коли ви інтегрували потік Langflow з кодом вашого додатку, ви можете експериментувати з Langflow і подивитися, що ще ви можете досягти. Ви можете експериментувати, побудувавши:

Створення більше ботів

Bluesky робить дуже легким створення ботів, з якими цікаво взаємодіяти, а Langflow робить легким створення додатків GenAI, які ви можете підключити до ботів всього кількома рядками коду.

Щоб почати, ви можете:

Мені буде цікаво почути про будь-яких ботів, яких ви створюєте на Bluesky. Не соромтеся підписатися на мене в Bluesky за @philna.sh і надішліть мені повідомлення, якщо ви створили щось цікаве.

Перекладено з: How to Build a GenAI Bluesky Bot with Langflow, TypeScript, and Node.js

Leave a Reply

Your email address will not be published. Required fields are marked *