Inline AI-Powered Translations: Integrating ChatGPT with Payload CMS

15 December 2024 by Moritz Thomas

In modern translation management systems, the ability to quickly generate high-quality translation suggestions directly within the editing interface can significantly streamline the translation workflow. This article explores how we integrated OpenAI's ChatGPT API with Payload CMS to provide inline translation suggestions, creating a seamless experience for content editors and translators.

Overview

The system combines several key components:

A custom Payload CMS field component for the user interface
An API endpoint that interfaces with OpenAI's ChatGPT
Integration with our Settings global for configuration
Function calling for structured translation responses

This integration allows translators to:

Receive AI-powered translation suggestions directly in the editing interface
Choose from multiple translation variations
Maintain context awareness through description fields
Customize the AI's behavior through configurable prompts

Custom Translation Field

The heart of our implementation is a custom Payload CMS field that extends the standard text input with AI translation capabilities:

const InputField: React.FC<Props & { 
  minVariations: number; 
  maxVariations: number 
}> = ({
  path,
  label,
  required,
  admin: { readOnly },
  minVariations,
  maxVariations,
}) => {
  const documentInfo = useDocumentInfo();
  const { code: locale } = useLocale();
  const [translations, setTranslations] = useState([]);
  const [load, setLoad] = useState("");
  const [term, setTerm] = useState("");
  const [context, setContext] = useState("");

  // ... component implementation
};

Key features of the field component:

Extends Payload's text field functionality
Provides a familiar interface for manual translation
Adds an "Ask ChatGPT" button for AI suggestions
Displays multiple translation options in a dropdown
Preserves context through description fields

The component is designed to be non-intrusive - it maintains all standard text field functionality while adding AI capabilities when appropriate:

return (
  <div className="custom-translation-picker field-type text">
    <Label htmlFor={path} label={`${label} (${locale})`} required={required} />
    <input
      type="text"
      id={path}
      value={value.toString()}
      onChange={(e) => setValue(e.target.value)}
      disabled={readOnly}
    />
    {locale !== defaultLocale && documentInfo.id && (
      // AI translation interface
    )}
  </div>
);

ChatGPT Integration

The translation endpoint leverages OpenAI's function calling feature to ensure structured responses:

const tools = [
  {
    type: "function",
    function: {
      name: "display_translation_options",
      description: `Display a list of translation options...`,
      parameters: {
        type: "object",
        properties: {
          translations: {
            type: "array",
            items: {
              type: "string",
            },
            description: "List of translation options",
          },
        },
      },
    },
  },
];

This approach offers several advantages:

Structured responses that can be reliably parsed
Clear guidance to the AI about expected output format
Flexibility in the number of variations requested
Easy extension for additional metadata in the future

Configuration Through Settings

The system uses our previously implemented Settings global for configuration:

const settings = await payload.findGlobal({
  slug: "payload-settings",
}) as PayloadSetting;

const model = settings.chatgptModel ?? "gpt-4-turbo-preview";
let content = settings.askChatgptPrompt;

This allows administrators to:

Select the ChatGPT model to use
Customize prompts for different scenarios
Configure the number of variations
Set default behaviors

Usage in Different Contexts

The custom field can be used in various contexts throughout the CMS:

Article Titles

{
  name: "title",
  label: "Title",
  type: "text",
  localized: true,
  admin: {
    components: {
      Field: (props) => (
        <InputField {...props} minVariations={3} maxVariations={5} />
      ),
    },
  },
}

UI String Translations

{
  name: "text",
  type: "text",
  label: "Text",
  localized: true,
  admin: {
    components: {
      Field: (props) => (
        <InputField {...props} minVariations={3} maxVariations={5} />
      ),
    },
  },
}

Context-Aware Translations

The system maintains translation context by:

Fetching the original content and description
Including context in the ChatGPT prompt
Allowing customization of context handling through settings

await fetch(`/api/${documentInfo.slug}/${documentInfo.id}?draft=false&depth=1`)
  .then((response) => response.json())
  .then((data) => {
    setContext(data.description);
    setTerm(data[path]);
  });

Future Enhancements

Several areas have been identified for future improvement:

Enhanced Error Handling

Better validation of API responses
Graceful fallback for API failures
User-friendly error messages

Performance Optimization

Caching of common translations
Batch translation capabilities
Request rate limiting

Quality Assurance

Translation confidence scores
Automatic quality checks
Context-specific validation

User Interface Improvements

Preview of translations in context
Keyboard shortcuts for efficiency
Bulk translation interface

Conclusion

The integration of AI-powered translations directly into the CMS editing interface represents a significant improvement in translation workflow efficiency. By combining the power of ChatGPT with a carefully designed user interface, we've created a system that:

Reduces translation time and effort
Maintains translation quality through context awareness
Provides flexibility through configuration
Integrates seamlessly with existing workflows

This implementation demonstrates how modern AI capabilities can be thoughtfully integrated into content management systems to enhance productivity while maintaining user control and content quality.