AI Assistant shows 'Failed to fetch' when no LLM API key is configured in Vault

[adityaa206]

Description

When a user opens the New Template → AI Assistant panel and sends a prompt, the response is always:

I encountered an error: Failed to fetch. Please try again.

This happens because no LLM API key (e.g. MISTRAL_API_KEY) has been stored in the user's Vault. The error is silent and gives the user no actionable guidance.

Root Cause

Bug 1 — Unhandled ValueError in the /generate route

In flowsint-api/app/api/routes/enricher_templates.py (lines 113–123), the generate call is wrapped in except ValidationError, but the LLM factory raises a ValueError (not a ValidationError) when the API key is missing:

# flowsint-core/src/flowsint_core/core/llm/factory.py, line 32
raise ValueError(
    "API key not configured. Set MISTRAL_API_KEY environment variable or pass api_key argument."
)

Because ValueError is not caught, FastAPI returns an unhandled 500 Internal Server Error. In some cases this 500 response is missing CORS headers, so the browser throws TypeError: Failed to fetch with no useful detail — matching the symptom exactly.

Confirmed in API container logs:

ValueError: API key not configured. Set MISTRAL_API_KEY environment variable or pass api_key argument.

Bug 2 — No pre-flight key check in the AI Assistant UI

flowsint-app/src/components/templates/ai-chat-panel.tsx sends the prompt directly without first checking whether an LLM API key exists in the Vault. A /keys/exists/{key_name} endpoint already exists in the backend and could be used to show actionable guidance instead of the generic error.

Steps to Reproduce

1. Start Flowsint with a fresh account (no Vault secrets configured)
2. Navigate to Dashboard → Enrichers → New Template
3. Open the AI Assistant panel
4. Type any prompt and press Enter
5. See: I encountered an error: Failed to fetch. Please try again.

Expected Behavior

• The route handler should catch ValueError and return a 422 with a clear message: "LLM API key not configured. Please add MISTRAL_API_KEY to your Vault."
• The AI Assistant panel should pre-check key existence on mount and show inline guidance if the key is missing, with a link to the Vault page

Suggested Fix

Backend (flowsint-api/app/api/routes/enricher_templates.py) — also catch ValueError:

try:
    yaml_content = await service.generate(...)
except ValidationError as e:
    raise HTTPException(status_code=422, detail=str(e))
except ValueError as e:
    raise HTTPException(status_code=422, detail=str(e))

Frontend (flowsint-app/src/components/templates/ai-chat-panel.tsx) — check key existence on mount and show a warning banner:

useEffect(() => {
  keyService.exists('MISTRAL_API_KEY').then(({ exists }) => {
    if (!exists) setKeyMissing(true)
  })
}, [])

Environment

• Flowsint Docker prod build
• Default LLM provider: mistral (env default, no override set)
• OS: Windows 11, Docker Desktop v4.76.0

Related Files

• flowsint-api/app/api/routes/enricher_templates.py — missing ValueError catch
• flowsint-core/src/flowsint_core/core/llm/factory.py — raises ValueError on missing key
• flowsint-core/src/flowsint_core/core/services/template_generator_service.py — calls _get_llm_provider without catching
• flowsint-app/src/components/templates/ai-chat-panel.tsx — no pre-flight key check
• flowsint-app/src/api/key-service.ts — existing exists() helper available for the pre-check

[Lakshya77089]

Hi @adityaa206,

I'd like to work on this issue.

From the description, it looks like there are two parts to address:

1. Handle the missing API key error gracefully in the backend by catching the ValueError and returning a proper 422 response.
2. Improve the AI Assistant UX by checking for the required LLM API key before sending requests and showing actionable guidance when it's missing.

I'll investigate the existing implementation and submit a PR if the issue is still available. Could you please assign it to me?

Thanks!

[dextmorgn]

@adityaa206 thanks for creating this issue !
@Lakshya77089 kudos on taking the lead !

For the frontend, you can use already existing hook flowsint-app/src/hooks/use-is-chat-active.ts that does exactly this.
Example in flowsint-app/src/components/chat/floating-chat.tsx