Masko in Lovable

Lovable can create a mascot for your app through Masko's MCP server. The connection creates the mascot and its animations, and the finished files end up in your project. Your published app plays those files. The connection works while you build, and your published app never calls Masko.

Connect Masko#

Lovable connects to Masko with an API key.

1. On masko.ai, open Developers → API keys, choose Create API key, name it Lovable and keep Read + Write. Copy the key: it is shown once.
2. In Lovable, open Connectors, click + at the top right, then MCP server.
3. Name it Masko and enter the server URL https://masko.ai/api/mcp.
4. For authentication, choose Bearer token or API key and paste your Masko key. Click Add server.

The key belongs to the workspace you were in when you created it, personal or team, and generation spends that workspace's credits. Only a team owner or admin can create a team key. If MCP server is greyed out in Lovable, an admin of your Lovable workspace has turned off custom MCP servers.

Other apps connect the same way: see MCP server.

Try it#

• "Show my Masko credit balance. Don't generate anything."
• "Add a friendly mascot to my habit tracker. It waits while I'm working and celebrates when I finish a habit."
• "Make the mascot idle, then celebrate, then return to idle."

What Lovable can do#

• Create a mascot, its poses and its animations.
• Check a job until its files are ready.
• Export and publish assets, and get their CDN links.
• Read your credit balance and open a credit checkout link.

Costs#

Generation uses credits from the Masko workspace your key belongs to. Ask for the estimated cost before generating. The estimate tools return it before anything is spent.

Publishing the files#

New mascots made through the MCP server start with public CDN hosting off. To use the files in a public app, publish the mascot's assets and use the CDN links. Private links expire, so a production app that needs private files must fetch fresh links from its backend.

Playback#

Play it with the Masko player (npm install @masko/player). A single loop needs only its two hosted files: <MaskoPlayer clip={{ webm, hevc }} /> (one animation). A mascot that changes clips is a canvas release, which your app drives with set and fire. For a published mascot, ask Lovable to export the release once with public links (GET /v1/canvases/CANVAS_ID/export?delivery=1&target=web) and ship that delivery with your app. Private files need a backend of your own that fetches fresh links.

Limits#

• The connection works while you build. Visitors to your published app cannot reach Masko through it.
• Generation spends credits from the key's workspace.
• The connection allows 120 requests per minute per key.

Security#

• Lovable keeps the key you paste and sends it with each request to Masko. Create a key just for Lovable, so you can revoke it on its own.
• The key lives in the Lovable connection, never in your app's code. Your published app only plays files and needs no Masko key.
• To remove access, delete the server in Lovable and revoke its key in Developers → API keys.