This How To guide describes how to automate the review process for content changes in Uniform by sending rich notifications to Slack channels when content creators request approval for their changes, get immediate visual feedback including screenshots, diff comparisons, and direct links to preview and edit content.
This article leans on using Next.js App Router, Slack, Open AI and Vercel for a complete tutorial. Of course, the approach can be ported to your own tech stack.
/api/workflow-approval/route.ts
)after()
for asynchronous processingprocessWorkflowApproval.ts
)SUPPORTED_ENTITY_TYPES
Composition Processor (processCompositionType.ts
):
Entry Processor (processEntryType.ts
):
takeScreenshots.ts
)getOpenAIDescription.ts
)sendSlackNotification.ts
)SLACK_WEBHOOK_URL
#content-reviews
)In your Uniform project:
https://your-website.com/api/workflow-approval
workflow.transaction
eventWebhook Payload Example:
types/workflowApproval.ts
)app/api/workflow-approval/route.ts
)utils/workflow-approval/processWorkflowApproval.ts
)utils/workflow-approval/processCompositionType.ts
)utils/workflow-approval/processEntryType.ts
)utils/workflow-approval/takeScreenshots.ts
)utils/workflow-approval/sendSlackNotification.ts
)utils/workflow-approval/getOpenAIDescription.ts
)utils/workflow-approval/getSerializedData.ts
)app/workflow-preview/[type]/page.tsx
)app/workflow-preview/[type]/diff/page.tsx
)The workflow system depends on several Uniform Canvas utility functions. Here are all the supporting utilities:
utils/canvas/getCompositionById.ts
)utils/canvas/serverOnlyContentClient.ts
)utils/canvas/routeClient.ts
)utils/canvas/projectMapClient.ts
)utils/canvas/getCompositionRoute.ts
)To support additional content types, modify the preview path mapping in processEntryType.ts
:
For Puppeteer to work on Vercel, ensure your vercel.json
includes:
Enable detailed logging by setting NODE_ENV=development
and check console outputs for each processing step.
Modify sendSlackNotification.ts
to:
Adjust takeScreenshots.ts
for:
Customize OpenAI prompts in getOpenAIDescription.ts
to:
Extend support for new content types by:
SUPPORTED_ENTITY_TYPES
Webhook Not Triggering
Screenshots Failing
Slack Messages Not Appearing
OpenAI Errors
This system provides a robust foundation for automated content review workflows with rich visual feedback and seamless integration between Uniform and Slack.