WeWeb AI Chat Setup Issue - Editor Works, Preview Fails

I’m using the WeWeb AI Chat element with OpenAI plugin integration. My setup uses Airtable as the backend with secured prompts stored in TEMPLATE_AI_PROMPTS table, filtered by template_id and phase_number. I have collections (TEMPLATE_AI_PROMPTS_CURRENT, USER_PROFILES_CURRENT, GAME_RUNTIME_BY_USER) that fetch data on page load. The OpenAI plugin configuration uses secured prompt variables {{systemPrompt}} and {{fullPrompt}} which are populated by JavaScript formulas in the workflow. These formulas extract text from TEMPLATE_AI_PROMPTS_CURRENT collection (system_instructions and prompt_text fields) and perform string replacement operations to personalize content with user first name, role, and partner name from USER_PROFILES_CURRENT collection data. My page load workflow: (1) fetches all required collections, (2) clears aiMessages variable (Replace all items with []), (3) calls OpenAI Chat Completion with Messages parameter set to empty array [], and {{systemPrompt}}/{{fullPrompt}} bound via JavaScript formulas with .replace() operations, (4) populates aiMessages array with the assistant greeting object including id, timestamp, role, and content fields.

In the editor environment, everything works perfectly: collection fetches return the correct Phase 3 prompts (verified by inspecting collection data in variables panel), workflow test actions return the expected greeting (“ROLE: ACTIVE TEST Let’s dive in…”), and the aiMessages variable current value displays the correct Phase 3 assistant greeting content. All JavaScript formulas execute correctly with proper string replacements from collection data. Testing individual workflow actions shows proper data flow through each step and the OpenAI API returns appropriate Phase 3 content.

In preview/production, the AI Chat element displays completely wrong content - specifically showing text about German calories/metabolism, silver metal properties, and cardiology information instead of the Phase 3 relationship coaching greeting. Browser console inspection reveals aiMessages variable contains this incorrect content at runtime. The page load workflow appears to execute based on network activity, but the AI Chat element receives or displays wrong data that doesn’t match what the workflow should produce. AI Chat element mapping is configured correctly (Message ID → id, Message Text → content, Message Role → role, Timestamp → timestamp), and the Messages binding points to the aiMessages variable. Variable settings: Preserve on navigation is OFF, Save in local storage is OFF, default value is empty array []. This discrepancy between editor behavior and preview/production behavior suggests a workflow execution timing issue, variable state problem, or data persistence mechanism that’s not functioning as expected.

1 Like

Hey @lupowolfen ! Thanks so much for taking the time to include detailed context.

I have to say I’m still struggling a little bit to picture this in my head. Would you mind recording a video walkthrough or mapping out visually what the process looks like and where it’s breaking down?

hi Joyce, thanks for coming back to me.

actually, claude cowork was able to pinpoint the issue for me.

one formula that was was bount to the system prompt was wrong

collections[‘05fe0927-acaf-4aba-8f8a-ecd5874c80a1’]?.data?.[0]?.template_id)

and needed to be

collections[‘05fe0927-acaf-4aba-8f8a-ecd5874c80a1’]?.data?.[0]?.[‘template_id (from TEMPLATE_GAME)’]?.[0]

anyway, all solved, thank you

1 Like

Ooh beautiful! Claude code is awesome! :grinning_face:

Wait, what? How have you been using cowork with weweb dev?

1 Like

yes, claude cowork can read the browser, and it can help to debug/advice.

it reads the web public web documentation quicker than i do :smile:

1 Like