Directus x Azure Open AI Integration
directus | 2025-04-20
Objective
The use case is to auto generate SEO friendly summary and tagging in article with the help of AI.
With Directus Flow, we are going to make it possible!
Pre-requisite
- Setup a Directus instance
- Setup an Azure AI Foundry | Azure OpenAI Service Deployment
Azure AI Foundry
Firstly, we will need to deploy an AI model, in this demo, gpt-4o is adopted.
Then go to the Deployments page, we will need to reference the basic code reference in order to build it on Directus Flow.
Switch the language to REST and SDK to curl, and scroll to 2. Run a basic code sample.
Keep it as it will be useful to reference later.
Setup Directus Data Collection and Flow
We are going to create a Data collection named AI Demo News
title: input: text
content: wysiwyg: text
summary: input: text
tags: Tags: json
Next we setup the flow:
1/ It will be manually trigger from AI Demo News data model
2/ We are going to set it on item page only, required confirmation and some confirmation fields to aid the ai text generation
3/ Next, will do a read from triggered data and run a script to ensure massage the title and content, to ensure it contains clean text by removing all html tags and unicodes.
4/ Then setup a webhook to request the Azure Open AI completion.
Then content prompt that we are using:
Please help to generate a summary for the following:
Title: {{$last.title}}. Content: {{$last.content}}.
Strictly use the {{$trigger.body.tone}} tone.
Strictly keep the sentence within {{$trigger.body.length}} words.
and to save cost for demo, the max_token we are setting to 100.
The sample query can be retrieved from earlier Azure Foundary's screen for the basic code sample.
5/ Lastly, update the summary field in AI Demo News data model.
Demo
Now, create a news article, with title and content filled.
The AI Summary trigger button on right
It will prompt to input tone and text length (word length)
The flow will execute and summary will be auto filled :)
About AI Tagging
We replicate the same flow as we setup for summary, using different prompt:
Please help to generate some SEO friendly tagging with the following content:
Title: {{$last.title}}. Content: {{$last.content}}.
Strictly only generate max {{$trigger.body.max}} tags and separate by comma.
Then, save it as Tags in json string format.
Finally
We have our summary and tags auto filled with the help of Azure Open AI.
