AI language practice scenario builder

I know. More AI stuff. I am sorry.

The goal is to be able to create scenarios in a target language that are in a particular environment, associated with a particular task/goal, and focused on particular vocabulary. Right now, the goal is just the opportunity to practice writing the target language with some degree of feedback.

This is the kind of thing where I do think the LLM does a decent job because it’s not a tightly bound problem. Having some complexity beyond what’s desired isn’t a deal breaker and asking questions in the target language is a desired outcome when you don’t understand something.

I am just re-using the basic setup I had for the detox chatbots. What I was doing initially was spinning up a site with all the AI prompt guidance hard coded. I made it all the way to second chapter before I decided that was a terrible pattern. Instead, I figured I’d be smart and just pass in the scenario, vocabulary, and other prompt instructions as variables that get fetched via JSON and a URL parameter.

Creating structured scenario data

I did look around at some options outside WordPress but ended up just going that route because it was so easy.

To make this work, I set ACF to have a couple of fields for our key prompt guides. That’s our data source and ACT let’s you make the make that data visible in the normal WP JSON. Don’t forget to append &acf_format=standard to the URL so ACF gives you the data formatted in the way you want, like if you tell ACF to return the URL for an image. If you don’t do that, the JSON will just return the image ID (which would require more work to deal with).

So I end up with some JSON for each post that looks like this.

"acf": {
"persona_name": " Frau Lustig",
"scenario": "You are a travel agent at the train station in Mainz, Germany. You are assisting a student from Middlebury College in Vermont who needs help planning a trip to explore Germany, Austria, and Switzerland by train or by bus. You are providing advice on where to go, what to do, and how to get there on a student budget. Start the conversation with \"Willkommen am Bahnhof in Mainz. Wie kann ich Ihnen heute helfen?\"",
"language_level": "Your conversation should be held at the A2 level of the Common European Framework. Use a formal register (Sie & Ihr, etc.) and use the present tense. Use basic sentences and frequently used expressions related to areas of most immediate relevance (e.g. very basic personal and family information, shopping, local geography, employment). Communicate about simple and routine tasks requiring a simple and direct exchange of information on familiar and routine matters. Describe in simple terms aspects of background, immediate environment and matters in areas of immediate need.",
"vocabulary": "die Bahn, der Bus, das Flugzeug, das Schiff, das Taxi, der Zug, das Angebot, die Fahrkarte, die Reise, das Reisebüro, der Reiseprospekt, die Abfahrt, der Anschluss, die Auskunft, der Bahnsteig, der Fahrplan, die Fahrt, das Gleis, die Landschaft, die Möglichkeit, die Natur, die Platzkarte, der Reiseführer, der Strand, die Tour, die Verpflegung, der Wanderweg, das Bargeld, das Handgepäck, der Handschuh, die Kamera, der Personalausweis, das Sonnenschutzmittel, ab•fahren, ein steigen, erleben, mit machen, packen, sich überlegen, um•steigen, unternehmen, vergessen, verreisen, vor•schlagen, aktiv, bald, gefährlich, insgesamt, jung, langsam, schnell, sicher, alles, als, bevor, einfach, erster/zweiter Klasse fahren.",
"image": "https://experiments.middcreate.net/german-ai/wp-content/uploads/sites/20/2025/03/frau.png"
},

I ended up building a little plugin for the ACF data and to make a shortcode to present the scenarios and link to them with the post ID built into the URL. I’m not sharing that here because all this is tied into our API usage/cost.

I should be able to give the scenario creation over entirely to the faculty member at this point. Nice and easy.

Integrating the data

So now we want the generic AI chatbot to get the right scenario data for the various scenarios. I opted to just use the post’s ID for that and to give it to the chatbot via a URL parameter.

I ended up with this . . . comments are in caps below emphasizing the important parts.

//GET POST ID FROM URL
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const postId = urlParams.get('id')
    try {
        const response = await fetch(`https://experiments.middcreate.net/german-ai/?rest_route=/wp/v2/posts/${postId}&acf_format=standard`);//GET THE JSON
        const data = await response.json();
        return data.acf;
    } catch (err) {
        console.error('Error fetching scenario data:', err);
        return '';
    }
}

const openai = new OpenAIApi(configuration);
const chatbotConversation = document.getElementById('chatbot-conversation');


(async () => {
    const scenario = await fetchScenarioData();//THE SCENARIO DATA
 
    const conversationArr = [
        { 
            role: 'developer',
            content: `You must help me if I make any mistakes in my German by repeating the phrase correctly and 
          providing guidance. This conversation will be held only in German. Keep responses concise. \n\n
                ${scenario.scenario} 
                ${scenario.vocabulary}\n\n 
                ${scenario.job}\n\n 
                Make particular effort to use the following words: ${scenario.vocabulary}`
            }
    ];

What’s next?

Clearly there’s still some hard coded stuff in there around German. If this ends up being useful, I’ll modify the WordPress pieces to allow you to set language etc. and we’ll have something applicable to any language.