Add a Live Local Events Feed to a Lovable App in 5 Minutes

Most "things to do near me" apps built with AI tools hit the same wall: the app looks great, but the events are made up, or scraped from a site that breaks next week. This guide wires a Lovable app to real, daily-updated event data from FindLocal: concerts, comedy, trivia nights, open mics, author readings and library storytimes in US metros and London. It takes about five minutes.

The same steps work in Bolt, v0, Replit or Cursor. Only the "where do I put the secret" step changes.

1. Get a free API key

Create a FindLocal account and make a key on the dashboard. The free plan has no card. Calls per month are on the pricing page.

Keep the key secret. It goes in a server-side secret, never in browser code.

2. Store the key as a secret

In Lovable, connect Supabase (Lovable's built-in backend) and add a secret named FINDLOCAL_KEY with your key as the value. On other platforms, use the environment-variable or secrets panel for server code.

3. Paste this prompt

Give Lovable this prompt as it is, and change the city if you like:

Add an "Events this week" page.

Create a Supabase Edge Function called `events` that calls
GET https://findlocal.community/api/events?city=austin&when=week&sort=featured
with the header `Authorization: Bearer ${FINDLOCAL_KEY}` (read FINDLOCAL_KEY from
the function's secrets — never expose it to the browser). Accept optional `city`,
`when` and `cat` query params and pass them through. Return the JSON unchanged.
Cache the response for 10 minutes.

On the page, call that function and render `data` as a responsive card grid:
image_url (hide if null), title, event_date + start_time, venue_name, price,
and a button linking to ticket_page_url (fall back to detail_page_url).
Add filter chips for when = today | weekend | week and cat = music | comedy |
trivia | family | literary. Show "Event data by FindLocal" linking to
https://findlocal.community in the page footer.

That's all of it. Lovable writes the function, the page and the filters.

What the API returns

/api/events returns { data: [...], meta: {...} }. Each event is flat JSON:

{
  "id": "…",
  "title": "Tuesday Trivia",
  "event_date": "2026-10-27",
  "start_time": "19:30",
  "category": "trivia",
  "price": "Free",
  "venue_name": "…",
  "venue_lat": 30.26,
  "venue_lng": -97.74,
  "image_url": "https://…",
  "ticket_page_url": "https://…"
}

Dates and times are in the venue's own time zone, so you never have to convert them. The full field list and every filter are in the docs, and you can try queries there without a key.

Useful variations

• Near the user: replace city= with near=<lat>,<lng>&radius_km=10 to sort by distance from the browser's location.
• Only free events: add free=1.
• Search: q=jazz matches titles, venues, performers and descriptions.
• One category: cat=comedy or cat=literary (bookstores and libraries).

Things that commonly go wrong

• The key ends up in the browser. If the AI tool puts the fetch in a React component, ask it to move the call into the Edge Function. Anyone can read a key that ships to the browser.
• Calling on every render. Cache in the function (the prompt asks for 10 minutes). Listings refresh daily, so you don't need anything fresher.
• Credit line. On the Free plan, keep the "Event data by FindLocal" link visible where the events appear (see the API terms). Paid plans don't need it.

No backend at all? Use the widget

If you just want events on a page and don't need your own design, the FindLocal widget is one script tag with no key. It gives you a list, calendar and map with filters, and you can paste it into any site builder that accepts HTML.

Building an agent instead?

The same key works with the FindLocal MCP server, so Claude, Cursor or any MCP client can search events directly.