A pair of dapper cats with ever so slightly off-putting eyes

Revolutionizing Visual Content Creation with Sanity.io and OpenAI

Reading time

Published on

Tags


OpenAI's DALL-E has recently been making headlines for its ability to generate images from textual prompts. In this article, we'll explore how developers can leverage this cutting-edge technology in conjunction with the powerful content management capabilities of Sanity.io to revolutionize their visual content creation process.

Sanity.io offers a highly versatile and collaborative platform for content creators to manage and develop various types of digital content.

Integrating OpenAI's DALL-E, a state-of-the-art image generation tool, into sanity workflow, developers can unlock the potential for seamless incorporation of dynamic and unique image assets within their content, thus elevating the overall user experience.

This article will explore the technical aspects of integrating OpenAI's API to generate images from text prompts within the Sanity Studio. To achieve this, we will need the following:

We can use a sanity plugin :

NPM Package: sanity-plugin-asset-source-openai

yarn|npm|pnpm add sanity-plugin-asset-source-openai

Updating the sanity.config.ts

import {defineConfig} from 'sanity' import {openaiImageAsset} from 'sanity-plugin-asset-source-openai' export default defineConfig({ // ... plugins: [ openaiImageAsset({ API_KEY:"your_api_key_from_openai" }) ], });

Adding Image Field

Now for the sanity part, we need to create a schema with a field-type image

import ImageGenerateInput from 'components/ImageGenerate' export default { name: 'test', type: 'document', title: 'test', fields: [ { name: 'test1', type: 'string', title: 'test1', }, { name: 'image', type: 'image', title: 'Image', }, ], }

Hands-On

On Sanity Studio. you can simply select Open AI Image

ai-plugin

this will open a dialog box like this. in here you can put the prompt text of the image. and click Generate

prompt-dialog

Clicking Confirm will upload this image as a sanity asset. if you are not happy with the image you can again click Generate

ai-image

Conclusion

This Workflow will make content creators more productive as they can create new assets in the same window on the fly, which will result in an increase in the overall experience with sanity and content management.

https://www.loom.com/share/267fed477cf4458394eb2c2e4c964efc

Get in touch

Fancy generating AI cats?

We save on average about 3 mins per article with the integration of Open AI and Sanity. Imagine what we could do for you. From integrating YouTube playlists directly into your documents, to generating re-skinnable templates for multi-site environments.


More ways to chat

0115 8821993
hello@roboto.studio