> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appblips.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add AI to Your Apps: Modes and Prompt Tips

> Enable the AI toggle before generating to give your app the blip.ai.text() API. Choose between BYOK and relay mode to control how credentials are supplied.

When you enable the AI toggle before generating, AppBlips teaches the finished app the `blip.ai.text()` API. That means the app you get back can call an AI model at runtime — not just during the build — so you can create things like joke generators, recipe suggesters, writing assistants, and anything else that needs live AI responses. The toggle is off by default; flipping it on is the only thing you need to do before writing your prompt.

## Enabling AI

<Steps>
  <Step title="Turn on the AI switch">
    Before typing your prompt, find the **AI** toggle in the build panel and switch it on. The toggle must be enabled before you generate — you cannot add `blip.ai.text()` support to an already-generated app without regenerating it.
  </Step>

  <Step title="Describe the AI feature in your prompt">
    Write your prompt as you normally would, but include a plain-English description of what you want the AI to do. You do not need to write any code — just describe the behavior.
  </Step>

  <Step title="Generate your app">
    Press the build button. AppBlips generates a working app that already knows how to call `blip.ai.text()` wherever you described it.
  </Step>
</Steps>

## How to Describe AI Features

Describe what the user does, when the AI should respond, and what the response should look like. You do not need to reference the API by name — but you can if you want to be explicit.

**Joke writer:**

> Build a joke-writing app. When someone chooses a topic and presses Generate, call `blip.ai.text` to write one short family-friendly joke, show a loading state while it runs, and display a friendly retry message if something goes wrong.

**Recipe suggester:**

> Build a recipe suggester. The user enters a few ingredients they have on hand and presses Find Recipes. Call `blip.ai.text` to return three recipe ideas with names and short descriptions. Show a spinner while loading.

**Writing assistant:**

> Build a cover-letter helper. The user pastes a job description and writes a few notes about themselves, then clicks Generate. Use `blip.ai.text` to produce a polished cover letter paragraph they can copy.

<Tip>
  Be specific about when the AI call should happen (on a button press, on form submit, etc.) and what the output should look like. The more detail you give, the better the generated code handles loading states, errors, and display.
</Tip>

## Two Access Modes

AI-enabled apps can get their credentials in two ways, depending on how AppBlips is configured.

<CardGroup cols={2}>
  <Card title="BYOK Mode" icon="key" href="/ai/byok-mode">
    Each person using your app enters their own API key, endpoint, and model name. The key never leaves their browser and is never baked into the HTML. This is the default for self-hosted installations.
  </Card>

  <Card title="Relay Mode" icon="server" href="/ai/relay-mode">
    The operator (you, running the self-hosted server) provides a key server-side. Users never see a credential prompt — AI calls are proxied through your server. The key stays on the server; only a relay URL is embedded in the app.
  </Card>
</CardGroup>

## Accessing AI in the Preview

The live preview supports `blip.ai.text()` in real time — you can test your AI feature before exporting or sharing anything. In BYOK mode, the first AI call opens a **Connect your AI provider** dialog right inside the preview. Enter your endpoint, model, and API key, and subsequent calls in that session use those credentials automatically.

<Info>
  In relay mode, AI calls in the preview go through your server's relay endpoint — no dialog appears and no key is needed from the preview user.
</Info>

## Exporting AI-Enabled Apps

When you export an AI-enabled app as an HTML file, the AI bridge is included automatically. The behavior on first use depends on the mode the app was built in:

* **BYOK mode:** The exported HTML contains no credentials. Anyone who opens the file sees the **Connect your AI provider** dialog on their first AI call. Each person supplies their own key; nothing is shared.
* **Relay mode:** The exported HTML embeds the relay URL (for example `/api/app-ai/chat`) but not the provider key, which stays on your server. Anyone who opens the file can make AI calls through your relay as long as they can reach that URL.

<Note>
  For the full JavaScript API — including streaming, error codes, and the `configure()`, `isConfigured()`, and `clearConfiguration()` helpers — see the [blip.ai API Reference](/ai/blip-api).
</Note>