{"id":39682,"date":"2026-01-07T07:00:00","date_gmt":"2026-01-07T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39682"},"modified":"2026-01-06T17:19:19","modified_gmt":"2026-01-07T01:19:19","slug":"safe-community-ai-powered-ugc-moderation","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation","title":{"rendered":"Building a Safe Community: A Guide to AI-Powered UGC Moderation"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>User uploads help your platform grow, but they also bring risk. All it takes is a single inappropriate or off-brand imagery to damage trust within your community. You need a system that checks content the moment it enters your app.<\/p>\n<p>In this guide, you\u2019ll build a simple, real-time moderation flow with <strong>Cloudinary<\/strong> and <strong>Next.js<\/strong>. Every upload is scanned with AI moderation tools, labeled with a clear status, and pushed into a safe public feed. You control what gets blurred, flagged, or rejected on the backend, while your users see a safe space on the frontend.<\/p>\n<ul>\n<li>\n<strong>GitHub Project:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\">https:\/\/github.com\/musebe\/safe-community-feed<\/a>\n<\/li>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/safe-community-feed.vercel.app\/\">https:\/\/safe-community-feed.vercel.app\/<\/a>\n<\/li>\n<\/ul>\n<h2>Cloudinary Setup<\/h2>\n<p>A safe feed starts with smart checks at the moment of upload. Cloudinary can scan each image, score it, and send a clean result back to your app in seconds. This lets you protect your users without building a full AI pipeline yourself.<\/p>\n<p>Below is everything you need to turn Cloudinary into your moderation engine.<\/p>\n<h2>Create Your Cloudinary Account<\/h2>\n<p>Start by creating a Cloudinary account or logging in.<\/p>\n<ul>\n<li>Login: <a href=\"https:\/\/cloudinary.com\/users\/login\">https:\/\/cloudinary.com\/users\/login<\/a>\n<\/li>\n<li>Console: <a href=\"https:\/\/cloudinary.com\/console\">https:\/\/cloudinary.com\/console<\/a>\n<\/li>\n<\/ul>\n<p>Your dashboard shows your <strong>Cloud Name<\/strong>, <strong>API Key<\/strong>, and <strong>API Secret<\/strong>.<\/p>\n<p>You\u2019ll use these to connect your Next.js app to Cloudinary. Keep them private.<\/p>\n<h2>Enable Moderation Add-ons<\/h2>\n<p>Cloudinary doesn\u2019t scan content by default. <strong>You need to turn on a moderation add-on.<\/strong> These add-ons plug into powerful AI engines that detect unsafe content.<\/p>\n<p>Two options:<\/p>\n<ul>\n<li>\n<strong>Amazon Rekognition AI Moderation.<\/strong> Great for general safety checks. It detects graphic content like nudity, violence, weapons, drugs, and more.<\/li>\n<\/ul>\n<blockquote>\n<p>Docs: <a href=\"https:\/\/cloudinary.com\/documentation\/aws_rekognition_ai_moderation_addon\">https:\/\/cloudinary.com\/documentation\/aws_rekognition_ai_moderation_addon<\/a><\/p>\n<\/blockquote>\n<ul>\n<li>\n<strong>WebPurify Image Moderation.<\/strong> Strong focus on detecting sexually explicit content.<\/li>\n<\/ul>\n<blockquote>\n<p>Docs: <a href=\"https:\/\/cloudinary.com\/documentation\/webpurify_image_moderation_addon\">https:\/\/cloudinary.com\/documentation\/webpurify_image_moderation_addon<\/a><\/p>\n<\/blockquote>\n<p>Go to your Cloudinary console, open the <a href=\"https:\/\/console.cloudinary.com\/app\/marketplace\/all\">Add ons page<\/a>, and enable the one you want.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo-article-projects\/image\/upload\/v1763321087\/safe-community-app\/addons.png\" alt=\"Cloudinary Marketplace in the Cloudinary console\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"3010\" height=\"1798\"\/><\/p>\n<h2>Create Upload Presets With Moderation Enabled<\/h2>\n<p>An upload preset is a saved rule set for every upload.<\/p>\n<p>This is where you tell Cloudinary:<\/p>\n<ul>\n<li>Which moderation engine to use.<\/li>\n<li>When to run it.<\/li>\n<li>What to send back to your app.<\/li>\n<li>Where to send the webhook response.<\/li>\n<\/ul>\n<p>Open:<\/p>\n<p><strong>Settings \u2192 Upload \u2192 Upload Presets<\/strong><\/p>\n<p>Create a new preset for your app. Turn on:<\/p>\n<ul>\n<li>\n<strong>Moderation<\/strong> set to Rekognition or WebPurify.<\/li>\n<li>\n<strong>Use notification_url<\/strong> so Cloudinary tells your app the result.<\/li>\n<li>\n<strong>Unsigned uploads<\/strong> if your client uploads directly.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo-article-projects\/image\/upload\/v1763320485\/safe-community-app\/upload%20presets.png\" alt=\"Upload Presets in Upload\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"3022\" height=\"1660\"\/><\/p>\n<p>Every upload goes through this preset, which decides how Cloudinary checks and reports each image.<\/p>\n<h2>Moderation Options<\/h2>\n<p>After choosing a service, Cloudinary shows extra settings. These include thresholds, strictness, and detection types. Use the defaults at first. Tune them later as you learn more about your community\u2019s needs.<\/p>\n<h2>Webhooks and Notifications<\/h2>\n<p>Cloudinary sends your app a webhook when a scan finishes.<\/p>\n<p>This webhook includes:<\/p>\n<ul>\n<li>public_id<\/li>\n<li>Moderation decision<\/li>\n<li>Confidence scores<\/li>\n<li>Raw moderation results<\/li>\n<\/ul>\n<p>Go to your upload preset and set the <strong>notification_url<\/strong> to your API route in Next.js.<\/p>\n<blockquote>\n<p>Docs: <a href=\"https:\/\/cloudinary.com\/documentation\/notifications\">https:\/\/cloudinary.com\/documentation\/notifications<\/a><\/p>\n<\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo-article-projects\/image\/upload\/v1763321330\/safe-community-app\/webhooks.png\" alt=\"Webhook notifications\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"3006\" height=\"1806\"\/><\/p>\n<p>Your app doesn\u2019t wait for Cloudinary. It gets the upload first, then Cloudinary sends the scan result. Your webhook updates the database, UI, and flags any risky image.<\/p>\n<h3>Bootstrapping the Next.js Project<\/h3>\n<p>Set up the Next.js app with the App Router, Tailwind, and TypeScript.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span> safe-community-feed --ts --tailwind --eslint --app\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add the UI components. Use shadcn for the Card, Badge, Dialog, Button, and Toaster.<\/p>\n<p>Run the setup:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">shadcn<\/span><span class=\"hljs-keyword\">@latest<\/span> init\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add the components you need:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">shadcn<\/span><span class=\"hljs-keyword\">@latest<\/span> add button\nnpx shadcn@latest add card\nnpx shadcn@latest add badge\nnpx shadcn@latest add dialog\nnpx shadcn@latest add sonner\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Create a file named <code>.env.local<\/code> in the project root. Put your Cloudinary values inside it.<\/p>\n<p><strong>.env.local<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=&quot;your-cloud-name&quot;\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_AWS_REK=&quot;safe_ugc_aws_rek&quot;\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_WEBPURIFY=&quot;safe_ugc_webpurify&quot;\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=&quot;ai-moderation-demo&quot;\n<\/code><\/pre>\n<h3>Building the Frontend: The \u2018Control Panel\u2019 (<code>UploadButton.tsx<\/code>)<\/h3>\n<p>This component is a client-side control panel (<code>'use client'<\/code>). It allows the user to:<\/p>\n<ol>\n<li>Pick a moderation engine (AWS, WebPurify, or Both).<\/li>\n<li>Dynamically update the Cloudinary preset based on that choice.<\/li>\n<li>Call our backend server action once upload completes.<\/li>\n<\/ol>\n<p>We use <code>useState<\/code> to track the active <code>mode<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/shared\/UploadButton.tsx<\/span>\n\n<span class=\"hljs-string\">'use client'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { useState, useTransition } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CldUploadButton } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-cloudinary'<\/span>;\n<span class=\"hljs-comment\">\/\/ ... other imports<\/span>\n\ntype Mode = <span class=\"hljs-string\">'aws'<\/span> | <span class=\"hljs-string\">'webpurify'<\/span> | <span class=\"hljs-string\">'both'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">UploadButton<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-keyword\">const<\/span> &#91;mode, setMode] = useState&lt;Mode&gt;(<span class=\"hljs-string\">'aws'<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> &#91;isPending, startTransition] = useTransition();\n\n  <span class=\"hljs-comment\">\/\/ Map our mode state to .env presets<\/span>\n  <span class=\"hljs-keyword\">const<\/span> presetByMode: Record&lt;Mode, string | <span class=\"hljs-literal\">undefined<\/span>&gt; = {\n    <span class=\"hljs-attr\">aws<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_AWS_REK,\n    <span class=\"hljs-attr\">webpurify<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_WEBPURIFY,\n    <span class=\"hljs-attr\">both<\/span>: process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> activePreset = presetByMode&#91;mode];\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>activePreset<\/code> variable is then passed to the Cloudinary upload button. Because its <code>key<\/code> prop uses <code>activePreset<\/code>, changing the mode triggers a re-render with the new preset.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/shared\/UploadButton.tsx (inside the return)<\/span>\n\n&lt;CldUploadButton\n  key={activePreset} <span class=\"hljs-comment\">\/\/ causes a re-mount when preset changes<\/span>\n  uploadPreset={activePreset}\n  onSuccess={onUploadSuccess}\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\/&gt;;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When the upload succeeds, <code>onUploadSuccess<\/code> triggers. We wrap the backend call in a <code>startTransition<\/code> for a smooth UI:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/shared\/UploadButton.tsx<\/span>\n\n  <span class=\"hljs-keyword\">const<\/span> onUploadSuccess = <span class=\"hljs-function\">(<span class=\"hljs-params\">result: unknown<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> uploadData = result <span class=\"hljs-keyword\">as<\/span> UploadResult;\n    <span class=\"hljs-comment\">\/\/ ... simple error checking ...<\/span>\n\n    startTransition(<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-comment\">\/\/ Call our server action<\/span>\n        <span class=\"hljs-keyword\">await<\/span> saveUpload(uploadData.info);\n\n        toast.success(<span class=\"hljs-string\">'Upload successful'<\/span>);\n      } <span class=\"hljs-keyword\">catch<\/span> (error) {\n        toast.error(<span class=\"hljs-string\">'Upload failed'<\/span>);\n      }\n    });\n  };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>With this setup the user has control, and your server-side logic runs right after upload.<\/p>\n<blockquote>\n<p><strong>Full file on GitHub:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/components\/shared\/UploadButton.tsx\"><code>components\/shared\/UploadButton.tsx<\/code><\/a><\/p>\n<\/blockquote>\n<h3>Handling the Upload: The <code>saveUpload<\/code> Server Action<\/h3>\n<p>The <code>UploadButton<\/code> calls <code>saveUpload<\/code> with <code>uploadData.info<\/code>. This runs a server action inside <code>lib\/actions.ts<\/code>.<\/p>\n<p>Its job is simple. It reads the data from Cloudinary, checks for early moderation results, decides the first status, then writes the record to <code>db.json<\/code>.<\/p>\n<p>Cloudinary may return moderation results in the <code>moderation<\/code> array. We pull them out and decide what the first status should be.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ lib\/actions.ts<\/span>\n\n<span class=\"hljs-string\">\"use server\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { revalidatePath } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/cache\"<\/span>;\n<span class=\"hljs-comment\">\/\/ ... other imports<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveUpload<\/span>(<span class=\"hljs-params\">uploadInfo: CloudinaryUploadInfo<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> awsMod = uploadInfo.moderation?.find(<span class=\"hljs-function\">(<span class=\"hljs-params\">m<\/span>) =&gt;<\/span> m.kind === <span class=\"hljs-string\">\"aws_rek\"<\/span>);\n    <span class=\"hljs-keyword\">const<\/span> webpurifyMod = uploadInfo.moderation?.find(\n      <span class=\"hljs-function\">(<span class=\"hljs-params\">m<\/span>) =&gt;<\/span> m.kind === <span class=\"hljs-string\">\"webpurify\"<\/span>\n    );\n\n    <span class=\"hljs-keyword\">const<\/span> awsStatus = awsMod ? awsMod.status : <span class=\"hljs-string\">\"not_used\"<\/span>;\n    <span class=\"hljs-keyword\">const<\/span> webStatus = webpurifyMod ? webpurifyMod.status : <span class=\"hljs-string\">\"not_used\"<\/span>;\n\n    <span class=\"hljs-keyword\">const<\/span> statuses = &#91;awsStatus, webStatus];\n    <span class=\"hljs-keyword\">let<\/span> overall: SavedImage&#91;<span class=\"hljs-string\">\"moderationStatus\"<\/span>] = <span class=\"hljs-string\">\"pending\"<\/span>;\n\n    <span class=\"hljs-keyword\">if<\/span> (statuses.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">s<\/span>) =&gt;<\/span> s === <span class=\"hljs-string\">\"rejected\"<\/span>)) {\n      overall = <span class=\"hljs-string\">\"rejected\"<\/span>;\n    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (statuses.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">s<\/span>) =&gt;<\/span> s === <span class=\"hljs-string\">\"approved\"<\/span>)) {\n      overall = <span class=\"hljs-string\">\"approved\"<\/span>;\n    }\n\n    <span class=\"hljs-keyword\">const<\/span> newImage: SavedImage = {\n      <span class=\"hljs-attr\">id<\/span>: uploadInfo.public_id,\n      <span class=\"hljs-attr\">url<\/span>: uploadInfo.secure_url,\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n      <span class=\"hljs-attr\">moderationStatus<\/span>: overall,\n      <span class=\"hljs-attr\">aws_rekognition_status<\/span>: awsStatus,\n      <span class=\"hljs-attr\">webpurify_status<\/span>: webStatus,\n    };\n\n    <span class=\"hljs-comment\">\/\/ write newImage to db.json ...<\/span>\n\n    revalidatePath(<span class=\"hljs-string\">\"\/\"<\/span>);\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error saving to database:\"<\/span>, error);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The image is stored even when its status is still pending. Calling <code>revalidatePath(&quot;\/&quot;)<\/code> makes Next.js refresh the page so the gallery updates at once.<\/p>\n<blockquote>\n<p><strong>Full file on GitHub:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/lib\/actions.ts\"><code>lib\/actions.ts<\/code><\/a><\/p>\n<\/blockquote>\n<h3>The Asynchronous Link: Receiving the Cloudinary Webhook<\/h3>\n<p>The <code>saveUpload<\/code> action was instant. But the AI moderation check takes a few seconds. We can\u2019t make the user wait.<\/p>\n<p>So, how does our app find out the result? <strong>Cloudinary tells us.<\/strong><\/p>\n<p>Once the scan is finished, Cloudinary sends an HTTP POST request (a <strong>webhook<\/strong>) to our app. We just need to build an API route to \u201ccatch\u201d it.<\/p>\n<p>This is the job of <code>app\/api\/cloudinary-webhook\/route.ts<\/code>. This file\u2019s <em>only<\/em> purpose is to listen for that message from Cloudinary, parse it, and pass the data to our <em>next<\/em> server action.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ app\/api\/cloudinary-webhook\/route.ts<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { NextRequest, NextResponse } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/server\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { updateModeration } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/lib\/actions\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">POST<\/span>(<span class=\"hljs-params\">req: NextRequest<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> body = <span class=\"hljs-keyword\">await<\/span> req.json();\n\n  <span class=\"hljs-comment\">\/\/ Look for the specific 'moderation' notification<\/span>\n  <span class=\"hljs-keyword\">if<\/span> (\n    body.notification_type === <span class=\"hljs-string\">\"moderation\"<\/span> &amp;&amp;\n    body.moderation_kind &amp;&amp;\n    body.moderation_status\n  ) {\n    <span class=\"hljs-comment\">\/\/ We found it. Now update our database.<\/span>\n    <span class=\"hljs-keyword\">await<\/span> updateModeration(\n      body.public_id,\n      body.moderation_kind,\n      body.moderation_status\n    );\n\n    <span class=\"hljs-keyword\">return<\/span> NextResponse.json({ <span class=\"hljs-attr\">ok<\/span>: <span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-attr\">source<\/span>: <span class=\"hljs-string\">\"moderation\"<\/span> });\n  }\n\n  <span class=\"hljs-comment\">\/\/ Ignore other webhook types (like 'upload')<\/span>\n  <span class=\"hljs-keyword\">return<\/span> NextResponse.json({ <span class=\"hljs-attr\">ok<\/span>: <span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-attr\">source<\/span>: <span class=\"hljs-string\">\"ignored\"<\/span> });\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This route is the \u201cmiddle-man\u201d that connects Cloudinary\u2019s external AI service directly to our app\u2019s database logic.<\/p>\n<blockquote>\n<p><strong>See the full webhook file on GitHub:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/app\/api\/cloudinary-webhook\/route.ts\"><code>app\/api\/cloudinary-webhook\/route.ts<\/code><\/a><\/p>\n<\/blockquote>\n<h3>The \u2018Brain\u2019: The <code>updateModeration<\/code> Action and <code>revalidatePath<\/code><\/h3>\n<p>The webhook just told our app, \u201cHey, the AWS scan for image <code>xyz<\/code> is <code>rejected<\/code>!\u201d<\/p>\n<p>Now, this function, <code>updateModeration<\/code> (also in <code>lib\/actions.ts<\/code>), has to act on that news.<\/p>\n<p>Its job is to:<\/p>\n<ol>\n<li>Find the image in our <code>db.json<\/code>.<\/li>\n<li>Update the status for the <em>specific<\/em> provider (e.g., <code>aws_rekognition_status<\/code>).<\/li>\n<li>\n<strong>Recalculate the overall <code>moderationStatus<\/code><\/strong> based on this new information.<\/li>\n<li>Tell Next.js to refresh the page for all users.<\/li>\n<\/ol>\n<p>The recalculation logic is the most important part: <strong>if any service flags an image, we reject it.<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ lib\/actions.ts<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateModeration<\/span>(<span class=\"hljs-params\">\n  publicId: string,\n  kind: <span class=\"hljs-string\">\"aws_rek\"<\/span> | <span class=\"hljs-string\">\"webpurify\"<\/span>,\n  status: <span class=\"hljs-string\">\"approved\"<\/span> | <span class=\"hljs-string\">\"rejected\"<\/span> | <span class=\"hljs-string\">\"pending\"<\/span>\n<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> dbData = <span class=\"hljs-keyword\">await<\/span> readDb();\n    <span class=\"hljs-keyword\">const<\/span> index = dbData.findIndex(<span class=\"hljs-function\">(<span class=\"hljs-params\">img<\/span>) =&gt;<\/span> img.id === publicId);\n\n    <span class=\"hljs-keyword\">if<\/span> (index === <span class=\"hljs-number\">-1<\/span>) <span class=\"hljs-keyword\">return<\/span>; <span class=\"hljs-comment\">\/\/ Image not found<\/span>\n\n    <span class=\"hljs-keyword\">const<\/span> image = dbData&#91;index];\n\n    <span class=\"hljs-comment\">\/\/ 1. Update the specific provider's status<\/span>\n    <span class=\"hljs-keyword\">if<\/span> (kind === <span class=\"hljs-string\">\"aws_rek\"<\/span>) {\n      image.aws_rekognition_status = status;\n    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (kind === <span class=\"hljs-string\">\"webpurify\"<\/span>) {\n      image.webpurify_status = status;\n    }\n\n    <span class=\"hljs-comment\">\/\/ 2. Recalculate the overall status<\/span>\n    <span class=\"hljs-keyword\">const<\/span> statuses = &#91;image.aws_rekognition_status, image.webpurify_status];\n\n    <span class=\"hljs-keyword\">let<\/span> overall: SavedImage&#91;<span class=\"hljs-string\">\"moderationStatus\"<\/span>] = <span class=\"hljs-string\">\"pending\"<\/span>;\n\n    <span class=\"hljs-keyword\">if<\/span> (statuses.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">s<\/span>) =&gt;<\/span> s === <span class=\"hljs-string\">\"rejected\"<\/span>)) {\n      overall = <span class=\"hljs-string\">\"rejected\"<\/span>; <span class=\"hljs-comment\">\/\/ This is the key!<\/span>\n    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (statuses.some(<span class=\"hljs-function\">(<span class=\"hljs-params\">s<\/span>) =&gt;<\/span> s === <span class=\"hljs-string\">\"approved\"<\/span>)) {\n      overall = <span class=\"hljs-string\">\"approved\"<\/span>;\n    }\n\n    image.moderationStatus = overall;\n\n    <span class=\"hljs-comment\">\/\/ 3. Save to db.json...<\/span>\n    dbData&#91;index] = image;\n    <span class=\"hljs-keyword\">await<\/span> fs.writeFile(dbPath, <span class=\"hljs-built_in\">JSON<\/span>.stringify(dbData, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>));\n\n    <span class=\"hljs-comment\">\/\/ 4. The magic: force a UI refresh<\/span>\n    revalidatePath(<span class=\"hljs-string\">\"\/\"<\/span>);\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error updating moderation:\"<\/span>, error);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>revalidatePath(&quot;\/&quot;)<\/code> call is the final, brilliant piece. It tells Next.js, \u201cAll cached data for the homepage is stale. Fetch it again, <em>now<\/em>.\u201d<\/p>\n<p>The user, who might have been looking at a \u201cpending\u201d image, sees the page instantly update. The image is now \u201crejected\u201d and hidden. No manual refresh needed.<\/p>\n<blockquote>\n<p><strong>See the full actions file on GitHub:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/lib\/actions.ts\"><code>lib\/actions.ts<\/code><\/a><\/p>\n<\/blockquote>\n<h3>Displaying the \u2018Safe\u2019 Gallery: The <code>ImageCard.tsx<\/code> Logic<\/h3>\n<p>We\u2019re all done on the backend. Now, how does the frontend <em>use<\/em> that <code>moderationStatus<\/code>?<\/p>\n<p>It starts with the <code>Gallery.tsx<\/code> component. This is a <strong>Server Component<\/strong> that runs first. It\u2019s simple, <code>async<\/code>, and just asks our <code>lib\/actions.ts<\/code> for the full list of images.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/shared\/Gallery.tsx<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { getImages } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/lib\/actions\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { ImageCard } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/components\/shared\/ImageCard\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Gallery<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> images = <span class=\"hljs-keyword\">await<\/span> getImages();\n\n  <span class=\"hljs-keyword\">if<\/span> (!images.length) {\n    <span class=\"hljs-comment\">\/\/ ... show empty state ...<\/span>\n  }\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid ...\"<\/span>&gt;<\/span>\n      {images.map((image) =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ImageCard<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{image.id}<\/span> <span class=\"hljs-attr\">image<\/span>=<span class=\"hljs-string\">{image}<\/span> \/&gt;<\/span>\n      ))}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>It passes each image to the <code>ImageCard.tsx<\/code> component. This is where the \u201csafe\u201d logic lives.<\/p>\n<p>This component is the gatekeeper. It reads the <code>moderationStatus<\/code> for the image. If the status is <code>'rejected'<\/code>, it <strong>does not render the user\u2019s image<\/strong>. Instead, it shows our safe placeholder, <code>\/reject.png<\/code>.<\/p>\n<p>This is the most important snippet for keeping the community safe:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/shared\/ImageCard.tsx<\/span>\n\n<span class=\"hljs-string\">\"use client\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CldImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next-cloudinary\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/image\"<\/span>;\n<span class=\"hljs-comment\">\/\/ ... other imports<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">ImageCard<\/span>(<span class=\"hljs-params\">{ image }: ImageCardProps<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-keyword\">const<\/span> isRejected = image.moderationStatus === <span class=\"hljs-string\">\"rejected\"<\/span>;\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card<\/span>&gt;<\/span>\n      {\/* ... CardHeader with \"Approved\" \/ \"Rejected\" Badge ... *\/}\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CardContent<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-0\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"relative aspect-video\"<\/span>&gt;<\/span>\n          {isRejected ? (\n            \/\/ If rejected, show a safe placeholder\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>\n              <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/reject.png\"<\/span>\n              <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Rejected content\"<\/span>\n              <span class=\"hljs-attr\">fill<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"object-cover\"<\/span>\n            \/&gt;<\/span>\n          ) : (\n            \/\/ If approved or pending, show the real image\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n              <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.id}<\/span>\n              <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Uploaded image\"<\/span>\n              \/\/ <span class=\"hljs-attr\">...<\/span>\n            \/&gt;<\/span>\n          )}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CardContent<\/span>&gt;<\/span>\n\n      {\/* ... CardFooter with AWS \/ WebPurify status ... *\/}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>And that\u2019s it. The UI is safe by default. It only shows content that is <em>not<\/em> explicitly rejected.<\/p>\n<blockquote>\n<p><strong>See the full files on GitHub:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/components\/shared\/Gallery.tsx\"><code>components\/shared\/Gallery.tsx<\/code><\/a> and <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\/blob\/main\/components\/shared\/ImageCard.tsx\"><code>components\/shared\/ImageCard.tsx<\/code><\/a><\/p>\n<\/blockquote>\n<h2>A Scalable, Event-Driven Moderation Flow<\/h2>\n<p>And there you have it. We built an end-to-end, event-driven, and, most importantly, <em>safe<\/em> moderation system.<\/p>\n<p>The user\u2019s experience is seamless. They upload an image and see it in the gallery, while a powerful, asynchronous workflow is protecting your community on the backend.<\/p>\n<p>Here\u2019s the full flow we built:<\/p>\n<ol>\n<li>\n<strong>Frontend (<code>UploadButton<\/code>).<\/strong> A user uploads an image, selecting a specific AI moderation preset.<\/li>\n<li>\n<strong>Server action (<code>saveUpload<\/code>).<\/strong> The app saves the image with a \u201cpending\u201d status and instantly refreshes the UI.<\/li>\n<li>\n<strong>Cloudinary.<\/strong> The image is sent to AWS Rekognition or WebPurify for AI analysis.<\/li>\n<li>\n<strong>Webhook.<\/strong> Cloudinary sends the <code>approved<\/code> or <code>rejected<\/code> verdict to our API route.<\/li>\n<li>\n<strong>Server action (<code>updateModeration<\/code>).<\/strong> The verdict is saved, and the UI is again instantly refreshed.<\/li>\n<li>\n<strong>Frontend (<code>ImageCard<\/code>).<\/strong> The card checks the status and automatically hides any rejected content.<\/li>\n<\/ol>\n<p>Want to learn more about how you can use Cloudinary to build a foundation for a safe and scalable community platform? <a href=\"https:\/\/cloudinary.com\/contact\">Contact us today<\/a>.<\/p>\n<ul>\n<li>\n<strong>GitHub Project:<\/strong> <a href=\"https:\/\/github.com\/musebe\/safe-community-feed\">https:\/\/github.com\/musebe\/safe-community-feed<\/a>\n<\/li>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/safe-community-feed.vercel.app\/\">https:\/\/safe-community-feed.vercel.app\/<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":39683,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336,203,300],"class_list":["post-39682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-moderation","tag-user-generated-content"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a Safe Community: A Guide to AI-Powered UGC Moderation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Safe Community: A Guide to AI-Powered UGC Moderation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-07T15:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building a Safe Community: A Guide to AI-Powered UGC Moderation\",\"datePublished\":\"2026-01-07T15:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA\",\"keywords\":[\"AI\",\"Moderation\",\"User-Generated Content\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\",\"url\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\",\"name\":\"Building a Safe Community: A Guide to AI-Powered UGC Moderation\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA\",\"datePublished\":\"2026-01-07T15:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Safe Community: A Guide to AI-Powered UGC Moderation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Safe Community: A Guide to AI-Powered UGC Moderation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation","og_locale":"en_US","og_type":"article","og_title":"Building a Safe Community: A Guide to AI-Powered UGC Moderation","og_url":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation","og_site_name":"Cloudinary Blog","article_published_time":"2026-01-07T15:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building a Safe Community: A Guide to AI-Powered UGC Moderation","datePublished":"2026-01-07T15:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","keywords":["AI","Moderation","User-Generated Content"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation","url":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation","name":"Building a Safe Community: A Guide to AI-Powered UGC Moderation","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","datePublished":"2026-01-07T15:00:00+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/safe-community-ai-powered-ugc-moderation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Safe Community: A Guide to AI-Powered UGC Moderation"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1764964594\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation\/Blog_Building_a_Safe_Community__A_Guide_to_AI-Powered_UGC_Moderation.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=39682"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39682\/revisions"}],"predecessor-version":[{"id":39685,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39682\/revisions\/39685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39683"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}