Trello 안에서 Gemini의 힘: Firebase Genkit으로 LLM 어시스턴트 구축
Source: Dev.to
프로젝트 관리 세계에서 Trello는 그 단순함과 시각적 조직 덕분에 오랫동안 사랑받아 왔습니다. 하지만 Trello 카드가 반응한다면 어떨까요? 봇이 카드의 세부 정보를 분석하고, 첨부 파일을 살펴보며, 팀의 댓글에 대해 지능적인 업데이트나 답변을 제공한다면 어떨까요?
이 글에서는 Firebase Genkit을 사용해 Google의 Gemini 3.0 Flash 모델을 Trello에 통합하는 방법을 살펴보겠습니다.
Prerequisites
Before we dive in, make sure you have the following:
- A Trello account (one bot account, one regular account to issue requests from) – Trello
- A Google AI API Key – Google AI Studio
- Node.js installed – Node.js download
- A Firebase / GCP account for telemetry and deployment – Firebase
Trello Power‑Up 설정하기
Trello API와 상호 작용하려면 Power‑Up을 생성해야 합니다. 이를 통해 인증에 필요한 API 키와 토큰을 얻을 수 있습니다.
-
Trello Power‑Up Admin 페이지로 이동합니다.
-
워크스페이스에서 “Create a new Power‑Up” 를 클릭합니다.
-
API Key와 Secret을 생성합니다.
-
앱이 사용자를 대신하여 동작하도록 Token을 생성합니다.
-
(선택) “Token” 페이지에서 자격 증명을 확인합니다.
이 자격 증명은 안전하게 보관하세요! .env 파일에 필요합니다.
Firebase Genkit으로 AI 로직 만들기
Firebase Genkit은 LLM 기반 애플리케이션 구축을 간소화합니다. 여기서는 Trello 카드 ID와 댓글을 받아 모든 관련 데이터를 가져오고 Gemini를 사용해 응답을 생성하는 Flow를 정의합니다.
스키마 정의
먼저 카드 데이터에 대한 구조화된 스키마를 정의합니다. 이렇게 하면 Gemini가 체크리스트, 댓글, 이미지 첨부 파일 등 일관된 정보를 받게 됩니다. 이 스키마는 다른 프로젝트에 대한 링크, 추가 카드 등으로 확장할 수 있습니다.
export const TrelloRequestRequestInputSchema = z.object({
instructions: z.string().describe("User's instructions"),
attachments: z.array(
z.object({
url: z.string(),
caption: z.string().optional(),
})
),
details: z.string(),
comments: z.array(
z.object({
person: z.string(),
text: z.string(),
timestamp: z.string(),
})
),
checklists: z.array(
z.object({
name: z.string(),
items: z
.object({
itemName: z.string(),
completed: z.boolean(),
dueDate: z.string(),
})
.array(),
})
),
today: z.string(),
});Trello Flow
우리 애플리케이션의 핵심은 trelloFlow입니다. 헬퍼 함수를 사용해 카드 세부 정보를 가져오고, 프롬프트를 호출한 뒤, LLM의 응답을 Trello에 댓글로 게시합니다.
const trelloFlow = ai.defineFlow(
{
name: "trelloFlow",
inputSchema: z.object({
trelloCardId: z.string(),
trelloComment: z.string(),
}),
// …additional metadata if needed
},
async (input) => {
// 1️⃣ Retrieve and format the card data
const formattedCard = await getFormattedTrelloCard(
input.trelloCardId,
input.trelloComment
);
// 2️⃣ Generate a response with Gemini
const output = await trelloPrompt({ inputData: formattedCard });
// 3️⃣ Post the response as a comment on the card
await trelloClient.cards.addCardComment({
id: input.trelloCardId,
text: output.output.responseText,
});
return { success: true, message: "Comment added successfully" };
}
);멀티모달 기능: 첨부 파일 보기
Gemini의 가장 큰 강점 중 하나는 이미지를 이해할 수 있다는 점입니다. trello_helper.ts에서 첨부 파일을 가져와 base64 데이터 URL로 변환하고 이를 직접 LLM에 전달합니다.
const formattedAttachments = await Promise.all(
attachments.map(async (attachment) => {
const response = await fetch(attachment.url, {
headers: {
Authorization: `OAuth oauth_consumer_key="${env.TRELLO_API_KEY}", oauth_token="${env.TRELLO_API_TOKEN}"`,
},
});
const arrayBuffer = await response.arrayBuffer();
const base64 = Buffer.from(arrayBuffer).toString("base64");
return {
url: `data:${attachment.mimeType};base64,${base64}`,
caption: attachment.name,
};
})
);Dot‑Prompt로 프롬프트 설계
Genkit은 AI 로직을 깔끔하게 분리할 수 있는 .prompt 파일 형식을 도입했습니다. prompts/trello.prompt에서는 속도와 네이티브 멀티모달 지원 덕분에 Gemini 3.0 Flash 모델을 선택합니다.
프롬프트는 Handlebars‑style 템플릿을 사용해 구조화된 카드 데이터를 삽입합니다. Trello 카드의 다양한 부분을 순회하지만, 동일한 패턴을 사용해 필요한 추가 컨텍스트를 언제든 주입할 수 있습니다.
(실제 프롬프트 파일은 여기서 생략했으며, 시스템 지시문, 사용자 입력, 변수 삽입을 위한 섹션을 포함하는 표준 .prompt 구문을 따릅니다.)
위의 요소들—Power‑Up 인증 정보, Genkit Flow, 멀티모달 첨부 파일 처리, 깔끔한 .prompt—을 모두 결합하면 Gemini 3.0 Flash를 이용해 Trello 카드와 “대화”할 수 있는 완전한 봇이 완성됩니다. 코드를 Firebase Functions(또는 다른 Node.js 환경)으로 배포하고, 필요한 환경 변수를 설정한 뒤, 카드가 대화형 협업자로 변하는 모습을 확인해 보세요.
웹훅을 통한 Trello 연결
봇을 반응형으로 만들기 위해 Trello 웹훅을 사용합니다. 댓글이 추가될 때마다 Trello는 우리 애플리케이션에 POST 요청을 보냅니다.
다양한 Express 미들웨어를 사용하여 요청이 Genkit에 도달하기 전에 가로채고, 검증하고, 포맷합니다.
보안
우리는 HMAC‑SHA1 서명을 사용하여 들어오는 요청이 실제로 Trello에서 온 것인지 확인하는 미들웨어를 구현합니다.
export const trelloSignatureMiddleware = (
req: RequestWithAuth,
res: Response,
next: NextFunction
) => {
const signature = req.headers["x-trello-webhook"];
const secret = env.TRELLO_WEBHOOK_SECRET;
const callbackURL = env.TRELLO_CALLBACK_URL;
const body = req.rawBody ? req.rawBody.toString("utf8") : "";
const baseString = body + callbackURL;
const computedSignature = crypto
.createHmac("sha1", secret)
.update(baseString)
.digest("base64");
if (signature === computedSignature) {
next();
} else {
res.status(401).send("Unauthorized");
}
};웹훅 등록
앱을 배포한 후(예: Cloud Run), Trello에 업데이트를 보낼 위치를 알려줘야 합니다. 배포 URL을 .env 파일에 입력하세요. 편리한 스크립트가 제공됩니다:
npx tsx src/register_webhook.tsSample output
69457XXXXXXXXXXXXXXX
Registering webhook for https://genkit-trello-{PROJECT_ID}.europe-west1.run.app/trelloFlow with board ID: 6945713XXXXXXXXXXXXXX실제 작동 모습
모든 설정이 완료되면 Trello 댓글에 봇을 태그할 수 있습니다(예: @GeminiBot what's the status of this task?). 봇은 카드 전체 컨텍스트를 분석하고 답변을 제공합니다.
체크리스트와 카드 설명을 기반으로 진행 상황을 추적할 수도 있습니다!
모니터링
GCP에 배포하고 Firebase 프로젝트를 설정하면, 대시보드의 Genkit 부분이 즉시 중요한 디버그 및 개요 정보를 제공합니다.
결론
Trello의 구조화된 프로젝트 데이터와 Gemini의 추론 능력, 그리고 Firebase Genkit의 오케스트레이션을 결합하면 유용한 Trello 어시스턴트를 만들 수 있습니다. 긴 댓글 스레드를 요약하거나, 첨부된 디자인을 분석하거나, 빠른 상태 업데이트를 제공하는 등 다양한 방식으로 활용할 수 있습니다. 이 프로젝트는 MVP이며, 자유롭게 포크하여 여러분의 사용 사례에 맞게 확장해 보세요.
Check out the full source code on GitHub: