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

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.

- By ChatGPT (5th Sep 2024)

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

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

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

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.

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

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.

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!

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
service

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh
  • user
    Dirk Eberhardt 2024-09-25 at 9:50 pm

    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!