Drupal x GSoC: Week 1 - Building the Base

WELLLLLLCOMMEE To Week 1 of GSoC x Drupal.

Over the first week my focus was on establishing a proper base for the project. This was particularly fun as you can see your project come to life. These are some other chapters of the journal that you should definitely read!

I created a project: Creating a Module Project on Drupal (NO CODE) (With BONUS Section)

I learnt about PIRLS - Drupal's Core .yml files

Before you proceed any further, you should have a drupal project set up. If not, you can check it out here: Installing Drupal

Have added a bit more changes too, you can check it our here: Week 1 Official Tracker

https://www.youtube.com/watch?v=2IcKTPBoyqc

Week 1 Issues Tackled

Let's zoom out and see what we have built. UI might not be that great yet but that was not the focus of the first week.

You should clone the basic repo of the module and paste it in: web/modules/custom/ai_recipe_generator.

You might need to create this folder & add all the files. We use custom as we haven't made a deployment of the project yet. So once I did this I made. Now I have added ai_recipe_generator.info.yml, ai_recipe_generator_services.yml, ai_recipe_generator.routing.yml. I have made a blog on these files and what do these mean, you can check that out too.

I then created 2 things in src folder - Form & Services.

So we have two pages as you saw above. Let's understand the routing or the file urls

Our File Structure

ai_recipe_generator.test_form:
  path: '/admin/config/development/ai-recipe-test'
  defaults:
    _form: '\Drupal\ai_recipe_generator\Form\RecipeGeneratorTestForm'
    _title: 'AI Recipe Generator (Test UI)'
  requirements:
    _permission: 'administer site configuration'

ai_recipe_generator.settings:
  path: '/admin/config/ai-recipe/settings'
  defaults:
    _form: '\Drupal\ai_recipe_generator\Form\SettingsForm'
    _title: 'AI Recipe Generator Settings'
  requirements:
    _permission: 'administer site configuration'

Each entry has the following

1 The URL Path

2 The Form File which it should render

3 The title of the Page

4 Permission Requirements

---

We have dependecies as well. This module as of now depends on the AI Module, Gemini Provider Module as well as the Key Module for managing all the keys. You have to install and enable all these modules for the AI Recipe Generator to function. This is actually cool as we are using the Drupal Ecosystem to do our tasks.

Flow Diagram

Phase 1: The Setup (Settings Form)

Before a user can generate a recipe, an administrator sets the rules.

1. Setting the Ground Rules: An admin visits the "AI Recipe Generator Settings" form and enters the System Instructions (e.g., "You are a senior Drupal developer...").
2. Saving to the Database: When the admin clicks "Save configuration," Drupal uses its configuration service (@config.factory) to safely store these instructions in the database for later use.

Phase 2: The User Request (Test UI Form)

This is where the actual generation happens.

1. User Input: A user opens the "AI Recipe Generator (Test UI)" form. They select their preferred AI Provider (like Gemini) and type exactly what they want to build into the Recipe Prompt box.
2. Triggering the AJAX Call: The user clicks the Generate Recipe button. Instead of reloading the whole webpage, the browser sends a quiet, background message (an AJAX Request) to the Drupal server containing the user's prompt and their chosen AI provider.

Phase 3: The Backend Brain (Drupal Services)

Once Drupal receives the AJAX request, it hands the work over to the custom services defined in your .yml file.

1. Gathering the Pieces: The main service (RecipeGenerationService) goes to work collecting three crucial pieces of information:
2. The Rules: It pulls the saved "System Instructions" using @config.factory.
3. The Context: It asks the ContextExtractor service to pull any relevant background information about your specific Drupal site.

4. The Request: It takes the user's specific "Recipe Prompt" from the AJAX call.

5. Talking to the AI: The RecipeGenerationService combines the rules, the context, and the user's request into one massive prompt. It then uses the @ai.provider service to send this combined package over the internet to the external AI (e.g., Gemini).

Phase 4: The Result (AJAX Response)

1. Receiving the Recipe: The external AI processes the prompt, generates the Starshot Recipe YAML file, and sends it back to your Drupal server.
2. Updating the Screen: Drupal packages this generated recipe into an AJAX Response and sends it back to the user's browser. The browser reads this response and instantly displays the new recipe on the screen, completing the process without ever forcing the user to refresh the page.