Caution
This package is currently in beta. Use at your own risk. Breaking changes may occur.
Note
This is a Sanity Studio v3 plugin – there is no version for v2.
npm install sanity-plugin-image-with-ai-altAdd it as a plugin in sanity.config.ts (or .js):
import {defineConfig} from 'sanity'
import {imageWithAiAlt} from 'sanity-plugin-image-with-ai-alt'
export default defineConfig({
//...
plugins: [imageWithAiAlt({
// Configuration options (see below)
})],
})You can now use the imageWithAiAlt type in your schema – for example:
import {defineField, defineType} from 'sanity'
export const schemaTypes = [
defineType({
name: 'testPage',
type: 'document',
fields: [
defineField({
name: 'myImage',
type: 'imageWithAiAlt',
}),
],
}),
]Since the imageWithAiAlt type extends the Sanity image type, you can use all the options of the image type as well.
Tip
We recommend to not change the accept option (which is set to image/jpeg, image/png, image/webp by default) since the AI services may not support other formats.
| Key | Values | Default | Mandatory | Description |
|---|---|---|---|---|
provider |
anthropic, google or openai |
none | yes | AI service provider |
model |
depends on provider | depends on provider | no | Language model you want to use |
language |
depends on provider | english |
no | Language of the generated text |
generateOnUpload |
true or false |
true |
no | Generate alt text automatically an image is uploaded |
validationLevel |
error, warning or none |
none |
no | Level of validation for the alt text |
autoClearOnRemoveImage |
true or false |
true |
no | Clear alt text automatically when an image is removed |
If you choose anthropic as the provider, you can only use claude-3-5-sonnet-20240620 as the model (which is the default and can be omitted).
Supported languages
Following languages are supported:
chineseenglishfrenchgermanhindiitalianjapanesekoreanpolishportugueserussianspanishturkish
If you choose Google as the provider, you can use the following models:
gemini-1.5-flashgemini-1.5-pro
Supported languages
arabicbengalibulgarianchinesecroatianczechdanishdutchenglishestonianfinnishfrenchgermangreekhebrewhindihungarianindonesianitalianjapanesekoreanlatvianlithuaniannorwegianpolishportugueseromanianrussianserbianslovakslovenianspanishswahiliswedishthaiturkishukrainianvietnamese
If you choose OpenAI as the provider, you can use the following models:
gpt-4ogpt-4o-minigpt-4-turbo
Supported languages
albanianamharicarabicarmenianbengalibosnianbulgarianburmesecatalanchinesecroatianczechdanishdutchenglishestonianfinnishfrenchgeorgiangermangreekgujaratihindihungarianicelandicindonesianitalianjapanesekannadakazakhkoreanlatvianlithuanianmacedonianmalaymalayalammarathimongoliannorwegianpersianpolishportuguesepunjabiromanianrussianserbianslovaksloveniansomalispanishswahiliswedishtagalogtamilteluguthaiturkishukrainianurduvietnamese
If not already done, you need to need to create a .env file in the root of your Sanity Studio project.
Please provide the API key of the selected provider in the environment variable SANITY_STUDIO_IMAGE_WITH_AI_ALT_API_KEY.
Important
Since the Sanity Studio is a client-side application, your API key will be exposed to the client. Make sure to restrict the usage of the API key to your domain. For more information, see the Sanity documentation.
You can generate API keys in your Account Settings.
You can generate API keys in your Google Cloud Console. You need to enable the Generative Language API.
You can generate API keys in your OpenAI Account.
For more information about the privacy policies of the AI service providers and their data processing, see the following links:
MIT © dayy
This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.
See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.