Skip to main content
Glama
firebase
by firebase
webp.ts2.95 kB
/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { anthropic } from '@genkit-ai/anthropic'; import { genkit } from 'genkit'; const ai = genkit({ plugins: [anthropic()], }); /** * This flow demonstrates WEBP image handling with matching contentType. * Both the data URL and the contentType field specify image/webp. */ ai.defineFlow('stable-webp-matching', async () => { // Minimal valid WEBP image (1x1 pixel, transparent) // In a real app, you'd load an actual WEBP image file const webpImageData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='; const { text } = await ai.generate({ model: anthropic.model('claude-sonnet-4-5'), messages: [ { role: 'user', content: [ { text: 'Describe this image:' }, { media: { url: webpImageData, contentType: 'image/webp', }, }, ], }, ], }); return text; }); /** * This flow demonstrates the fix for WEBP images with mismatched contentType. * Even if contentType says 'image/png', the plugin will use 'image/webp' from * the data URL, preventing API validation errors. * * This fix ensures that the media_type sent to Anthropic matches the actual * image data, which is critical for WEBP images that were previously causing * "Image does not match the provided media type" errors. */ ai.defineFlow('stable-webp-mismatched', async () => { // Minimal valid WEBP image (1x1 pixel, transparent) const webpImageData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='; const { text } = await ai.generate({ model: anthropic.model('claude-sonnet-4-5'), messages: [ { role: 'user', content: [ { text: 'Describe this image (note: contentType is wrong but data URL is correct):', }, { media: { // Data URL says WEBP, but contentType says PNG // The plugin will use WEBP from the data URL (the fix) url: webpImageData, contentType: 'image/png', // This mismatch is handled correctly }, }, ], }, ], }); return { result: text, note: 'The plugin correctly used image/webp from the data URL, not image/png from contentType', }; });

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/firebase/genkit'

If you have feedback or need assistance with the MCP directory API, please join our Discord server