Curious about how our popular T3AI TYPO3 extension came to life? We built it by carefully adhering to TYPO3 core standards for both backend UI/UX and coding practices. Read on to discover the what, why, and how behind its development!
We love TYPO3 & AI! At T3Planet, we’re passionate about TYPO3! We proudly developed and launched the first-ever feature-rich TYPO3 AI extension, T3AI. In this blog, we’ll dive into how we researched and developed this custom TYPO3 extension while adhering to TYPO3 core UI/UX principles and technical coding standards.
Did you know? By following TYPO3 core guidelines, we didn’t need to write a single line of extra HTML, CSS, or JavaScript to achieve the impressive UI/UX of TYPO3.
- By ChatGPT (5th Sep 2024)
T3AI in Numbers
Before diving deeper, let’s share some key figures that reflect the hard work behind T3AI (not from a marketing perspective, but as a testament to the dedication of TYPO3 developers):
- 3000+ Hours to re-launch T3AI v4 ⏰
- 500+ Cup of Coffee
- 10+ Dedicated Resources
- 1814+ Git Commits
- 350+ Merge Requests
- 300$+ OpenAI’s Bills
- 80+ Git Tickets
- 25+ Branches
- 15+ Releases
v1: How We Started with T3AI? (Alpha)
T3AI v1 was our experimental foray into integrating AI with TYPO3 CMS. We began with small features such as a 3-Step TYPO3 Page Launch, AI-Powered Content via TYPO3 RTE, SEO Optimization with AI, Automated Page Translation, and ChatGPT Personal Assistant.
While v1 focused on technical feasibility and extending TYPO3 core standards, it fell short in UI/UX. The early versions lacked polish, as shown in the screenshots below.
Optimize SEO at Page Module
ChatGPT Assistance
v2 & v3: One Step Ahead to Core (Beta)
T3AI v2 introduced more AI features, while v3 involved significant changes, including renaming from EXT:ns_openai (ChatGPT only) to EXT:ns_t3ai (supporting multiple AI models like Gemini, DeepL, Azure, etc.).
New features included a ChatGPT Sidebar, one-click SEO optimizations, language translation records, AI-generated images, automated content creation, and a glossary translation feature.
Create AI Page at Page Module
RTE Assistance
AI Image as Custom Module
v4: Built on TYPO3 Native (Stable)
Released on August 15, 2024, T3AI v4 marked a complete redevelopment, focusing on backend UI/UX and code structure. An early access program provided valuable feedback, leading to positive responses from our early adopters.
This version features an all-in-one TYPO3 AI extension with a dashboard, SEO tools, content management, translation, localization, custom prompts, and an AI chatbot. The UI/UX closely follows TYPO3 core standards, ensuring a seamless integration with TYPO3’s native interface.
UI/UX: What’s Considered in T3AI?
Here is the list of adaptation, I want to mentioned regarding user interface and user experience to closely connect with TYPO3 core.
Dashboard TYPO3 Core Extension
We used TYPO3 core’s EXT:dashboard for consistent design.
TYPO3 Core Dashboard
T3AI Backend Module
Custom Modules & Context Menu
Editors can access T3AI from anywhere via custom backend modules.
Context Menu
Cards Design of Admin Tools
Features are presented like admin tools for a familiar look.
Admin Tools of TYPO3 Core
AI Modules at T3AI
Modalbox of TYPO3 Core
We adopted TYPO3’s Modalbox style for space-saving.
Popup in TYPO3 Core
Popup in T3AI
Translation within Language Wizard
Integrated seamlessly with TYPO3’s language wizard.
AI Model at Tranlsation Wizard
Listing Records Just like Logs Manager
Styled like TYPO3’s logs and extensions manager.
Logs Manager of TYPO3 Core
Prompts Manager of T3AI
Followed Files Structure
AI images follow TYPO3 core’s filelist module design.
File Module of TYPO3 Core
AI Image of T3AI
T3AI Copilot in RTE/CKEditor
T3AI follows CKEditor’s design considerations.
Generate AI Image Everywhere
Accessible from multiple points within TYPO3.
AI Image at File Module
AI Image at FAL
Coding Standards: Adhering to TYPO3 Core
From a technical perspective, maintaining alignment with TYPO3 core coding standards was crucial. We followed:
- TYPO3 Core Coding Standards
- PHP PSR Rules
- Extbase Framework
- MVC and Modeling
- Fluid Templating
- TYPO3 Core Extensions
- Advanced Techniques (e.g., Services, DTO, Factory, Hooks, VH)
- TYPO3 Rector
- Semantic Versioning 2.0
- Automatic Code Review
- Code Linting (PHP-Stan, PHP-CS-Fixer)
- YAML Lint
- TypoScript Lint
- Fluid Lint
- XLF Lint
- Senior Code Reviews
Check out the extension architecture with 30 PHP Classes, illustrating our use of TYPO3 core APIs to develop and extend T3AI.
Implementation of PHP PSR-12 Coding Standard
- All PHP files adhere to Unix LF (linefeed) line endings.
- No hard limit is imposed on line length.
- The declare statement is used for each class.
Use of DataHandler
Pages, records, and content creation follow TYPO3’s standard approach using DataHandler.
Exception Handling
Error handling is managed with custom Exception Handler classes for specific scenarios.
Utilization of Interfaces
TYPO3 Core Interfaces are used for integrating Doc Header Buttons, Content Buttons, and Context Menus.
Code Refactoring & Optimization
Base classes are implemented to reduce code redundancy and enhance optimization.
ES6 in the TYPO3 Backend
JavaScript modules are added using the new approach with JavaScriptModules.php and appropriate imports.
AJAX/Routes
AJAX requests are utilized for each JavaScript request, with defined routes for various actions.
Event Listeners
TYPO3 Core Events are used, along with custom-developed events, to achieve desired features.
That’s a Wrap!
We could write lots about the initiation and journey of T3AI to v4. Our team has worked diligently, adhering to TYPO3 core standards and focusing on user experience. Have you explored T3AI yet? If not, dive in and experience the innovation!
- Explore the Extension: T3AI on T3Planet
- Backend Live Demo: Live Demo
- Documentation: T3AI Documentation
- Have Questions? Connect with Stefan, Product Ambassador at +49 6204 6011377 | stefan.reinhardt(at)t3planet.com
Have a Happy TYPO3 AI!
The blog about TYPO3 AI is Great! It shows how T3Planet cares about quality by sticking to TYPO3's core guidelines. Learning that they didn’t have to write extra code to make it user-friendly is impressive. I'm excited to use T3AI!