June 6, 2026 10 min read Developers

Building a Prompt Pipeline
with ZETRAX SDK and Next.js

A comprehensive step-by-step developer tutorial showing how to build dynamic prompting pipelines using ZETRAX, Next.js 15, and Server Actions.

In modern web applications, integrating generative AI is no longer just about sending a direct request to OpenAI or Anthropic. To achieve consistent quality and guardrails, developers must construct robust prompt pipelines that handle template rendering, validation, dynamic context injection, and system formatting before the request ever hits an LLM provider.

In this technical tutorial, we walk through how to build a dynamic, production-ready prompt pipeline using the official ZETRAX SDK within a Next.js 15 app, taking advantage of React Server Actions and streaming responses.

Prerequisites

Before starting, make sure you have the following:

Node.js 18+ installed on your machine
A Next.js 15 application setup (App Router)
A free ZETRAX.app API Key

Step 1: Installing the ZETRAX SDK

First, install the official ZETRAX developer SDK in your project directory:

Terminal

npm install @zetrax/sdk

Step 2: Configuring Environment Variables

Create or update your .env.local file in the root of your Next.js project and add your API credentials:

.env.local

ZETRAX_API_KEY=zx_live_59f4483e...
NEXT_PUBLIC_APP_URL=http://localhost:3000

Step 3: Initializing the ZETRAX Client

Create a utility file to initialize the client singleton. This ensures we don't spin up redundant connections during hot reloading in development.

lib/zetrax.ts

import { ZetraxClient } from '@zetrax/sdk';

const globalForZetrax = global as unknown as { zetrax: ZetraxClient };

export const zetrax = globalForZetrax.zetrax || new ZetraxClient({
  apiKey: process.env.ZETRAX_API_KEY,
});

if (process.env.NODE_ENV !== 'production') globalForZetrax.zetrax = zetrax;

Step 4: Creating a Server Action for Prompt Generation

Now, let's create a React Server Action to compile prompts dynamically based on user input, using ZETRAX's advanced templating and negative prompt matching capabilities.

app/actions/prompt.ts

'use server';

import { zetrax } from '@/lib/zetrax';

export async function generateStructuredPrompt(formData: FormData) {
  const subject = formData.get('subject') as string;
  const category = formData.get('category') as string;

  if (!subject) {
    return { error: 'Subject is required' };
  }

  try {
    const pipeline = await zetrax.pipelines.compile({
      templateId: category === 'cinematic' ? 'tpl_drone' : 'tpl_portrait',
      variables: {
        subject: subject,
        aspectRatio: '16:9',
        quality: 'ultra-detailed'
      }
    });

    return { 
      success: true, 
      prompt: pipeline.compiledPrompt,
      negatives: pipeline.compiledNegatives 
    };
  } catch (err: any) {
    return { error: err.message || 'Pipeline failed to compile' };
  }
}

Step 5: Implementing the UI Component

Let's construct a simple client form component in Next.js that invokes our Server Action and renders the generated structured output in real time.

app/components/PromptForm.tsx

'use client';

import { useState } from 'react';
import { generateStructuredPrompt } from '../actions/prompt';

export default function PromptForm() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const formData = new FormData(e.currentTarget);
    const res = await generateStructuredPrompt(formData);
    setResult(res);
    setLoading(false);
  };

  return (
    
      
        
        
        
      

      {result?.success && (
        
          Compiled Prompt:
          {result.prompt}
          Negatives:
          {result.negatives}
        
      )}
    
  );
}

Conclusion

By delegating prompt compilation, structure, and variable parsing to the ZETRAX SDK, you eliminate hardcoded template strings and ensure your prompt structures remain version-controlled and highly adaptable. This setup is fully scalable and ready to be connected directly to your streaming chat endpoints.

To learn more about advanced SDK integrations, check out the official ZETRAX SDK Documentation.

Building a Prompt Pipelinewith ZETRAX SDK and Next.js