How Is T3AI Built on TYPO3 Core Standards? (UI/UX and Code)

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.

What’s T3AI?

- 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.

Coding Standards: Adhering to TYPO3 Core

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!

Your One-Stop Solutions for Custom TYPO3 Development

A Decade of TYPO3 Industry Experience
350+ Successful TYPO3 Projects
87% Repeat TYPO3 Customers

TYPO3 Service

Sanjay Chauhan

CTO - T3Planet & NITSAN

Sanjay Chauhan, Mitbegründer von NITSAN (Preisgekrönte TYPO3 Agentur) und Pionier von T3Planet, dem ersten TYPO3 Shop weltweit.

Ein wahrer TYPO3-Fanatiker seit 2010.
Mit meinem umfangreichen technischen Wissen und…