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

# Lovable

> Use Ollang MCP inside Lovable to translate and localize your AI-built web applications.

# Ollang MCP in Lovable

[Lovable](https://lovable.dev) is an AI-powered full-stack web app builder. With Ollang MCP, Lovable's AI agent can manage translations and localization directly within your app-building workflow — making it easy to ship multilingual products from day one.

## Setup

<Steps>
  <Step title="Open your Lovable project settings">
    Go to [lovable.dev](https://lovable.dev) and open your project. Navigate to **Settings > Integrations > MCP Servers**.
  </Step>

  <Step title="Add Ollang MCP server">
    Click **"Connect MCP Server"** and enter the Ollang server URL:

    ```
    https://mcp.ollang.com/mcp
    ```

    Or add it via the project configuration file:

    ```json lovable.json theme={null}
    {
      "mcp": {
        "servers": {
          "ollang": {
            "url": "https://mcp.ollang.com/mcp",
            "transport": "sse"
          }
        }
      }
    }
    ```
  </Step>

  <Step title="Authenticate">
    Lovable will open an Ollang sign-in page for OAuth authentication. Sign in with your email (OTP), Google, or GitHub account.
  </Step>

  <Step title="Start translating in Lovable chat">
    In the Lovable AI chat, describe your translation needs. Lovable will call Ollang MCP tools to complete the task.
  </Step>
</Steps>

## Use Cases

### Translate your app's UI strings

While building a web app in Lovable, localize it for global audiences:

```
My app currently has all UI strings in English in src/i18n/en.json.
Upload that file to Ollang and create translation orders for French,
Spanish, German, and Arabic. Once done, add the translated files to
the project and wire them up with i18next.
```

### Translate landing page content

```
Take the hero section copy and all marketing text from the landing page
component. Upload it to Ollang for document translation into Portuguese
and Italian. Apply the translated text to new locale versions of the page.
```

### Set up translation guidelines for consistent brand voice

```
Create an Ollang custom instruction called "SaaS App UI" with the
following guidelines: "Use second-person (you/your). Keep button labels
under 3 words. Translate error messages clearly and avoid technical
jargon. Keep brand name 'Lovable' in English."
```

### Track and download completed translations

```
Check all my Ollang translation orders. For any that are complete,
download the translated files and place them in src/i18n/{lang}.json
with the correct locale codes.
```

## Multi-Server Configuration

Combine Ollang with other integrations in Lovable for end-to-end workflows:

```json lovable.json theme={null}
{
  "mcp": {
    "servers": {
      "ollang": {
        "url": "https://mcp.ollang.com/mcp",
        "transport": "sse"
      },
      "supabase": {
        "url": "https://mcp.supabase.com/sse",
        "transport": "sse"
      }
    }
  }
}
```

<Tip>
  Lovable works best with Ollang when you specify the target languages upfront. Example: "translate to French (fr-FR), Spanish (es-ES), and German (de-DE)" — using BCP 47 locale codes ensures Ollang picks the correct language variant.
</Tip>