# Lovable

> Give Lovable project context about Agent Router so apps it generates call the gateway with the right base URL, auth, and endpoints.

Give Lovable context about Tetrate Agent Router so the apps it generates call the gateway instead of a single provider, with the right base URL, authentication, and endpoints from the first prompt.

**Persona:** Developer generating an application in Lovable that calls an Agent Router gateway.

**Estimated time:** 5 minutes.

## Outcomes

By the end of this guide:

- Lovable's project context describes the Agent Router base URL, authentication, and available endpoints.
- Generated applications call the gateway rather than a single provider directly.
- The API key is read from an environment variable or a server-side secret, never embedded in client-side source.

## Setup

Lovable reads project context from the knowledge or instructions field attached to a project, rather than from a file in a repository. Paste the following into that field before generating AI features:

```markdown title="Project context"
# Agent Router AI Gateway

This project uses Agent Router as an AI gateway. Agent Router exposes a single
OpenAI-compatible endpoint that routes to multiple AI providers.

## API configuration

- Base URL: the proxy endpoint shown on the Console Dashboard, ending in `/v1`
- Auth: Bearer token with an Agent Router API key
- Protocol: OpenAI Chat Completions API, so any OpenAI-compatible client works
- Store the key as `AGENTROUTER_API_KEY`, never in generated source

## Making API calls

Use a standard OpenAI-compatible client and change only the base URL and API key:

- Point `baseURL` at the Agent Router proxy endpoint.
- Read the API key from `AGENTROUTER_API_KEY`.
- Default to a chat completions model unless a specific model is requested.

## Endpoints available through Agent Router

- Chat completions
- Embeddings
- Image generation
- Audio speech

## Patterns to prefer

- Use streaming for any user-facing chat interface.
- Use a separate API key per feature so cost can be attributed.
- Rely on gateway-side fallback routing for high availability, configured in
  the Console rather than in application code.
```

:::caution Keep the key out of client-side source
Generated apps run in the browser or in a deployed backend, so the Agent Router API key belongs in an environment variable or a server-side secret. Generated code must not embed the key in client-side source.
:::

## What the context provides

With this context attached, Lovable:

- Generates API calls that target the Agent Router base URL and Bearer-token auth pattern.
- Routes through the gateway rather than calling a single provider directly.
- Reads the API key from `AGENTROUTER_API_KEY` instead of hardcoding it.
- Uses streaming for chat interfaces and separate keys per feature.

Where to go next

  <Link to="/agent-router-service/guides/coding-agents/claude-code/" className="tare-nav-card">
    Claude Code
    Connect Claude Code to the gateway, or add a <code>CLAUDE.md</code> for Agent Router patterns.
  </Link>
  <Link to="/agent-router-service/guides/integrate-the-gateway-with-an-app/" className="tare-nav-card">
    Integrate the gateway with an app
    Point SDKs and frameworks at the gateway in application code.
  </Link>