Revolutionising Visual Content Creation with Sanity.io and OpenAI

Revolutionising Visual Content Creation with Sanity.io and OpenAI

Boost visuals with Sanity.io & OpenAI's AI images. Integrate OpenAI's API into Sanity Studio and elevate your site's UX. It's next-level tech!


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

Book a meeting with us to discuss how we can help or fill out a form to get in touch