How to Add an AI Chat Feature to a No-Code App

Adding an AI feature, like a chat assistant or a text summarizer, is a popular way to make a no-code app feel modern. The key rule is the same as with payments: the API key lives on the server, never in the browser. This guide adds a simple AI chat backed by a secure function.

What you need

• A Lovable or Bolt project with backend support (Supabase Edge Functions or a Node server)
• An API key from your chosen model provider
• A place to store the key as a server secret
• About 20 minutes

Step 1: Store the API key as a server secret

Save your provider key as a backend secret so it is never shipped to the browser. With Supabase you set it as a function secret; in a Node app you put it in the server environment.

Step 2: Ask the tool for a secure proxy function

Prompt your builder to create a server function that takes the user's message, calls the model with the secret key, and returns the reply. The browser only ever talks to your function, not the provider directly.

Create a secure server function called 'ask' that accepts a 'message' field, calls the Anthropic API using the ANTHROPIC_API_KEY secret with model claude-haiku-4-5, and returns the model's text reply as JSON.

Step 3: Review the generated function

Open the function and confirm the key is read from the environment and the request shape matches the provider's API. The example below uses Anthropic's Messages API.

const res = await fetch("https://api.anthropic.com/v1/messages", {
  method: "POST",
  headers: {
    "x-api-key": Deno.env.get("ANTHROPIC_API_KEY")!,
    "anthropic-version": "2023-06-01",
    "content-type": "application/json",
  },
  body: JSON.stringify({
    model: "claude-haiku-4-5",
    max_tokens: 1024,
    messages: [{ role: "user", content: message }],
  }),
});
const data = await res.json();
return new Response(JSON.stringify({ reply: data.content[0].text }));

Step 4: Wire up the chat UI

Ask the tool to add a chat box that sends the typed message to your function and shows the reply. Test it in the preview with a few prompts.

Result

Your no-code app now has a real AI feature, with the API key safely on the server and the model called through your own function. Swap the model name or provider later without touching the front end.