ai-handler

Integrate Replicate AI models with background processing, S3 storage, and credit systems

242 stars

Best use case

ai-handler is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Integrate Replicate AI models with background processing, S3 storage, and credit systems

Integrate Replicate AI models with background processing, S3 storage, and credit systems

Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.

Practical example

Example input

Use the "ai-handler" skill to help with this workflow task. Context: Integrate Replicate AI models with background processing, S3 storage, and credit systems

Example output

A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.

When to use this skill

  • Use this skill when you want a reusable workflow rather than writing the same prompt again and again.

When not to use this skill

  • Do not use this when you only need a one-off answer and do not need a reusable workflow.
  • Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ai-handler/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/aayushbaniya2006/ai-handler/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ai-handler/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ai-handler Compares

Feature / Agentai-handlerStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Integrate Replicate AI models with background processing, S3 storage, and credit systems

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Replicate AI Handler Skill

This skill provides a production-ready pattern for integrating Replicate AI models. It handles long-running predictions using Inngest background jobs, stores results in S3, manages user credits, and updates database state.

## Architecture

1.  **Trigger**: User requests a generation via API (e.g., `/api/app/ai-images`).
2.  **Validation**: Check/deduct user credits.
3.  **State**: Create a database record with `status: "processing"`.
4.  **Queue**: Trigger an Inngest function to handle the Replicate API call.
5.  **Processing**:
    -   Call Replicate API.
    -   Wait for completion (polling or webhook).
    -   Download result and upload to S3 (server-side).
6.  **Completion**: Update database record with S3 URL and `status: "completed"`.
7.  **Failure**: Refund credits if failed (optional) and update status to `failed`.

## Prerequisites

-   `replicate` package installed (`npm install replicate`).
-   `REPLICATE_API_TOKEN` in `.env`.
-   S3 and Inngest configured.

## Implementation Steps

### 1. API Route (Trigger)
`src/app/api/app/generate/route.ts`

```typescript
import withAuthRequired from "@/lib/auth/withAuthRequired";
import { db } from "@/db";
import { generations } from "@/db/schema";
import { inngest } from "@/lib/inngest/client";
import { checkCredits, deductCredits } from "@/lib/credits"; // Hypothetical helpers

export const POST = withAuthRequired(async (req, { session }) => {
  const body = await req.json();
  
  // 1. Check Credits
  const hasCredits = await checkCredits(session.user.id, "image_generation", 1);
  if (!hasCredits) return new Response("Insufficient credits", { status: 403 });

  // 2. Create DB Record (Pending)
  const [record] = await db.insert(generations).values({
    userId: session.user.id,
    prompt: body.prompt,
    status: "processing",
  }).returning();

  // 3. Deduct Credits (Optimistic)
  await deductCredits(session.user.id, "image_generation", 1, { source: "api", refId: record.id });

  // 4. Trigger Background Job
  await inngest.send({
    name: "app/ai.generate",
    data: {
      generationId: record.id,
      prompt: body.prompt,
      userId: session.user.id
    }
  });

  return Response.json({ id: record.id, status: "processing" });
});
```

### 2. Inngest Function (Processor)
`src/lib/inngest/functions/app/ai/generate.ts`

```typescript
import { inngest } from "@/lib/inngest/client";
import Replicate from "replicate";
import uploadFromServer from "@/lib/s3/uploadFromServer";
import { db } from "@/db";
import { generations } from "@/db/schema";
import { eq } from "drizzle-orm";

const replicate = new Replicate({ auth: process.env.REPLICATE_API_TOKEN });

export const generateAI = inngest.createFunction(
  { id: "ai-generation-worker", concurrency: 5 },
  { event: "app/ai.generate" },
  async ({ event, step }) => {
    const { generationId, prompt } = event.data;

    try {
      // 1. Call Replicate (Step ensures retries on network error)
      const prediction = await step.run("call-replicate", async () => {
        return await replicate.predictions.create({
          version: "model-version-hash",
          input: { prompt }
        });
      });

      // 2. Wait for completion
      // Replicate usually takes time. We can use waitForEvent if using webhooks, 
      // or simple polling loop with sleep if webhooks aren't set up.
      // For simplicity, here is a polling pattern using sleep:
      let finalPrediction = prediction;
      while (finalPrediction.status !== "succeeded" && finalPrediction.status !== "failed") {
        await step.sleep("wait-for-gpu", "5s");
        finalPrediction = await step.run("check-status", () => 
          replicate.predictions.get(prediction.id)
        );
      }

      if (finalPrediction.status === "failed") {
        throw new Error(finalPrediction.error);
      }

      // 3. Upload to S3
      // Replicate returns a temporary URL. We must persist it.
      const outputUrl = finalPrediction.output[0]; // Adjust based on model output
      
      const s3Url = await step.run("upload-to-s3", async () => {
        // Fetch image buffer
        const response = await fetch(outputUrl);
        const arrayBuffer = await response.arrayBuffer();
        const base64 = Buffer.from(arrayBuffer).toString("base64");

        // Use existing S3 skill
        return await uploadFromServer({
          file: base64,
          path: `generations/${generationId}.png`,
          contentType: "image/png"
        });
      });

      // 4. Update DB
      await step.run("update-db", async () => {
        await db.update(generations)
          .set({ status: "completed", url: s3Url })
          .where(eq(generations.id, generationId));
      });

    } catch (error) {
      // Handle Failure
      await step.run("mark-failed", async () => {
        await db.update(generations)
          .set({ status: "failed" })
          .where(eq(generations.id, generationId));
        
        // Optional: Refund credits here
      });
      throw error; // Re-throw to show failure in Inngest dashboard
    }
  }
);
```

Related Skills

error-handler-advisor

242
from aiskillstore/marketplace

Proactively reviews error handling patterns and suggests improvements using Result types, proper error propagation, and idiomatic patterns. Activates when users write error handling code or use unwrap/expect.

ui-handler

242
from aiskillstore/marketplace

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

theme-handler

242
from aiskillstore/marketplace

Manage and update application themes using shadcn and tweakcn.

stripe-handler

242
from aiskillstore/marketplace

Handle Stripe payments, custom checkouts, and webhook fulfillment outside of standard plans/credits.

seo-handler

242
from aiskillstore/marketplace

Manage SEO, sitemaps, and metadata for optimal search engine visibility

s3-upload-handler

242
from aiskillstore/marketplace

Handle S3 file uploads including UI components, client-side logic, and server-side processing

replicate-handler

242
from aiskillstore/marketplace

Integrate with Replicate AI for running models (image generation, LLMs, etc.).

plate-handler

242
from aiskillstore/marketplace

Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.

plans-handler

242
from aiskillstore/marketplace

Manage subscription plans, pricing, and quotas. Use when adding plan features, updating limits, or building pricing pages.

inngest-handler

242
from aiskillstore/marketplace

Create and manage Inngest functions for reliable background jobs, workflows, and scheduled tasks.

env-handler

242
from aiskillstore/marketplace

Manage environment variables securely. Handles distinction between .env (template) and .env.local (secrets).

email-handler

242
from aiskillstore/marketplace

Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.