N8N & Zapier - AI providers

https://www.youtube.com/watch?v=ED2H_y6dmC8

03:28:09 

 

• Choose your AI model(s)
  • Gemini (Free)
  • OpenAI (min. $5)
  • Anthropic (min. $5)
• Setup AI SDK - AI SDK 설정
•  Use AI SDK with Inngest  - Inngest와 함께 AI SDK

 

AI Provider 선택하기

AI 작업을 구현하기 전에 먼저 사용할 AI 모델을 선택해야 함.

나는 무료인 gemini만 사용하기로 했다.

 

https://ai-sdk.dev/providers/ai-sdk-providers

AI SDK Providers

 

필수 패키지 설치

AI SDK 설치

npm i ai

// npm i ai@5.0.60
// "ai" : "^5.0.60"

 

Google Generative AI Provider 설치

pnpm add @ai-sdk/google

// pnpm add @ai-sdk/google@2.0.17
// "@ai-sdk/google": "^2.0.17"

 

Gemini API 키 발급 및 설정

API 키 발급

https://ai.google.dev/

Gemini Developer API | Gemma open models  |  Google AI for Developers

 

환경변수 설정

.env

처음에는 GEMINI_SECRET_KEY로 설정했지만, 공식 문서에 따르면 GOOGLE_GENERATIVE_AI_API_KEY를 사용하는 것이 권장된다.

#Google Gemerative AI
GOOGLE_GENERATIVE_AI_API_KEY="*****"

 

 

tRPC에서 AI 기능 테스트

src/trpc/routers/_app.ts

- 먼저 tRPC 라우터에서 AI 기능을 테스트해봄. Inngest와 통합하기 전 단계다.

export const appRouter = createTRPCRouter({

  testAi : protectedProcedure.mutation(async () => {
    const {text} = await generateText({
      model: google("gemini-2.5-flash"),
      prompt: "4인분 채식 라자냐 레시피를 작성해 줘"
    });

    return text;
  }),
  
  ...
  
 })

 

src/app/page.tsx

- 프론트엔드에서 테스트

"use client"

import { Button } from "@/components/ui/button";
import { LogoutButton } from "./logout";
import { useTRPC } from "@/trpc/client";
import { QueryClient, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

const Page = () =>{
 
  ...

  const testAi = useMutation(trpc.testAi.mutationOptions())
  
  ...
  
  return(
    <div className="min-h-screen min-w-screen flex items-center justify-center">
      ...
      <Button disabled={testAi.isPending} onClick={()=> testAi.mutate()}> Test Ai</Button>
      ...
    </div>
  )
}

export default Page

 

테스트해보니 로딩 속도가 너무 오래 걸림.

AI 작업은 시간이 오래 걸리기 때문에 동기적으로 처리하면 사용자 경험이 좋지 않다.

이것이 바로 백그라운드 작업이 필요한 이유!

 

 

Inngest와 AI SDK 통합

src/trpc/routers/_app.ts // tRPC 라우터 수정

• AI 작업을 직접 실행하는 대신, Inngest 이벤트를 발행하도록 변경

// 앱 내부에서 사용하지말고 
// testAi : protectedProcedure.mutation(async () => {
//   const {text} = await generateText({
//     model: google("gemini-2.5-flash"),
//     prompt: "4인분 채식 라자냐 레시피를 작성해 줘"
//   });

//   return text;
// }),

// 이벤트를 발행하여 백그라운드에서 처리
  testAi : baseProcedure.mutation(async () => {
    await inngest.send({
      name: "execute/ai",
    })

    return {success: true, message: "작업 대기 중"}
  }),

 

Inngest 함수 작성

src/inngest/functions.ts // 백그라운드에서 실행될 AI 작업을 정의

import prisma from "@/lib/db";
import { inngest } from "./client";
import { generateText } from "ai";
import { createGoogleGenerativeAI } from "@ai-sdk/google";

const google = createGoogleGenerativeAI()

export const execute = inngest.createFunction(
  { id: "execute-ai"},
  { event: "execute/ai" },
  async ({ event, step }) => {

    const {steps} = await step.ai.wrap(
      "gemini-generate-text" ,
      generateText, {
        model: google("gemini-2.5-flash"),
        system: "You are a helpful assistant",
        prompt:"2 +2 = ?"
      }
    )

    return steps;
    
  },
);

 

API 라우트에 함수 등록

src/app/api/inngest/route.ts 에 적용

import { serve } from "inngest/next";
import { inngest } from "@/inngest/client"
import { execute } from "@/inngest/functions";

export const {GET, POST, PUT} = serve({
  client: inngest,
  functions:[
    execute
  ]
})

 

Inngest 에서 작업 확인 가능

 

작업 시뮬레이션 추가

실제 작업 시간을 시뮬레이션하기 위해 대기 시간을 추가해 봤다.

src/inngest/functions.ts

// src/inngest/functions.ts
export const execute = inngest.createFunction(
  { id: "execute-ai" },
  { event: "execute/ai" },
  async ({ event, step }) => {
    // 5초 대기 (작업 시뮬레이션)
    await step.sleep("pretend", "5s");

    const { steps } = await step.ai.wrap(
      "gemini-generate-text",
      generateText, {
        model: google("gemini-2.5-flash"),
        system: "You are a helpful assistant",
        prompt: "2 + 2 = ?"
      }
    );

    return steps;
  }
);

 

 

프론트엔드 UX 개선

src/app/page.tsx // 사용자에게 즉각적인 피드백을 제공

const testAi = useMutation(trpc.testAi.mutationOptions({
    onSuccess : () => {
      toast.success("작업 성공")
    }
}))

...

<Button 
    disabled={testAi.isPending} 
    onClick={() => testAi.mutate()}
>
	Test AI
</Button>

 

 

작동 방식

이제 "Test AI" 버튼을 클릭하면:

1. 즉시 응답: 사용자는 "작업 성공" 토스트 메시지를 즉시 받는다
2. 백그라운드 실행: 실제 AI 작업은 백그라운드에서 계속 진행된다
3. 작업 모니터링: Inngest 대시보드(http://localhost:8288/runs)에서 작업 상태를 확인할 수 있다

AI SDK와 Inngest를 통합하면:

• 사용자 경험 향상: 긴 AI 작업 시간 동안 기다리지 않아도 된다
• 안정성: 네트워크 타임아웃이나 연결 끊김 걱정이 없다
• 확장성: 여러 AI 작업을 동시에 처리할 수 있다
• 모니터링: 모든 작업을 Inngest 대시보드에서 추적할 수 있다

이 구조는 다음과 같은 실제 사용 사례에 적용할 수 있다.

• 긴 문서 요약
• 이미지 생성
• 비디오 자막 생성
• 대량 데이터 분석
• 복잡한 AI 파이프라인