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

# Vibe Coding on Mighty

Mighty is helping to usher in a new world in which our best-in-class, secure and extensible platform and native features can seamlessly co-exist with your own custom software, with all member interactions and content blending together seamlessly to help amplify our powerful people magic experience.

## **Getting Started**

Whether you’re a seasoned developer or interested in trying out “vibe coding” (creating your own applications using emerging AI tools), we’re here to help!

Let’s start by defining some basic terms…

**Admin API (Application Programming Interface):** On Mighty, our [<u>Admin API</u>](https://docs.mightynetworks.com/admin-api) lets you (as a Host) connect 3rd-party services to your Mighty Network, then push and pull information. *Example: syncing your community’s member data with Salesforce or another CRM.*

**Headless API:** Our [<u>Headless API</u>](https://docs.mightynetworks.com/headless-api) (currently invite-only) lets you create custom applications that *your members* can connect and interact with as themselves. *Example: embedding a custom “personality quiz” for members to take, then share their results.*

**Embeds (iframes):** The way 3rd-party applications and websites can be [<u>embedded directly</u>](https://docs.mightynetworks.com/for-hosts/content-and-messaging/can-i-use-external-embeds#how-to-embed) into your Mighty Network. When coupled with either API and our “authenticated iframes” feature, custom applications can now seamlessly integrate with your community.

Note: For the most seamless iframe experience across all platforms, you'll need to ensure that you're on the following builds or later:

* iOS: 8.274.80
* Android: 8.274.43

At the very highest level, interested Mighty Hosts on the [Scale plan](https://docs.mightynetworks.com/for-hosts/meet-mighty/whats-included-in-the-mighty-networks-business-plan#whats-included-in-the-mighty-networks-scale-plan) and up can now easily create custom experiences that work seamlessly across all platforms (web, iOS and Android) using Embeds and either of our available APIs.

## **Lovable Library**

There are many services that can help you on your vibe coding journey (including [<u>Replit</u>](http://replit.com/), [<u>Netlify</u>](https://www.netlify.com/) and more), but we’re big fans of [<u>Lovable</u>](https://lovable.dev/), and have created a library of sample starter applications for you to easily “remix” and adjust for your own community.

They’re all pre-configured to work with any Mighty Network, and you’ll simply need to add your community’s API keys and basic information when asked.

Just create a [<u>Lovable</u>](https://lovable.dev/) account, then choose from one of our starter options to remix (make your own editable copy).

<Frame>
  <img src="https://mintcdn.com/mightynetworks/yttUQtD_2_BfVa1C/images/image-(1).png?fit=max&auto=format&n=yttUQtD_2_BfVa1C&q=85&s=80717ee92c2e69f4e3e83df6955f16f8" alt="Image (1)" width="3270" height="1686" data-path="images/image-(1).png" />
</Frame>

**The starter templates (sign in to Lovable first):**

* [Basic OAuth Sample](https://lovable.dev/projects/96c898a0-14ef-45c9-8d18-ee3895fc1afa) (Headless API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-2.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=3d2a92ea592a04ca22088dba8a4d3dbf" alt="Image (1) 2" title="Image (1) 2" style={{ width:"75%" }} width="2864" height="1542" data-path="images/image-(1)-2.png" />
</Frame>

* [Member Map Sample](https://lovable.dev/projects/c28e0059-460d-4a82-b027-8ad64f47b86f) (Admin API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-3.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=1731c6ef32ffadff2b90b5fcd8f86f48" alt="Image (1) 3" title="Image (1) 3" style={{ width:"76%" }} width="2862" height="1546" data-path="images/image-(1)-3.png" />
</Frame>

* [Leaderboard Sample](https://lovable.dev/projects/13873454-ce4a-42c0-bc4d-40989a632e59) (Admin API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-copy-2.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=43ec7e6fc670f45ba11fc858c0c699bf" alt="Image (1) Copy 2" title="Image (1) Copy 2" style={{ width:"77%" }} width="2862" height="1548" data-path="images/image-(1)-copy-2.png" />
</Frame>

* [Mini-Website Sample](https://lovable.dev/projects/8d2af2de-7a59-451b-b44f-063bd7ba500b) (Admin API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-copy-3.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=b6acbe2ff315334462483c46d10d7766" alt="Image (1) Copy 3" title="Image (1) Copy 3" style={{ width:"77%" }} width="2858" height="1548" data-path="images/image-(1)-copy-3.png" />
</Frame>

* [Survey Sample](https://lovable.dev/projects/1664333e-66a0-4430-a51a-c903fffd3dbb) (Headless API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-copy.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=d0a30aaa06a4a19bfc93125e6f0d6f7e" alt="Image (1) Copy" title="Image (1) Copy" style={{ width:"77%" }} width="2864" height="1546" data-path="images/image-(1)-copy.png" />
</Frame>

* [Personality Quiz Sample](https://lovable.dev/projects/6fe83d05-2c60-4616-8a7a-7901c2c7e20e) (Headless API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-5.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=975c4186ed87aaf2382bcd63796c47d9" alt="Image (1) 5" title="Image (1) 5" style={{ width:"78%" }} width="2864" height="1550" data-path="images/image-(1)-5.png" />
</Frame>

* [Habit Tracker Sample](https://lovable.dev/projects/c5713e41-a0de-4a71-b8b7-a183d28f0686) (Headless API)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-4.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=8aa1d4ed0887c7fff01da544df9d169f" alt="Image (1) 4" title="Image (1) 4" style={{ width:"77%" }} width="2864" height="1544" data-path="images/image-(1)-4.png" />
</Frame>

* [Shopify 'Buy Button' Sample](https://lovable.dev/projects/8b40c7dd-a889-4177-99b5-59eac4b8fbaa) (No API Needed)
  * To learn more, [check out this article](https://docs.mightynetworks.com/for-hosts/analytics-and-integrations/shopifybuybutton)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/WSgjCjWMKme4pdg-/images/image-(1)-copy-4.png?fit=max&auto=format&n=WSgjCjWMKme4pdg-&q=85&s=92013ee6c5e677ae1b8aac46ed79e636" alt="Image (1) Copy 4" title="Image (1) Copy 4" style={{ width:"78%" }} width="2868" height="1556" data-path="images/image-(1)-copy-4.png" />
</Frame>

* [RSS Display](https://lovable.dev/projects/d4df6fb8-2c3d-4eeb-b18f-79783b87d403): Add in an RSS feed from your newsletter, YouTube channel, blog, social media and more to show the latest posts updated hourly

<Frame>
  <img src="https://mintcdn.com/mightynetworks/ol_8Yex4NUHx2OLY/images/image-(1)-copy-5.png?fit=max&auto=format&n=ol_8Yex4NUHx2OLY&q=85&s=e27996329b948dc41a07d5add56148e5" alt="Image (1) Copy 5" title="Image (1) Copy 5" style={{ width:"80%" }} width="2858" height="1544" data-path="images/image-(1)-copy-5.png" />
</Frame>

* [Kit Signup Form](https://lovable.dev/projects/69d8695b-8dfb-4b0c-be63-3c7efc6c8cda): Easily paste in your Kit newsletter signup form in your community (great too for pre-community signup email collection on Kit if needed, if placed in a publicly-accessible Space)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/ol_8Yex4NUHx2OLY/images/image-(1)-copy-6.png?fit=max&auto=format&n=ol_8Yex4NUHx2OLY&q=85&s=b955e43551caa5699b83ace5b5dcf3be" alt="Image (1) Copy 6" title="Image (1) Copy 6" style={{ width:"80%" }} width="2866" height="1546" data-path="images/image-(1)-copy-6.png" />
</Frame>

* [Daily Journal](https://lovable.dev/projects/fa57775e-5642-4cb9-9b21-063dfac00e6c): A simple variant of the recent "Habit Tracker" template focused on freeform text entry. Embed it into Course lessons to let members take daily private notes as they progress.

<Frame>
  <img src="https://mintcdn.com/mightynetworks/RA-EChONrUuSO2I9/images/image-(1)-copy-7.png?fit=max&auto=format&n=RA-EChONrUuSO2I9&q=85&s=95e6f349ad45dcb587394c30f55254f2" alt="Image (1) Copy 7" title="Image (1) Copy 7" style={{ width:"81%" }} width="2860" height="1544" data-path="images/image-(1)-copy-7.png" />
</Frame>

*Note: these Lovable project templates are starter samples provided as-is for you to explore and integrate as desired. In addition to ensuring that you abide by overall service terms set forth by both[ Mighty](https://trust.mightynetworks.com/resources?s=pjz3xynjabbmiqp0xy99p\&name=mighty-networks-terms-of-use) and[ Lovable](https://lovable.dev/terms), you are solely responsible for any application, product, or integration you build, including its security, performance, and compliance with applicable law. Mighty is not responsible for any loss or claim arising out of your creations from this feature, including any security vulnerability or data exposure originating in your creations from this feature.*

## Admin API Features

Admin API apps act as the *host* — no member sign-in, no OAuth app needed.

* In Mighty, go to **Admin > Integrations > Admin API** and click **New API Key**. Give it a name specific to this feature (e.g., Member Map) — use a separate key per Lovable app.
* On the same Admin API page, grab your **Network ID**.
* If the feature needs to target one specific Space, open that Space in a desktop browser and copy the number near the end of the URL — that's the **Space ID**.
* In Lovable, remix the sample and fill in whatever it asks for (typically the API key + Network ID, sometimes Space ID).

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.39.30-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=7a04cc6be9f1ec17345794b9ef4f6302" alt="Screenshot 2026 07 09 At 2 39 30 PM" title="Screenshot 2026 07 09 At 2 39 30 PM" style={{ width:"79%" }} width="940" height="344" data-path="images/Screenshot-2026-07-09-at-2.39.30-PM.png" />
</Frame>

* Publish the app in the upper right corner
* Embed it in Mighty: open a Page, Article, Lesson or [anywhere you can embed](https://docs.mightynetworks.com/for-hosts/content-and-messaging/can-i-use-external-embeds)
  * If you see the checkbox at the bottom: "This embed uses a Mighty OAuth application" you don't need to select it.

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.43.00-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=2270828993374b21eb20a8ac07570061" alt="Screenshot 2026 07 09 At 2 43 00 PM" title="Screenshot 2026 07 09 At 2 43 00 PM" style={{ width:"70%" }} width="1520" height="1200" data-path="images/Screenshot-2026-07-09-at-2.43.00-PM.png" />
</Frame>

Add in:

\<iframe src=“YOURURL” width=“100%” height=“500” title=“My Application” style=“border:none;”>\</iframe>

* Add your Lovable application’s full URL (e.g., [https://survey-trailheads.lovable.app](https://survey-trailheads.lovable.app))
* Once embedded, you can adjust the “title” and height to your liking.
* You can also decide if you’d like the embed to be narrow or wide (when viewed on desktop computers).

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.42.41-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=f424e3ce7356d666bf1198455b4a7457" alt="Screenshot 2026 07 09 At 2 42 41 PM" title="Screenshot 2026 07 09 At 2 42 41 PM" style={{ width:"84%" }} width="1648" height="436" data-path="images/Screenshot-2026-07-09-at-2.42.41-PM.png" />
</Frame>

## Headless API

For any of the Lovable sample projects that use the **Headless API** to allow your members to connect, you’ll first need to create a new OAuth Application in your community’s Admin area.

### Creating OAuth Applications

Go to **Admin > Integrations > OAuth Applications**

Select "New OAuth Application"

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.10.32-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=9ecd1bcf3fd48dc0a535d273c1d1d205" alt="Screenshot 2026 07 09 At 2 10 32 PM" title="Screenshot 2026 07 09 At 2 10 32 PM" style={{ width:"68%" }} width="1516" height="1800" data-path="images/Screenshot-2026-07-09-at-2.10.32-PM.png" />
</Frame>

* **Application Name:** Give the Application a name (e.g., Hiking Tracker)
* **Redirect URI:** Temporarily paste in your Network's URL (you'll change this after you publish your feature)
* **Decide what permissions you want the new feature to have.**
  * If this is for members, we recommend selecting all the "Member Scopes" checkboxes.
* Here's an example of what to select if you were creating a Habit Tracker for your members.

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.14.39-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=0873c1a7d8d883419d1216bb5e7bd7bf" alt="Screenshot 2026 07 09 At 2 14 39 PM" title="Screenshot 2026 07 09 At 2 14 39 PM" style={{ width:"67%" }} width="1410" height="1276" data-path="images/Screenshot-2026-07-09-at-2.14.39-PM.png" />
</Frame>

To read more about OAuth applications, [check out this link](https://docs.mightynetworks.com/oauth-applications).

* After you have created the OAuth Application, head back to Lovable
* It will ask you for these pieces of information:

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.19.54-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=75b854900ed8220304bb3d8ecfd4a5cb" alt="Screenshot 2026 07 09 At 2 19 54 PM" title="Screenshot 2026 07 09 At 2 19 54 PM" style={{ width:"54%" }} width="916" height="890" data-path="images/Screenshot-2026-07-09-at-2.19.54-PM.png" />
</Frame>

* **Client ID:** Copy from the OAuth Application
* **Client Secret:** Copy from the OAuth Application
* **Network ID:** Go to Admin> Integrations > Admin API to find this
* **Session Secret:** Add in your own strong, random, secret value here. You can generate one easily via Lovable Cloud → Secrets → Generate Secret.
* **Subdomain:** You can find this in your Network url (e.g., [https://trailheads2025.mn.co/](https://trailheads2025.mn.co/) would be trailheads2025)
* After remixing one of the templates and filling out the requested information, publish your Lovable application in the upper right corner.
* Once published, you’ll see an (expected) error message about the Redirect URI not being valid. To fix this, ask Lovable to do the following:
  > To fix the Redirect URI error, please give me every possible Lovable preview URL I need to share back with Mighty (including preview URLs within popups) along with the redirect URI for the published application.
* Head back to your Network and edit your OAuth Application.
* In the Redirect URI box, remove your Network url and add all of those provided URIs and save your changes.
  <Frame>
    <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-2.59.24-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=87968f7c6decfe4867703655850ca7e7" alt="Screenshot 2026 07 09 At 2 59 24 PM" width="1406" height="282" data-path="images/Screenshot-2026-07-09-at-2.59.24-PM.png" />
  </Frame>
* Your feature should now work across all platforms, *including* within the Lovable preview area so that you can easily iterate and adjust before republishing any additional changes you’d like to make.
* Note: that to work within the Lovable preview area, you’ll see a brief popup window when connecting, but this popup won’t be present when embedding your application into Mighty, or accessing it at its standalone URL.
* Finally, you will embed it in Mighty: open a Page, Article, Lesson or [anywhere you can embed](https://docs.mightynetworks.com/for-hosts/content-and-messaging/can-i-use-external-embeds)

<Frame>
  <img src="https://mintcdn.com/mightynetworks/GDdLRCadMREBS-7U/images/Screenshot-2026-07-09-at-3.02.18-PM.png?fit=max&auto=format&n=GDdLRCadMREBS-7U&q=85&s=3220f2d604966a6bf273fa82a9e1e237" alt="Screenshot 2026 07 09 At 3 02 18 PM" title="Screenshot 2026 07 09 At 3 02 18 PM" style={{ width:"75%" }} width="1420" height="864" data-path="images/Screenshot-2026-07-09-at-3.02.18-PM.png" />
</Frame>

Paste in:

\<iframe src=“YOURURL” width=“100%” height=“500” title=“My Application” style=“border:none;”>\</iframe>

* Add your Lovable application’s full URL (e.g., [https://survey-trailheads.lovable.app](https://survey-trailheads.lovable.app))
* **Be sure to select the checkbox "This embed uses a Mighty OAuth application"**
* Once embedded, you can adjust the “title” and height to your liking.
* You can also decide if you’d like the embed to be narrow or wide (when viewed on desktop computers).

### **Important Notes and Tips**

* When creating a new OAuth Application, you can decide how much access (and for which roles) to offer, and we always suggest keeping it scoped as narrowly as possible (only ask for what your app will need). Additionally, keep the “Confidential client” option checked and the “Skip consent screen” unchecked (these are the defaults anyway) unless needed for your specific case.
* When customizing your application, always be sure to prompt Lovable to properly store secrets (like API keys/secrets) or sensitive information (it should never appear in the code, and Lovable will help you with this).
* Before publishing and launching, ask Lovable to do a security review on your project.
* We’ll continue adding and updating our sample projects, so please check back often!<br />

**Happy vibe coding!**
