Revolutionising Visual Content Creation with Sanity.io and OpenAI

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:

Basic prior knowledge of using Sanity's basic schema types.
Open AI API Keys

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