Revolutionising Visual Content Creation with Sanity.io and OpenAI

DALL-E generates images from text prompts. Sanity lets you manage content. Put them together and your editors can create images without leaving the CMS.

This article walks through integrating OpenAI's image generation API into Sanity Studio. By the end, you'll have a working image field that generates assets from prompts.

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 add sanity-plugin-asset-source-openai
# or: npm add sanity-plugin-asset-source-openai
# or: 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({
      // Never hardcode API keys - always use environment variables
      API_KEY: process.env.SANITY_STUDIO_OPENAI_API_KEY
    })
  ],
});

Security Note: Never commit API keys to your repository. Store them in environment variables (prefixed with SANITY_STUDIO_ for Sanity Studio) and add them to your .env.local file, which should be in .gitignore.

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',
    },
  ],
}

No spam, only good stuff

Subscribe, for more hot takes

Only god knows why anybody would purposefully subscribe themselves to a newsletter that moans about development. These poor souls did though

Email address

Subscribe

Hands-On

On Sanity Studio. you can simply select Open AI Image

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

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

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