Projects
Services
Migration
Blog
Alt textAlt text

Revolutionising Visual Content Creation with Sanity.io and OpenAI

Reading Time

2 min read

Published on

January 31, 2023

Author

Hrithik

Hrithik

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

image-b69d081e5e1aa5b7876e81ea3fb34cd52da5cfda-1476x826-png

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

image-ae74314bb899f15a2ee3f910487fa1c3a1e0870d-1770x494-png

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

image-de3d09b7cafc02cf919422a054446b7508aa0524-992x1206-png

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.

Services

Legal

Like what you see?

Sign up for our newsletter to stay up to date with our latest projects and insights.

© 2024 Roboto Studio Ltd - 11126043

Roboto Studio Ltd,

71-75 Shelton Street,

Covent Garden,

London, WC2H 9JQ

Registered in England and Wales | VAT Number 426637679