Integrating an AI Assistant into the MODX Evolution Manager
Problem. When filling sites, content managers often encounter complex HTML structures (tabs, grids, pop-ups). Editing such content through a visual editor (TinyMCE) or source code regularly causes layout breakdowns, loss of important classes, or JS events. The process requires a lot of time and extreme accuracy.
The challenge Design a minimalist and reliable tool in an admin panel that automates the rewriting of complex blocks using neural networks, eliminating the human factor when working with code.
Decision Developed custom plugin for MODX Evo based on OpenAI API (GPT-4o). The plugin adds a AI assistant button to each field with RichText, allowing you to rewrite the text within the block under the desired topic in one click, guaranteeing the preservation of the structure of HTML.
Key functionality (Business Value):
-
100% protection of layout: The neural network is strictly instructed to save all tags, classes, ID and data attributes.
-
Context automation: The plugin independently analyzes the environment (field language) and pulls up the desired topic from neighboring TV parameters.
pagetitle_ru/pagetitle_en). -
Smart media integration: The contenter just needs to insert any (« dirty ») link to YouTube. AI itself will clean it from unnecessary parameters and form the correct
iframefor embedding. -
Dynamic adaptation of UI: If the link to the video is not transmitted, the neural network carefully cuts the tabs «Video» from the original HTML and transfers the active classes to neighboring elements so that the design does not break.
Technical features of implementation:
-
Architecture without core hacks: Native system events MODX are used.
OnManagerPageInit,OnDocFormRender). -
Safe routing: AJAX requests to API are processed within the current admin panel page. This allowed us to elegantly bypass the problems with the CORS and the loss of authorization cookies.
-
Bypassing the limitations of the sanitizer: Forced insertion of generated code in format
rawTo ensure that TinyMCE’s built-in security filters do not cut out the necessary security filters.onclickevents. -
Optimization of work with DB: A filter is written on regular expressions for pre-cleaning 4-byte characters (emoji), which prevented critical errors while saving the plugin to the MySQL database with outdated encoding.
utf8.
Outcome It’s a pragmatic solution that has radically simplified content. The time for filling complex pages has been reduced several times, and the risk of « breaking the design of ZXXQ1QXZ is reduced to absolute zero. The content manager has a convenient tool that does not require knowledge of HTML.
