diff --git a/.env.example b/.env.example
index 3e6995f..45397d4 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,6 @@
 BACKEND_URL=http://localhost:8000
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
\ No newline at end of file
+
+GUARDRAILS_URL = http://localhost:8001
+GUARDRAILS_TOKEN = 
+
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
diff --git a/app/(main)/coming-soon/guardrails/page.tsx b/app/(main)/coming-soon/guardrails/page.tsx
deleted file mode 100644
index 771d966..0000000
--- a/app/(main)/coming-soon/guardrails/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Guardrails - Coming Soon Page
- */
-
-import ComingSoon from "@/app/components/ComingSoon";
-
-export default function GuardrailsPage() {
-  return (
-    <ComingSoon
-      featureName="Guardrails"
-      description="Implement safety checks and content filters for AI outputs. Ensure responsible AI deployment with customizable guardrails."
-    />
-  );
-}
diff --git a/app/(main)/configurations/prompt-editor/page.tsx b/app/(main)/configurations/prompt-editor/page.tsx
index 7e4b4e0..8f350be 100644
--- a/app/(main)/configurations/prompt-editor/page.tsx
+++ b/app/(main)/configurations/prompt-editor/page.tsx
@@ -294,6 +294,12 @@ function PromptEditorContent() {
             }),
           },
         },
+        ...(currentConfigBlob.input_guardrails?.length && {
+          input_guardrails: currentConfigBlob.input_guardrails,
+        }),
+        ...(currentConfigBlob.output_guardrails?.length && {
+          output_guardrails: currentConfigBlob.output_guardrails,
+        }),
       };
 
       const existingConfigMeta = allConfigMeta.find(
@@ -502,6 +508,7 @@ function PromptEditorContent() {
                         isSaving={isSaving}
                         collapsed={!showConfigPane}
                         onToggle={() => setShowConfigPane(!showConfigPane)}
+                        apiKey={activeKey?.key ?? ""}
                       />
                     </div>
                   </div>
diff --git a/app/(main)/guardrails/page.tsx b/app/(main)/guardrails/page.tsx
new file mode 100644
index 0000000..7ade59a
--- /dev/null
+++ b/app/(main)/guardrails/page.tsx
@@ -0,0 +1,522 @@
+/**
+ * Guardrails — 2-panel layout:
+ * [LEFT: Config Form] | [RIGHT: Saved Configs List]
+ */
+
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Sidebar from "@/app/components/Sidebar";
+import { colors } from "@/app/lib/colors";
+import { useApp } from "@/app/lib/context/AppContext";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/components/Toast";
+import { apiFetch } from "@/app/lib/apiClient";
+import PageHeader from "@/app/components/PageHeader";
+import {
+  Validator,
+  SavedValidatorConfig,
+  formatValidatorName,
+} from "@/app/components/guardrails/types";
+import ValidatorConfigPanel from "@/app/components/guardrails/ValidatorConfigPanel";
+import { TrashIcon } from "@/app/components/icons";
+import validatorMeta from "@/app/components/guardrails/validators.json";
+
+interface OrgContext {
+  organization_id: number;
+  project_id: number;
+}
+
+interface ValidatorMeta {
+  validator_type: string;
+  validator_name: string;
+  description: string;
+}
+
+const metaMap: Record<string, ValidatorMeta> = (
+  validatorMeta as ValidatorMeta[]
+).reduce((acc, v) => ({ ...acc, [v.validator_type]: v }), {});
+
+export default function GuardrailsPage() {
+  const { sidebarCollapsed } = useApp();
+  const { activeKey, isHydrated } = useAuth();
+  const toast = useToast();
+
+  // Org/project context from API key verification
+  const [orgContext, setOrgContext] = useState<OrgContext | null>(null);
+
+  // Available validators from API
+  const [validators, setValidators] = useState<Validator[]>([]);
+  const [validatorsLoading, setValidatorsLoading] = useState(true);
+
+  // Saved configs from API
+  const [savedConfigs, setSavedConfigs] = useState<SavedValidatorConfig[]>([]);
+  const [savedConfigsLoading, setSavedConfigsLoading] = useState(true);
+
+  // Form state
+  const [selectedValidatorType, setSelectedValidatorType] = useState<
+    string | null
+  >(null);
+  const [selectedSavedConfig, setSelectedSavedConfig] =
+    useState<SavedValidatorConfig | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Step 1: verify API key → get org/project IDs
+  useEffect(() => {
+    if (!isHydrated) return;
+    if (!activeKey?.key) {
+      toast.error(
+        "No API key found. Please add your Kaapi API key in the Keystore.",
+      );
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    apiFetch<any>("/api/apikeys/verify", activeKey.key)
+      .then((data) => {
+        const org_id = data?.data?.organization_id;
+        const proj_id = data?.data?.project_id;
+        if (org_id != null && proj_id != null) {
+          setOrgContext({ organization_id: org_id, project_id: proj_id });
+        } else {
+          toast.error("Could not determine organization/project from API key");
+        }
+      })
+      .catch((e: Error) =>
+        toast.error(
+          e.message ||
+            "API key verification failed — check your key in the Keystore",
+        ),
+      );
+  }, [isHydrated, activeKey?.key]);
+
+  // Step 2: fetch available validators (no auth needed for catalog)
+  useEffect(() => {
+    setValidatorsLoading(true);
+    fetch("/api/guardrails")
+      .then((r) => r.json())
+      .then((data) => {
+        const list: Validator[] = Array.isArray(data?.validators)
+          ? data.validators
+          : [];
+        setValidators(list);
+      })
+      .catch(() => toast.error("Failed to load validators"))
+      .finally(() => setValidatorsLoading(false));
+  }, []);
+
+  // Step 3: fetch saved configs once we have org/project context
+  const configsQueryString = orgContext
+    ? `?organization_id=${parseInt(String(orgContext.organization_id), 10)}&project_id=${parseInt(String(orgContext.project_id), 10)}`
+    : null;
+
+  const fetchSavedConfigs = useCallback(() => {
+    if (!configsQueryString) return;
+    setSavedConfigsLoading(true);
+    fetch(`/api/guardrails/validators/configs${configsQueryString}`)
+      .then((r) => r.json())
+      .then((data) => {
+        const list: SavedValidatorConfig[] = Array.isArray(data?.data?.configs)
+          ? data.data.configs
+          : Array.isArray(data?.data)
+            ? data.data
+            : Array.isArray(data?.configs)
+              ? data.configs
+              : Array.isArray(data)
+                ? data
+                : [];
+        setSavedConfigs(list);
+      })
+      .catch(() => toast.error("Failed to load saved configs"))
+      .finally(() => setSavedConfigsLoading(false));
+  }, [configsQueryString]);
+
+  useEffect(() => {
+    fetchSavedConfigs();
+  }, [fetchSavedConfigs]);
+
+  // Load a saved config into the form
+  const handleSelectSavedConfig = (cfg: SavedValidatorConfig) => {
+    setSelectedSavedConfig(cfg);
+    setSelectedValidatorType(cfg.type);
+  };
+
+  // Reset the form
+  const handleClearForm = () => {
+    setSelectedValidatorType(null);
+    setSelectedSavedConfig(null);
+  };
+
+  const handleDeleteConfig = async (configId: string) => {
+    if (!configsQueryString) return;
+    try {
+      const res = await fetch(
+        `/api/guardrails/validators/configs/${configId}${configsQueryString}`,
+        { method: "DELETE" },
+      );
+      if (!res.ok) throw new Error("Delete failed");
+      toast.success("Config deleted");
+      if (selectedSavedConfig?.id === configId) {
+        handleClearForm();
+      }
+      fetchSavedConfigs();
+    } catch {
+      toast.error("Failed to delete config");
+    }
+  };
+
+  const handleSaveConfig = async (
+    name: string,
+    configValues: Record<string, unknown>,
+  ) => {
+    if (!name.trim()) {
+      toast.error("Please enter a config name");
+      return;
+    }
+    if (!configsQueryString) {
+      toast.error("API key not verified yet");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const isUpdate = !!selectedSavedConfig;
+      const url = isUpdate
+        ? `/api/guardrails/validators/configs/${selectedSavedConfig!.id}${configsQueryString}`
+        : `/api/guardrails/validators/configs${configsQueryString}`;
+
+      // PATCH only accepts these five fields — strip everything else
+      const body = isUpdate
+        ? {
+            name: configValues.name,
+            type: configValues.type,
+            stage: configValues.stage,
+            on_fail_action: configValues.on_fail_action,
+            is_enabled: configValues.is_enabled,
+          }
+        : configValues;
+
+      const res = await fetch(url, {
+        method: isUpdate ? "PATCH" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(
+          err?.error ?? (isUpdate ? "Update failed" : "Save failed"),
+        );
+      }
+      toast.success(
+        isUpdate ? `Config "${name}" updated` : `Config "${name}" saved`,
+      );
+      fetchSavedConfigs();
+      setSelectedSavedConfig(null);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to save config");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const existingValues = selectedSavedConfig
+    ? {
+        ...(selectedSavedConfig.config ?? {}),
+        stage: selectedSavedConfig.stage,
+        on_fail_action: selectedSavedConfig.on_fail_action,
+        is_enabled: selectedSavedConfig.is_enabled,
+      }
+    : null;
+
+  return (
+    <div
+      className="w-full h-screen flex"
+      style={{ backgroundColor: colors.bg.secondary }}
+    >
+      <Sidebar collapsed={sidebarCollapsed} activeRoute="/guardrails" />
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Page header */}
+        <PageHeader
+          title="Guardrails"
+          subtitle="Configure validators for safe and reliable AI"
+        />
+
+        {/* 2-panel body */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* LEFT: Config form panel */}
+          <div
+            className="flex-shrink-0 border-r overflow-hidden"
+            style={{ width: "420px", borderColor: colors.border }}
+          >
+            <ValidatorConfigPanel
+              validators={validators}
+              validatorsLoading={validatorsLoading}
+              selectedType={selectedValidatorType}
+              onTypeChange={setSelectedValidatorType}
+              existingValues={existingValues}
+              existingName={selectedSavedConfig?.name}
+              isSaving={isSaving}
+              apiKey={activeKey?.key ?? ""}
+              onSave={handleSaveConfig}
+              onClear={handleClearForm}
+            />
+          </div>
+
+          {/* RIGHT: Saved configs list */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <SavedConfigsList
+              configs={savedConfigs}
+              isLoading={savedConfigsLoading}
+              selectedConfigId={selectedSavedConfig?.id ?? null}
+              onSelectConfig={handleSelectSavedConfig}
+              onDeleteConfig={handleDeleteConfig}
+              onNewConfig={handleClearForm}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Saved Configs List Panel ────────────────────────────────────────────────
+
+interface SavedConfigsListProps {
+  configs: SavedValidatorConfig[];
+  isLoading: boolean;
+  selectedConfigId: string | null;
+  onSelectConfig: (cfg: SavedValidatorConfig) => void;
+  onDeleteConfig: (id: string) => void;
+  onNewConfig: () => void;
+}
+
+function SavedConfigsList({
+  configs,
+  isLoading,
+  selectedConfigId,
+  onSelectConfig,
+  onDeleteConfig,
+  onNewConfig,
+}: SavedConfigsListProps) {
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Panel header */}
+      <div
+        className="flex items-center justify-between px-5 py-3 border-b shrink-0"
+        style={{
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
+        <div>
+          <div
+            className="text-sm font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Saved Configurations
+          </div>
+          {!isLoading && (
+            <div className="text-xs" style={{ color: colors.text.secondary }}>
+              {configs.length} config{configs.length !== 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+        <button
+          onClick={onNewConfig}
+          className="text-sm px-3 py-1.5 rounded-md font-medium transition-colors"
+          style={{ backgroundColor: colors.accent.primary, color: "#ffffff" }}
+          onMouseEnter={(e) =>
+            (e.currentTarget.style.backgroundColor = colors.accent.hover)
+          }
+          onMouseLeave={(e) =>
+            (e.currentTarget.style.backgroundColor = colors.accent.primary)
+          }
+        >
+          + New Config
+        </button>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-auto p-5">
+        {isLoading ? (
+          <div className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                className="h-24 rounded-lg animate-pulse border"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  borderColor: colors.border,
+                }}
+              />
+            ))}
+          </div>
+        ) : configs.length === 0 ? (
+          <div
+            className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg py-16 text-center"
+            style={{ borderColor: colors.border }}
+          >
+            <svg
+              className="w-10 h-10 mb-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              style={{ color: colors.border }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+              />
+            </svg>
+            <p
+              className="text-sm font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              No saved configurations yet
+            </p>
+            <p className="text-xs" style={{ color: colors.text.secondary }}>
+              Select a validator type on the left and save your first config
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {configs.map((cfg) => {
+              const isSelected = selectedConfigId === cfg.id;
+              const displayName =
+                metaMap[cfg.type]?.validator_name ??
+                formatValidatorName(cfg.type);
+              return (
+                <div
+                  key={cfg.id}
+                  className="rounded-xl border shadow-sm cursor-pointer transition-shadow hover:shadow-md"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    borderColor: colors.border,
+                    borderLeftWidth: "4px",
+                    borderLeftColor: isSelected
+                      ? colors.status.success
+                      : "#d97706",
+                  }}
+                  onClick={() => onSelectConfig(cfg)}
+                >
+                  <div className="flex items-center gap-3 px-4 py-4">
+                    {/* Text + badges */}
+                    <div className="flex-1 min-w-0">
+                      <div
+                        className="text-sm font-semibold mb-2 truncate"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {cfg.name}
+                      </div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span
+                          className="text-[11px] px-2 py-0.5 rounded-md border"
+                          style={{
+                            color: colors.text.secondary,
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.secondary,
+                          }}
+                        >
+                          {displayName}
+                        </span>
+                        {cfg.stage && (
+                          <span
+                            className="text-[11px] px-2 py-0.5 rounded-md border"
+                            style={{
+                              color: colors.text.secondary,
+                              borderColor: colors.border,
+                              backgroundColor: colors.bg.secondary,
+                            }}
+                          >
+                            {cfg.stage}
+                          </span>
+                        )}
+                        {cfg.on_fail_action && (
+                          <span
+                            className="text-[11px] px-2 py-0.5 rounded-md border"
+                            style={{
+                              color: colors.text.secondary,
+                              borderColor: colors.border,
+                              backgroundColor: colors.bg.secondary,
+                            }}
+                          >
+                            on fail: {cfg.on_fail_action}
+                          </span>
+                        )}
+                        {cfg.is_enabled === false && (
+                          <span className="text-[11px] px-2 py-0.5 rounded-md border bg-amber-50 border-amber-200 text-amber-700">
+                            disabled
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Action buttons */}
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSelectConfig(cfg);
+                        }}
+                        className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border transition-colors font-medium"
+                        style={{
+                          borderColor: colors.border,
+                          color: colors.text.primary,
+                          backgroundColor: colors.bg.secondary,
+                        }}
+                        onMouseEnter={(e) =>
+                          (e.currentTarget.style.backgroundColor = "#e5e5e5")
+                        }
+                        onMouseLeave={(e) =>
+                          (e.currentTarget.style.backgroundColor =
+                            colors.bg.secondary)
+                        }
+                      >
+                        <svg
+                          className="w-3 h-3"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                          />
+                        </svg>
+                        Edit
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDeleteConfig(cfg.id);
+                        }}
+                        className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border transition-colors font-medium"
+                        style={{
+                          borderColor: "#fecaca",
+                          color: colors.status.error,
+                          backgroundColor: "#fff5f5",
+                        }}
+                        onMouseEnter={(e) =>
+                          (e.currentTarget.style.backgroundColor = "#fee2e2")
+                        }
+                        onMouseLeave={(e) =>
+                          (e.currentTarget.style.backgroundColor = "#fff5f5")
+                        }
+                      >
+                        <TrashIcon className="w-3 h-3" />
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/api/apikeys/verify/route.ts b/app/api/apikeys/verify/route.ts
new file mode 100644
index 0000000..faf3ee5
--- /dev/null
+++ b/app/api/apikeys/verify/route.ts
@@ -0,0 +1,14 @@
+import { apiClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { status, data } = await apiClient(request, "/api/v1/apikeys/verify");
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/guardrails/ban_lists/[ban_list_id]/route.ts b/app/api/guardrails/ban_lists/[ban_list_id]/route.ts
new file mode 100644
index 0000000..18cf090
--- /dev/null
+++ b/app/api/guardrails/ban_lists/[ban_list_id]/route.ts
@@ -0,0 +1,67 @@
+import { guardrailsClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ ban_list_id: string }> },
+) {
+  try {
+    const { ban_list_id } = await params;
+    const { status, data } = await guardrailsClient(
+      request,
+      `/api/v1/guardrails/ban_lists/${ban_list_id}`,
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ ban_list_id: string }> },
+) {
+  try {
+    const { ban_list_id } = await params;
+    const body = await request.json();
+    const { status, data } = await guardrailsClient(
+      request,
+      `/api/v1/guardrails/ban_lists/${ban_list_id}`,
+      {
+        method: "PUT",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ ban_list_id: string }> },
+) {
+  try {
+    const { ban_list_id } = await params;
+    const { status, data } = await guardrailsClient(
+      request,
+      `/api/v1/guardrails/ban_lists/${ban_list_id}`,
+      {
+        method: "DELETE",
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/guardrails/ban_lists/route.ts b/app/api/guardrails/ban_lists/route.ts
new file mode 100644
index 0000000..4aa7124
--- /dev/null
+++ b/app/api/guardrails/ban_lists/route.ts
@@ -0,0 +1,37 @@
+import { guardrailsClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { status, data } = await guardrailsClient(
+      request,
+      "/api/v1/guardrails/ban_lists",
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { status, data } = await guardrailsClient(
+      request,
+      "/api/v1/guardrails/ban_lists",
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/guardrails/route.ts b/app/api/guardrails/route.ts
new file mode 100644
index 0000000..51e6c76
--- /dev/null
+++ b/app/api/guardrails/route.ts
@@ -0,0 +1,30 @@
+import { guardrailsClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+function getAuthHeader(): string | undefined {
+  const token = process.env.GUARDRAILS_TOKEN;
+  return token ? `Bearer ${token}` : undefined;
+}
+
+export async function GET(request: NextRequest) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const { status, data } = await guardrailsClient(
+      request,
+      "/api/v1/guardrails/",
+      { authHeader },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/guardrails/validators/configs/[config_id]/route.ts b/app/api/guardrails/validators/configs/[config_id]/route.ts
new file mode 100644
index 0000000..358c500
--- /dev/null
+++ b/app/api/guardrails/validators/configs/[config_id]/route.ts
@@ -0,0 +1,107 @@
+import { guardrailsClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+function getAuthHeader(): string | undefined {
+  const token = process.env.GUARDRAILS_TOKEN;
+  return token ? `Bearer ${token}` : undefined;
+}
+
+function buildEndpoint(request: NextRequest, config_id: string): string {
+  const { searchParams } = new URL(request.url);
+  const params = new URLSearchParams();
+  const organizationId = searchParams.get("organization_id");
+  const projectId = searchParams.get("project_id");
+  if (organizationId) params.append("organization_id", organizationId);
+  if (projectId) params.append("project_id", projectId);
+  const qs = params.toString();
+  return `/api/v1/guardrails/validators/configs/${config_id}${qs ? `?${qs}` : ""}`;
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ config_id: string }> },
+) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const { config_id } = await params;
+    const { status, data } = await guardrailsClient(
+      request,
+      buildEndpoint(request, config_id),
+      { authHeader },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ config_id: string }> },
+) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const { config_id } = await params;
+    const body = await request.json();
+    const { status, data } = await guardrailsClient(
+      request,
+      buildEndpoint(request, config_id),
+      {
+        method: "PATCH",
+        body: JSON.stringify(body),
+        authHeader,
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ config_id: string }> },
+) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const { config_id } = await params;
+    const { status, data } = await guardrailsClient(
+      request,
+      buildEndpoint(request, config_id),
+      {
+        method: "DELETE",
+        authHeader,
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/guardrails/validators/configs/route.ts b/app/api/guardrails/validators/configs/route.ts
new file mode 100644
index 0000000..4b41529
--- /dev/null
+++ b/app/api/guardrails/validators/configs/route.ts
@@ -0,0 +1,69 @@
+import { guardrailsClient } from "@/app/lib/apiClient";
+import { NextResponse, NextRequest } from "next/server";
+
+function getAuthHeader(): string | undefined {
+  const token = process.env.GUARDRAILS_TOKEN;
+  return token ? `Bearer ${token}` : undefined;
+}
+
+function buildEndpoint(request: NextRequest): string {
+  const { searchParams } = new URL(request.url);
+  const params = new URLSearchParams();
+  const organizationId = searchParams.get("organization_id");
+  const projectId = searchParams.get("project_id");
+  if (organizationId) params.append("organization_id", organizationId);
+  if (projectId) params.append("project_id", projectId);
+  const qs = params.toString();
+  return `/api/v1/guardrails/validators/configs${qs ? `?${qs}` : ""}`;
+}
+
+export async function GET(request: NextRequest) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const { status, data } = await guardrailsClient(
+      request,
+      buildEndpoint(request),
+      { authHeader },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const authHeader = getAuthHeader();
+  if (!authHeader) {
+    return NextResponse.json(
+      { error: "Missing GUARDRAILS_TOKEN environment variable" },
+      { status: 500 },
+    );
+  }
+  try {
+    const body = await request.json();
+    const { status, data } = await guardrailsClient(
+      request,
+      buildEndpoint(request),
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+        authHeader,
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/InfoTooltip.tsx b/app/components/InfoTooltip.tsx
new file mode 100644
index 0000000..7a5af45
--- /dev/null
+++ b/app/components/InfoTooltip.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface InfoTooltipProps {
+  text: string;
+}
+
+export default function InfoTooltip({ text }: InfoTooltipProps) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <span
+      className="relative inline-flex items-center ml-1"
+      style={{ verticalAlign: "text-bottom" }}
+    >
+      <button
+        type="button"
+        className="w-3.5 h-3.5 rounded-full text-[10px] font-bold flex items-center justify-center leading-none select-none"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          color: colors.text.secondary,
+          border: `1px solid ${colors.border}`,
+        }}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+      >
+        i
+      </button>
+      {visible && (
+        <div
+          className="absolute z-50 left-5 top-0 w-64 text-xs rounded-lg p-2.5 shadow-lg"
+          style={{
+            backgroundColor: colors.bg.primary,
+            border: `1px solid ${colors.border}`,
+            color: colors.text.secondary,
+            lineHeight: "1.5",
+          }}
+        >
+          {text}
+        </div>
+      )}
+    </span>
+  );
+}
diff --git a/app/components/MultiSelect.tsx b/app/components/MultiSelect.tsx
new file mode 100644
index 0000000..9d94f14
--- /dev/null
+++ b/app/components/MultiSelect.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface MultiSelectProps {
+  options: string[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+}
+
+export default function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder,
+}: MultiSelectProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const toggle = (opt: string) => {
+    if (value.includes(opt)) {
+      onChange(value.filter((v) => v !== opt));
+    } else {
+      onChange([...value, opt]);
+    }
+  };
+
+  const remove = (opt: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(value.filter((v) => v !== opt));
+  };
+
+  const unselected = options.filter((o) => !value.includes(o));
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Input box with tags */}
+      <div
+        className="min-h-[36px] w-full flex flex-wrap items-center gap-1.5 rounded-md border px-2.5 py-1.5 cursor-text"
+        style={{
+          borderColor: open ? colors.accent.primary : colors.border,
+          backgroundColor: colors.bg.primary,
+          outline: open ? `1px solid ${colors.accent.primary}` : "none",
+        }}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {/* Selected tags */}
+        {value.map((v) => (
+          <span
+            key={v}
+            className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded"
+            style={{
+              backgroundColor: colors.bg.secondary,
+              color: colors.text.primary,
+              border: `1px solid ${colors.border}`,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {v}
+            <button
+              type="button"
+              onClick={(e) => remove(v, e)}
+              className="leading-none opacity-60 hover:opacity-100"
+              style={{ color: colors.text.primary }}
+              aria-label={`Remove ${v}`}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+
+        {/* Placeholder when nothing selected */}
+        {value.length === 0 && (
+          <span className="text-sm" style={{ color: colors.text.secondary }}>
+            {placeholder ?? "Select options…"}
+          </span>
+        )}
+
+        {/* Chevron */}
+        <svg
+          className="w-4 h-4 flex-shrink-0 ml-auto"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+          style={{ color: colors.text.secondary }}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d={open ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}
+          />
+        </svg>
+      </div>
+
+      {/* Dropdown list */}
+      {open && (
+        <div
+          className="absolute z-50 mt-1 w-full rounded-md shadow-md overflow-auto max-h-52"
+          style={{
+            backgroundColor: colors.bg.primary,
+            border: `1px solid ${colors.border}`,
+          }}
+        >
+          {unselected.length === 0 ? (
+            <p
+              className="px-3 py-2 text-xs"
+              style={{ color: colors.text.secondary }}
+            >
+              All options selected
+            </p>
+          ) : (
+            unselected.map((opt) => (
+              <button
+                key={opt}
+                type="button"
+                onClick={() => toggle(opt)}
+                className="w-full text-left px-3 py-2 text-sm transition-colors"
+                style={{ color: colors.text.primary }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.backgroundColor = "transparent")
+                }
+              >
+                {opt}
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index e97d71c..41167ac 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -14,6 +14,8 @@ import {
   DocumentFileIcon,
   BookOpenIcon,
   GearIcon,
+  SlidersIcon,
+  ShieldCheckIcon,
   ChevronRightIcon,
 } from "@/app/components/icons";
 import { LoginModal } from "@/app/components/auth";
@@ -74,6 +76,45 @@ export default function Sidebar({
     localStorage.setItem("sidebar-expanded-menus", JSON.stringify(newState));
   };
 
+  const navItems: MenuItem[] = [
+    {
+      name: "Evaluations",
+      icon: <ClipboardIcon />,
+      submenu: [
+        { name: "Text", route: "/evaluations" },
+        { name: "Speech-to-Text", route: "/speech-to-text" },
+        { name: "Text-to-Speech", route: "/text-to-speech" },
+      ],
+    },
+    {
+      name: "Documents",
+      route: "/document",
+      icon: <DocumentFileIcon />,
+    },
+    {
+      name: "Knowledge Base",
+      route: "/knowledge-base",
+      icon: <BookOpenIcon />,
+    },
+    {
+      name: "Configurations",
+      icon: <GearIcon className="w-5 h-5" />,
+      submenu: [
+        { name: "Library", route: "/configurations" },
+        { name: "Prompt Editor", route: "/configurations/prompt-editor" },
+      ],
+    },
+    {
+      name: "Guardrails",
+      route: "/guardrails",
+      icon: <ShieldCheckIcon />,
+    },
+    {
+      name: "Settings",
+      route: "/settings/credentials",
+      icon: <SlidersIcon />,
+    },
+  ];
   const handleGateEnter = useCallback((name: string, el: HTMLElement) => {
     if (gateTimeoutRef.current) clearTimeout(gateTimeoutRef.current);
     setHoveredGate(name);
diff --git a/app/components/guardrails/BanListModal.tsx b/app/components/guardrails/BanListModal.tsx
new file mode 100644
index 0000000..d4fb7f9
--- /dev/null
+++ b/app/components/guardrails/BanListModal.tsx
@@ -0,0 +1,252 @@
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface BanListModalProps {
+  onClose: () => void;
+  onCreated: (banList: { id: string; name: string }) => void;
+  apiKey: string;
+}
+
+export default function BanListModal({
+  onClose,
+  onCreated,
+  apiKey,
+}: BanListModalProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [bannedWords, setBannedWords] = useState("");
+  const [domain, setDomain] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleCreate = async () => {
+    if (!name.trim()) {
+      setError("Name is required");
+      return;
+    }
+    if (!bannedWords.trim()) {
+      setError("At least one banned word is required");
+      return;
+    }
+
+    setError("");
+    setIsSaving(true);
+    try {
+      const body = {
+        name: name.trim(),
+        description: description.trim(),
+        banned_words: bannedWords
+          .split(",")
+          .map((w) => w.trim())
+          .filter(Boolean),
+        domain: domain.trim(),
+        is_public: isPublic,
+      };
+      const res = await fetch("/api/guardrails/ban_lists", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-API-KEY": apiKey },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err?.error ?? "Failed to create ban list");
+      }
+      const data = await res.json();
+      onCreated({ id: data.id, name: data.name ?? name.trim() });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Something went wrong");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+
+      {/* Modal */}
+      <div
+        className="relative w-full max-w-md rounded-xl shadow-xl flex flex-col"
+        style={{
+          backgroundColor: colors.bg.primary,
+          border: `1px solid ${colors.border}`,
+        }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-5 py-4 border-b"
+          style={{ borderColor: colors.border }}
+        >
+          <div>
+            <h2
+              className="text-sm font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Create Ban List
+            </h2>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Define a list of words to ban from outputs
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-neutral-100 transition-colors"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+              style={{ color: colors.text.secondary }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4 space-y-4 overflow-y-auto max-h-[70vh]">
+          {error && (
+            <p className="text-xs px-3 py-2 rounded-md bg-red-50 border border-red-200 text-red-600">
+              {error}
+            </p>
+          )}
+
+          <div>
+            <label
+              className="block text-xs font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. profanity-list"
+              className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          <div>
+            <label
+              className="block text-xs font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              Description
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Describe what this ban list covers…"
+              rows={2}
+              className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1 resize-none"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          <div>
+            <label
+              className="block text-xs font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              Banned Words <span className="text-red-500">*</span>
+              <span
+                className="ml-1 font-normal"
+                style={{ color: colors.text.secondary }}
+              >
+                (comma-separated)
+              </span>
+            </label>
+            <textarea
+              value={bannedWords}
+              onChange={(e) => setBannedWords(e.target.value)}
+              placeholder="word1, word2, word3"
+              rows={3}
+              className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1 resize-none"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          <div>
+            <label
+              className="block text-xs font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              Domain
+            </label>
+            <input
+              type="text"
+              value={domain}
+              onChange={(e) => setDomain(e.target.value)}
+              placeholder="e.g. healthcare, finance"
+              className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          <label className="flex items-center gap-2.5 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded"
+            />
+            <span className="text-sm" style={{ color: colors.text.primary }}>
+              Make this ban list public
+            </span>
+          </label>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="flex items-center justify-end gap-2 px-5 py-4 border-t"
+          style={{ borderColor: colors.border }}
+        >
+          <button
+            onClick={onClose}
+            className="px-4 py-1.5 text-sm rounded-lg border transition-colors hover:bg-neutral-50"
+            style={{ borderColor: colors.border, color: colors.text.primary }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={isSaving}
+            className="px-4 py-1.5 text-sm rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            style={{ backgroundColor: colors.accent.primary, color: "#ffffff" }}
+          >
+            {isSaving ? "Creating…" : "Create Ban List"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/guardrails/ValidatorConfigPanel.tsx b/app/components/guardrails/ValidatorConfigPanel.tsx
new file mode 100644
index 0000000..07fa689
--- /dev/null
+++ b/app/components/guardrails/ValidatorConfigPanel.tsx
@@ -0,0 +1,753 @@
+import React, { useEffect, useState } from "react";
+import { colors } from "@/app/lib/colors";
+import { Validator, ValidatorConfigSchema, formatValidatorName } from "./types";
+import BanListModal from "./BanListModal";
+import MultiSelect from "../MultiSelect";
+import InfoTooltip from "@/app/components/InfoTooltip";
+import validatorMeta from "./validators.json";
+
+interface ValidatorMeta {
+  validator_type: string;
+  validator_name: string;
+  description: string;
+}
+
+const metaMap: Record<string, ValidatorMeta> = (
+  validatorMeta as ValidatorMeta[]
+).reduce((acc, v) => ({ ...acc, [v.validator_type]: v }), {});
+
+// Known multi-select options keyed by field name
+const KNOWN_ARRAY_OPTIONS: Record<string, string[]> = {
+  entity_types: [
+    "CREDIT_CARD",
+    "EMAIL_ADDRESS",
+    "IBAN_CODE",
+    "IP_ADDRESS",
+    "LOCATION",
+    "MEDICAL_LICENSE",
+    "NRP",
+    "PERSON",
+    "PHONE_NUMBER",
+    "URL",
+    "IN_AADHAAR",
+    "IN_PAN",
+    "IN_PASSPORT",
+    "IN_VEHICLE_REGISTRATION",
+    "IN_VOTER",
+  ],
+  languages: ["en", "hi"],
+  language: ["en", "hi"],
+};
+
+// Single-select overrides for fields that are technically arrays but only one value makes sense
+const KNOWN_SINGLE_OPTIONS: Record<string, string[]> = {
+  categories: ["generic", "healthcare", "education", "all"],
+};
+
+const FIELD_TOOLTIPS: Record<string, string> = {
+  stage:
+    'Where this validator runs — "input" checks the user\'s message before it reaches the LLM, "output" checks the LLM\'s response before it is returned.',
+  on_fail_action:
+    '"fix" attempts to auto-remediate the violation, "exception" raises an error and blocks the response, "rephrase" asks the model to rewrite the output.',
+};
+
+interface BanList {
+  id: string;
+  name: string;
+}
+
+function BanListField({
+  value,
+  onChange,
+  apiKey,
+}: {
+  value: string | null;
+  onChange: (id: string | null) => void;
+  apiKey: string;
+}) {
+  const [banLists, setBanLists] = useState<BanList[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [bannedWords, setBannedWords] = useState<string[]>([]);
+  const [wordsLoading, setWordsLoading] = useState(false);
+
+  const fetchBanLists = () => {
+    setLoading(true);
+    fetch("/api/guardrails/ban_lists", {
+      headers: { "X-API-KEY": apiKey },
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        const list: BanList[] = Array.isArray(data?.data?.ban_lists)
+          ? data.data.ban_lists
+          : Array.isArray(data?.data)
+            ? data.data
+            : Array.isArray(data?.ban_lists)
+              ? data.ban_lists
+              : Array.isArray(data)
+                ? data
+                : [];
+        setBanLists(list);
+      })
+      .catch(() => setBanLists([]))
+      .finally(() => setLoading(false));
+  };
+
+  const fetchBannedWords = (id: string) => {
+    setWordsLoading(true);
+    setBannedWords([]);
+    fetch(`/api/guardrails/ban_lists/${id}`, {
+      headers: { "X-API-KEY": apiKey },
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        const words: string[] = Array.isArray(data?.banned_words)
+          ? data.banned_words
+          : Array.isArray(data?.data?.banned_words)
+            ? data.data.banned_words
+            : [];
+        setBannedWords(words);
+      })
+      .catch(() => setBannedWords([]))
+      .finally(() => setWordsLoading(false));
+  };
+
+  useEffect(() => {
+    fetchBanLists();
+  }, []);
+
+  useEffect(() => {
+    if (value) {
+      fetchBannedWords(value);
+    } else {
+      setBannedWords([]);
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (e.target.value === "__create__") {
+      setShowModal(true);
+    } else {
+      onChange(e.target.value || null);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <label
+          className="block text-xs font-medium mb-1"
+          style={{ color: colors.text.primary }}
+        >
+          Ban List
+        </label>
+        {loading ? (
+          <div
+            className="h-8 rounded-md animate-pulse"
+            style={{ backgroundColor: colors.bg.secondary }}
+          />
+        ) : (
+          <select
+            value={value ?? ""}
+            onChange={handleChange}
+            className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+              color: colors.text.primary,
+            }}
+          >
+            {banLists.length === 0 ? (
+              <>
+                <option value="" disabled>
+                  No ban lists yet
+                </option>
+                <option value="__create__">+ Create Ban List</option>
+              </>
+            ) : (
+              <>
+                <option value="">Select a ban list…</option>
+                <option value="__create__">+ Create Ban List</option>
+                {banLists.map((bl) => (
+                  <option key={bl.id} value={bl.id}>
+                    {bl.name}
+                  </option>
+                ))}
+              </>
+            )}
+          </select>
+        )}
+
+        {value && (
+          <div className="mt-2">
+            {wordsLoading ? (
+              <div
+                className="h-6 rounded animate-pulse"
+                style={{ backgroundColor: colors.bg.secondary }}
+              />
+            ) : bannedWords.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {bannedWords.map((word) => (
+                  <span
+                    key={word}
+                    className="inline-block text-xs px-2 py-0.5 rounded-full"
+                    style={{
+                      backgroundColor: colors.bg.secondary,
+                      color: colors.text.secondary,
+                    }}
+                  >
+                    {word}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                No words in this ban list.
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {showModal && (
+        <BanListModal
+          onClose={() => setShowModal(false)}
+          onCreated={(bl) => {
+            setShowModal(false);
+            fetchBanLists();
+            onChange(bl.id);
+          }}
+          apiKey={apiKey}
+        />
+      )}
+    </>
+  );
+}
+
+// Resolve a $ref like "#/$defs/GuardrailOnFail" against the schema $defs
+function resolveRef(
+  ref: string,
+  defs: ValidatorConfigSchema["$defs"],
+): string[] {
+  const key = ref.replace("#/$defs/", "");
+  return defs?.[key]?.enum ?? [];
+}
+
+// Build the initial form values from a validator's config schema (using defaults)
+export function buildDefaultValues(
+  schema: ValidatorConfigSchema,
+): Record<string, unknown> {
+  const values: Record<string, unknown> = {};
+  for (const [key, prop] of Object.entries(schema.properties)) {
+    if (key === "type") continue;
+    if ("default" in prop) {
+      values[key] = prop.default;
+    }
+  }
+  return values;
+}
+
+interface FieldProps {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  schema: any;
+  defs: ValidatorConfigSchema["$defs"];
+  value: unknown;
+  onChange: (name: string, value: unknown) => void;
+}
+
+function SchemaField({ name, schema, defs, value, onChange }: FieldProps) {
+  const label =
+    schema.title ??
+    name.replace(/_/g, " ").replace(/\b\w/g, (c: string) => c.toUpperCase());
+  const tooltip = FIELD_TOOLTIPS[name];
+
+  const enumValues: string[] =
+    schema.enum ??
+    (schema.$ref ? resolveRef(schema.$ref, defs) : null) ??
+    (schema.anyOf
+      ? schema.anyOf.reduce(
+          (acc: string[], item: { $ref?: string; enum?: string[] }) => {
+            if (item.$ref) return [...acc, ...resolveRef(item.$ref, defs)];
+            if (item.enum) return [...acc, ...item.enum];
+            return acc;
+          },
+          [],
+        )
+      : null);
+
+  const isArray =
+    schema.type === "array" ||
+    (schema.anyOf &&
+      schema.anyOf.some((item: { type?: string }) => item.type === "array"));
+
+  const labelEl = (
+    <label
+      className="block text-xs font-medium mb-1"
+      style={{ color: colors.text.primary }}
+    >
+      {label}
+      {tooltip && <InfoTooltip text={tooltip} />}
+    </label>
+  );
+
+  const singleOptions = KNOWN_SINGLE_OPTIONS[name];
+  if (singleOptions) {
+    return (
+      <div>
+        {labelEl}
+        <select
+          value={(value as string) ?? ""}
+          onChange={(e) => onChange(name, e.target.value || null)}
+          className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        >
+          <option value="">Select…</option>
+          {singleOptions.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (enumValues && enumValues.length > 0 && !isArray) {
+    return (
+      <div>
+        {labelEl}
+        <select
+          value={(value as string) ?? ""}
+          onChange={(e) => onChange(name, e.target.value)}
+          className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        >
+          {enumValues.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (isArray) {
+    const knownOptions = KNOWN_ARRAY_OPTIONS[name];
+    const selected = Array.isArray(value) ? (value as string[]) : [];
+
+    if (knownOptions) {
+      return (
+        <div>
+          {labelEl}
+          <MultiSelect
+            options={knownOptions}
+            value={selected}
+            onChange={(v) => onChange(name, v.length > 0 ? v : null)}
+            placeholder={`Select ${label.toLowerCase()}…`}
+          />
+        </div>
+      );
+    }
+
+    const displayValue = selected.join(", ");
+    return (
+      <div>
+        {labelEl}
+        <input
+          type="text"
+          value={displayValue}
+          onChange={(e) => {
+            const arr = e.target.value
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean);
+            onChange(name, arr.length > 0 ? arr : null);
+          }}
+          placeholder="e.g. value1, value2"
+          className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {labelEl}
+      <input
+        type="text"
+        value={(value as string) ?? ""}
+        onChange={(e) => onChange(name, e.target.value || null)}
+        className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+        style={{
+          borderColor: colors.border,
+          backgroundColor: colors.bg.primary,
+          color: colors.text.primary,
+        }}
+      />
+    </div>
+  );
+}
+
+interface ValidatorConfigPanelProps {
+  validators: Validator[];
+  validatorsLoading?: boolean;
+  selectedType: string | null;
+  onTypeChange: (type: string | null) => void;
+  existingValues?: Record<string, unknown> | null;
+  existingName?: string;
+  isSaving: boolean;
+  apiKey: string;
+  onSave: (name: string, configValues: Record<string, unknown>) => void;
+  onClear: () => void;
+}
+
+export default function ValidatorConfigPanel({
+  validators,
+  validatorsLoading,
+  selectedType,
+  onTypeChange,
+  existingValues,
+  existingName,
+  isSaving,
+  apiKey,
+  onSave,
+  onClear,
+}: ValidatorConfigPanelProps) {
+  const [configName, setConfigName] = useState("");
+  const [stage, setStage] = useState<"input" | "output">("output");
+  const [onFailAction, setOnFailAction] = useState("fix");
+  const [isEnabled, setIsEnabled] = useState(true);
+  const [fieldValues, setFieldValues] = useState<Record<string, unknown>>({});
+
+  const validator = selectedType
+    ? (validators.find((v) => v.type === selectedType) ?? null)
+    : null;
+
+  useEffect(() => {
+    if (existingValues != null) {
+      // Loading a saved config — populate everything
+      setConfigName(existingName ?? "");
+      setStage((existingValues.stage as "input" | "output") ?? "output");
+      setOnFailAction((existingValues.on_fail_action as string) ?? "fix");
+      setIsEnabled((existingValues.is_enabled as boolean) ?? true);
+      const {
+        stage: _s,
+        on_fail_action: _o,
+        is_enabled: _i,
+        ...rest
+      } = existingValues;
+      setFieldValues(
+        validator
+          ? Object.keys(rest).length > 0
+            ? rest
+            : buildDefaultValues(validator.config)
+          : {},
+      );
+    } else if (validator) {
+      // Type changed with no saved config — only reset dynamic fields, leave static fields alone
+      setFieldValues(buildDefaultValues(validator.config));
+    } else {
+      // Cleared — reset everything
+      setConfigName("");
+      setStage("output");
+      setOnFailAction("fix");
+      setIsEnabled(true);
+      setFieldValues({});
+    }
+  }, [selectedType, existingValues, existingName]);
+
+  const typeDescription = selectedType
+    ? (metaMap[selectedType]?.description ?? null)
+    : null;
+  const isBanList = selectedType === "ban_list";
+
+  const editableProperties = validator
+    ? Object.entries(validator.config.properties).filter(([key]) => {
+        if (key === "type") return false;
+        if (key === "on_fail") return false;
+        if (key === "validator_metadata" || key === "metadata") return false;
+        if (isBanList && (key === "banned_words" || key === "ban_list_id"))
+          return false;
+        return true;
+      })
+    : [];
+
+  const handleFieldChange = (name: string, value: unknown) => {
+    setFieldValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSave = () => {
+    // Strip fields the backend never accepts at the top level
+    const EXCLUDED_KEYS = new Set([
+      "on_fail",
+      "validator_metadata",
+      "metadata",
+      "type",
+    ]);
+    const cleanFieldValues = Object.fromEntries(
+      Object.entries(fieldValues).filter(([k]) => !EXCLUDED_KEYS.has(k)),
+    );
+
+    const payload: Record<string, unknown> = {
+      name: configName,
+      type: selectedType,
+      stage,
+      on_fail_action: onFailAction,
+      is_enabled: isEnabled,
+      ...cleanFieldValues,
+    };
+    onSave(configName, payload);
+  };
+
+  const hasContent = selectedType || configName;
+
+  return (
+    <div
+      className="flex flex-col h-full overflow-hidden"
+      style={{ backgroundColor: colors.bg.primary }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between border-b px-4 py-3 shrink-0"
+        style={{ borderColor: colors.border }}
+      >
+        <div>
+          <div
+            className="text-sm font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            {existingName
+              ? `View / Edit: ${existingName}`
+              : "New Validator Config"}
+          </div>
+          {!existingName && (
+            <div className="text-xs" style={{ color: colors.text.secondary }}>
+              Configure and save a validator
+            </div>
+          )}
+        </div>
+        {hasContent && !existingName && (
+          <button
+            onClick={onClear}
+            className="text-xs px-2.5 py-1 rounded border transition-colors"
+            style={{
+              borderColor: colors.border,
+              color: colors.text.secondary,
+              backgroundColor: colors.bg.primary,
+            }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.primary)
+            }
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
+      {/* Form body */}
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+        {/* ── Static fields — always visible ── */}
+
+        {/* Config Name */}
+        <div>
+          <label
+            className="block text-xs font-medium mb-1"
+            style={{ color: colors.text.primary }}
+          >
+            Config Name
+          </label>
+          <input
+            type="text"
+            value={configName}
+            onChange={(e) => setConfigName(e.target.value)}
+            placeholder="e.g. my-pii-remover-config"
+            className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+              color: colors.text.primary,
+            }}
+          />
+        </div>
+
+        {/* Stage */}
+        <div>
+          <label
+            className="block text-xs font-medium mb-1"
+            style={{ color: colors.text.primary }}
+          >
+            Stage
+            <InfoTooltip text={FIELD_TOOLTIPS.stage} />
+          </label>
+          <select
+            value={stage}
+            onChange={(e) => setStage(e.target.value as "input" | "output")}
+            className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+              color: colors.text.primary,
+            }}
+          >
+            <option value="input">Input</option>
+            <option value="output">Output</option>
+          </select>
+        </div>
+
+        {/* On Fail Action */}
+        <div>
+          <label
+            className="block text-xs font-medium mb-1"
+            style={{ color: colors.text.primary }}
+          >
+            On Fail Action
+            <InfoTooltip text={FIELD_TOOLTIPS.on_fail_action} />
+          </label>
+          <select
+            value={onFailAction}
+            onChange={(e) => setOnFailAction(e.target.value)}
+            className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+              color: colors.text.primary,
+            }}
+          >
+            <option value="fix">Fix</option>
+            <option value="exception">Exception</option>
+            <option value="rephrase">Rephrase</option>
+          </select>
+        </div>
+
+        {/* Enabled */}
+        <label className="flex items-center gap-2.5 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={isEnabled}
+            onChange={(e) => setIsEnabled(e.target.checked)}
+            className="w-4 h-4 rounded"
+          />
+          <span className="text-sm" style={{ color: colors.text.primary }}>
+            Enabled
+          </span>
+        </label>
+
+        {/* ── Validator Type — divider then type selector ── */}
+        <div className="border-t pt-3" style={{ borderColor: colors.border }}>
+          <label
+            className="block text-xs font-medium mb-1"
+            style={{ color: colors.text.primary }}
+          >
+            Validator Type
+          </label>
+          {validatorsLoading ? (
+            <div
+              className="h-8 rounded-md animate-pulse"
+              style={{ backgroundColor: colors.bg.secondary }}
+            />
+          ) : (
+            <select
+              value={selectedType ?? ""}
+              onChange={(e) => onTypeChange(e.target.value || null)}
+              className="w-full text-sm rounded-md border px-2.5 py-1.5 outline-none focus:ring-1"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.primary,
+              }}
+            >
+              <option value="">Select a validator type…</option>
+              {validators.map((v) => (
+                <option key={v.type} value={v.type}>
+                  {metaMap[v.type]?.validator_name ??
+                    formatValidatorName(v.type)}
+                </option>
+              ))}
+            </select>
+          )}
+          {typeDescription && (
+            <p
+              className="text-xs mt-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              {typeDescription}
+            </p>
+          )}
+        </div>
+
+        {/* ── Dynamic fields — only when a type is selected ── */}
+        {validator && (
+          <>
+            {/* Ban list */}
+            {isBanList && (
+              <div
+                className="border-t pt-3"
+                style={{ borderColor: colors.border }}
+              >
+                <BanListField
+                  value={(fieldValues["ban_list_id"] as string | null) ?? null}
+                  onChange={(id) => handleFieldChange("ban_list_id", id)}
+                  apiKey={apiKey}
+                />
+              </div>
+            )}
+
+            {/* Dynamic schema fields */}
+            {editableProperties.length > 0 && (
+              <div
+                className="border-t pt-3"
+                style={{ borderColor: colors.border }}
+              >
+                <div className="space-y-4">
+                  {editableProperties.map(([key, prop]) => (
+                    <SchemaField
+                      key={key}
+                      name={key}
+                      schema={prop}
+                      defs={validator.config.$defs}
+                      value={fieldValues[key]}
+                      onChange={handleFieldChange}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Save button — always visible once there's a name and type */}
+      <div
+        className="px-4 py-3 border-t shrink-0"
+        style={{ borderColor: colors.border }}
+      >
+        <button
+          onClick={handleSave}
+          disabled={isSaving || !configName.trim() || !selectedType}
+          className="w-full py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          style={{ backgroundColor: colors.accent.primary, color: "#ffffff" }}
+        >
+          {isSaving ? "Saving…" : "Save Config"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/guardrails/types.ts b/app/components/guardrails/types.ts
new file mode 100644
index 0000000..69f6b4c
--- /dev/null
+++ b/app/components/guardrails/types.ts
@@ -0,0 +1,50 @@
+export interface ValidatorConfigSchema {
+  title: string;
+  type: string;
+  properties: Record<
+    string,
+    {
+      type?: string;
+      title?: string;
+      default?: unknown;
+      enum?: string[];
+      anyOf?: unknown[];
+      items?: unknown;
+      $ref?: string;
+      const?: string;
+    }
+  >;
+  $defs?: Record<
+    string,
+    {
+      enum?: string[];
+      type?: string;
+    }
+  >;
+  required?: string[];
+  additionalProperties?: boolean;
+}
+
+export interface Validator {
+  type: string;
+  config: ValidatorConfigSchema;
+}
+
+export interface SavedValidatorConfig {
+  id: string;
+  name: string;
+  type: string;
+  config: Record<string, unknown>;
+  stage?: string;
+  on_fail_action?: string;
+  is_enabled?: boolean;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export function formatValidatorName(type: string): string {
+  return type
+    .split("_")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
diff --git a/app/components/guardrails/validators.json b/app/components/guardrails/validators.json
new file mode 100644
index 0000000..981f613
--- /dev/null
+++ b/app/components/guardrails/validators.json
@@ -0,0 +1,42 @@
+[
+  {
+    "validator_type": "ban_list",
+    "validator_name": "Ban List",
+    "description": "Validates that the output does not contain banned words using fuzzy search."
+  },
+  {
+    "validator_type": "gender_assumption_bias",
+    "validator_name": "Gender Assumption Bias",
+    "description": "Detects gender assumption biases across different domains like healthcare and education."
+  },
+  {
+    "validator_type": "uli_slur_match",
+    "validator_name": "Lexical Slur Match",
+    "description": "Detects and filters offensive slurs in multiple languages using lexical matching."
+  },
+  {
+    "validator_type": "llm_critic",
+    "validator_name": "LLM Critic",
+    "description": "Uses an LLM to critique and evaluate the quality and safety of generated text."
+  },
+  {
+    "validator_type": "pii_remover",
+    "validator_name": "PII Remover",
+    "description": "Detects and removes personally identifiable information (PII) from text."
+  },
+  {
+    "validator_type": "llamaguard_7b",
+    "validator_name": "Llamaguard 7B",
+    "description": "Uses Meta's Llamaguard 7B model to detect unsafe or harmful content in text."
+  },
+  {
+    "validator_type": "profanity_free",
+    "validator_name": "Profanity Free",
+    "description": "Detects and filters profane or offensive language from generated text."
+  },
+  {
+    "validator_type": "topic_relevance",
+    "validator_name": "Topic Relevance",
+    "description": "Validates that the generated text stays on topic and is relevant to the given context."
+  }
+]
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index b8d3dfe..949c10b 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -32,6 +32,7 @@ export { default as CloudUploadIcon } from "./document/CloudUploadIcon";
 export { default as ClipboardIcon } from "./sidebar/ClipboardIcon";
 export { default as BookOpenIcon } from "./sidebar/BookOpenIcon";
 export { default as SlidersIcon } from "./sidebar/SlidersIcon";
+export { default as ShieldCheckIcon } from "./sidebar/ShieldCheckIcon";
 export { default as LogoutIcon } from "./sidebar/LogoutIcon";
 
 // Prompt Editor Icons
diff --git a/app/components/icons/sidebar/ShieldCheckIcon.tsx b/app/components/icons/sidebar/ShieldCheckIcon.tsx
new file mode 100644
index 0000000..c07e2a3
--- /dev/null
+++ b/app/components/icons/sidebar/ShieldCheckIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function ShieldCheckIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/prompt-editor/ConfigEditorPane.tsx b/app/components/prompt-editor/ConfigEditorPane.tsx
index 773b16c..ec8c454 100644
--- a/app/components/prompt-editor/ConfigEditorPane.tsx
+++ b/app/components/prompt-editor/ConfigEditorPane.tsx
@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { colors } from "@/app/lib/colors";
 import { ConfigBlob, Tool } from "@/app/lib/types/promptEditor";
 import {
   ConfigPublic,
   SavedConfig,
   ConfigVersionItems,
+  GuardrailRef,
 } from "@/app/lib/types/configs";
 import { formatRelativeTime } from "@/app/lib/utils";
 import { MODEL_OPTIONS, isGpt5Model } from "@/app/lib/models";
@@ -18,6 +19,187 @@ import {
 } from "@/app/components/icons";
 import { PROVIDER_TYPES, PROVIDES_OPTIONS } from "@/app/lib/constants";
 
+interface ValidatorConfigOption {
+  id: string;
+  name: string;
+  type: string;
+  stage?: string;
+}
+
+function GuardrailsSection({
+  label,
+  guardrails,
+  onChange,
+  apiKey,
+  queryString,
+  stage,
+}: {
+  label: string;
+  guardrails: GuardrailRef[];
+  onChange: (refs: GuardrailRef[]) => void;
+  apiKey: string;
+  queryString: string | null;
+  stage: "input" | "output";
+}) {
+  const [validators, setValidators] = useState<ValidatorConfigOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    if (!queryString) return;
+    setLoading(true);
+    fetch(`/api/guardrails/validators/configs${queryString}`, {
+      headers: apiKey ? { "X-API-KEY": apiKey } : {},
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        const items: ValidatorConfigOption[] = Array.isArray(
+          data?.data?.configs,
+        )
+          ? data.data.configs
+          : Array.isArray(data?.data)
+            ? data.data
+            : Array.isArray(data?.configs)
+              ? data.configs
+              : Array.isArray(data)
+                ? data
+                : [];
+        setValidators(items);
+      })
+      .catch(() => setValidators([]))
+      .finally(() => setLoading(false));
+  }, [queryString, apiKey]);
+
+  const addedIds = new Set(guardrails.map((g) => g.validator_config_id));
+  const available = validators.filter(
+    (v) => !addedIds.has(v.id) && (!v.stage || v.stage === stage),
+  );
+
+  const handleAdd = (id: string) => {
+    onChange([...guardrails, { validator_config_id: id }]);
+    setDropdownOpen(false);
+  };
+
+  const handleRemove = (id: string) => {
+    onChange(guardrails.filter((g) => g.validator_config_id !== id));
+  };
+
+  const getValidatorName = (id: string) => {
+    const v = validators.find(
+      (v) => v.id === id && (!v.stage || v.stage === stage),
+    );
+    return v ? v.name || v.type : id.slice(0, 8) + "…";
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-2">
+        <label
+          className="text-xs font-semibold"
+          style={{ color: colors.text.primary }}
+        >
+          {label}
+        </label>
+        <div className="relative">
+          <button
+            onClick={() => setDropdownOpen((prev) => !prev)}
+            disabled={loading || available.length === 0}
+            className="px-2 py-1 rounded text-xs font-medium"
+            style={{
+              backgroundColor:
+                loading || available.length === 0
+                  ? colors.bg.secondary
+                  : colors.accent.primary,
+              color:
+                loading || available.length === 0
+                  ? colors.text.secondary
+                  : colors.bg.primary,
+              cursor:
+                loading || available.length === 0 ? "not-allowed" : "pointer",
+            }}
+          >
+            {loading
+              ? "Loading…"
+              : available.length === 0
+                ? "No validators"
+                : "+ Add"}
+          </button>
+          {dropdownOpen && available.length > 0 && (
+            <>
+              <div
+                className="fixed inset-0 z-40"
+                onClick={() => setDropdownOpen(false)}
+              />
+              <div
+                className="absolute right-0 z-50 mt-1 w-56 rounded-md shadow-lg max-h-48 overflow-auto"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  border: `1px solid ${colors.border}`,
+                }}
+              >
+                {available.map((v) => (
+                  <button
+                    key={v.id}
+                    onClick={() => handleAdd(v.id)}
+                    className="w-full px-3 py-2 text-left text-sm transition-colors"
+                    style={{ color: colors.text.primary }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor =
+                        colors.bg.secondary)
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "transparent")
+                    }
+                  >
+                    {v.name || v.type}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {guardrails.length === 0 ? (
+        <p className="text-xs" style={{ color: colors.text.secondary }}>
+          No validators added
+        </p>
+      ) : (
+        <div className="space-y-1">
+          {guardrails.map((g) => (
+            <div
+              key={g.validator_config_id}
+              className="flex items-center justify-between px-2.5 py-1.5 rounded"
+              style={{
+                backgroundColor: colors.bg.secondary,
+                border: `1px solid ${colors.border}`,
+              }}
+            >
+              <span
+                className="text-xs truncate"
+                style={{ color: colors.text.primary }}
+              >
+                {getValidatorName(g.validator_config_id)}
+              </span>
+              <button
+                onClick={() => handleRemove(g.validator_config_id)}
+                className="ml-2 text-xs flex-shrink-0"
+                style={{
+                  color: colors.status.error,
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                }}
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface ConfigEditorPaneProps {
   configBlob: ConfigBlob;
   onConfigChange: (blob: ConfigBlob) => void;
@@ -39,6 +221,7 @@ interface ConfigEditorPaneProps {
     config_id: string,
     version: number,
   ) => Promise<SavedConfig | null>;
+  apiKey?: string;
 }
 
 export default function ConfigEditorPane({
@@ -59,7 +242,28 @@ export default function ConfigEditorPane({
   versionItemsMap = {},
   loadVersionsForConfig,
   loadSingleVersion,
+  apiKey = "",
 }: ConfigEditorPaneProps) {
+  const [guardrailsQueryString, setGuardrailsQueryString] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    if (!apiKey) return;
+    fetch("/api/apikeys/verify", { headers: { "X-API-KEY": apiKey } })
+      .then((r) => r.json())
+      .then((data) => {
+        const org_id = data?.data?.organization_id;
+        const proj_id = data?.data?.project_id;
+        if (org_id != null && proj_id != null) {
+          setGuardrailsQueryString(
+            `?organization_id=${parseInt(String(org_id), 10)}&project_id=${parseInt(String(proj_id), 10)}`,
+          );
+        }
+      })
+      .catch(() => {});
+  }, [apiKey]);
+
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null); // config group is expanded in the Load dropdown
   const [loadingVersionsFor, setLoadingVersionsFor] = useState<Set<string>>(
@@ -825,6 +1029,30 @@ export default function ConfigEditorPane({
               ))}
             </div>
 
+            {/* Input Guardrails */}
+            <GuardrailsSection
+              label="Input Guardrails"
+              guardrails={configBlob.input_guardrails ?? []}
+              onChange={(refs) =>
+                onConfigChange({ ...configBlob, input_guardrails: refs })
+              }
+              apiKey={apiKey}
+              queryString={guardrailsQueryString}
+              stage="input"
+            />
+
+            {/* Output Guardrails */}
+            <GuardrailsSection
+              label="Output Guardrails"
+              guardrails={configBlob.output_guardrails ?? []}
+              onChange={(refs) =>
+                onConfigChange({ ...configBlob, output_guardrails: refs })
+              }
+              apiKey={apiKey}
+              queryString={guardrailsQueryString}
+              stage="output"
+            />
+
             <div>
               <label
                 className="block text-xs font-semibold mb-2"
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index 8a7ff47..0f9fdcb 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -1,6 +1,8 @@
 import { NextRequest } from "next/server";
 import { AUTH_EXPIRED_EVENT } from "@/app/lib/constants";
 
+const BACKEND_URL = process.env.BACKEND_URL || "http://0.0.0.0:8000";
+const GUARDRAILS_URL = process.env.GUARDRAILS_URL || "http://localhost:8001";
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
 export type UploadPhase = "uploading" | "processing" | "done";
 
@@ -155,6 +157,38 @@ export function uploadWithProgress<T>(
   return { promise, abort: () => controller.abort() };
 }
 
+/**
+ * Passthrough proxy helper for the Guardrails backend.
+ * By default uses X-API-KEY from the incoming request.
+ * Pass `authHeader` to override (e.g. "Bearer <token>" for env-based auth).
+ */
+export async function guardrailsClient(
+  request: NextRequest | Request,
+  endpoint: string,
+  options: RequestInit & { authHeader?: string } = {},
+) {
+  const { authHeader, ...fetchOptions } = options;
+  const headers = new Headers(fetchOptions.headers);
+  if (!(fetchOptions.body instanceof FormData)) {
+    headers.set("Content-Type", "application/json");
+  }
+  if (authHeader) {
+    headers.set("Authorization", authHeader);
+  } else {
+    headers.set("X-API-KEY", request.headers.get("X-API-KEY") || "");
+  }
+
+  const response = await fetch(`${GUARDRAILS_URL}${endpoint}`, {
+    ...fetchOptions,
+    headers,
+  });
+
+  const text = response.status === 204 ? "" : await response.text();
+  const data = text ? JSON.parse(text) : null;
+
+  return { status: response.status, data };
+}
+
 /**
  * Client-side fetch helper for Next.js route handlers (/api/*).
  *
diff --git a/app/lib/types/configs.ts b/app/lib/types/configs.ts
index 971f6af..53d76ea 100644
--- a/app/lib/types/configs.ts
+++ b/app/lib/types/configs.ts
@@ -80,8 +80,17 @@ export interface CompletionConfig {
   params: CompletionParams;
 }
 
+export interface GuardrailRef {
+  validator_config_id: string;
+}
+
 export interface ConfigBlob {
   completion: CompletionConfig;
+  prompt_template?: {
+    template: string;
+  };
+  input_guardrails?: GuardrailRef[];
+  output_guardrails?: GuardrailRef[];
 }
 
 // Request Types