Lovable prompt to integrate an LLM chatbot
Dropping an LLM chatbot into a Lovable app touches secrets, streaming, and message persistence at once, and skipping any of the three produces a demo that breaks on refresh. This spec covers the edge function proxy, the conversations schema, and the composer behaviors, leaving you with a chat panel whose history survives reloads.
Last updated
Add an LLM chatbot to this app as a slide-over panel opened from a button in the header. Backend: an edge function named chat that reads the provider API key from a Supabase secret, forwards the conversation, and streams the reply so text appears token by token in the panel. Keep the system prompt in a chat_settings table so I can edit it from an admin screen without redeploying. Data model: conversations and messages tables keyed to user_id with row level security, storing role, content, and token counts when the provider returns them. Behaviors: enter sends, shift-enter inserts a newline, a stop button aborts the stream, and the last twenty messages of the active conversation travel as context. New chat starts a fresh conversation, and a sidebar lists past conversations titled by their first message. States: a disabled composer with an explanatory notice when the secret is missing, a retry link on provider timeouts, and a skeleton bubble while the first tokens arrive. Styling: user messages right-aligned in a filled bubble, assistant messages left-aligned with a copy button, markdown rendered with proper code blocks. Acceptance: replies stream rather than arriving in one block, refreshing mid-conversation restores history from the messages table, aborting a stream keeps the partial text in place, and a second signed-in user cannot read another user's conversations.
Same task in other tools
Questions about this prompt
Where does the API key live, and can users extract it?
It sits in a Supabase secret that only the chat edge function reads, so it never ships in the browser bundle. If the key shows up anywhere in frontend code, tell Lovable to move it and rotate the key.
How do I swap the model or provider later?
Only the edge function knows the provider, so ask Lovable to change the fetch call and response parsing there. The UI, tables, and streaming plumbing stay untouched.
Streaming worked, then replies started arriving as one block after an edit. What broke?
A regenerated function often loses the streamed response handling and falls back to awaiting the full body. Point Lovable at the chat function and restate that the reply must stream through to the client.