> ## Documentation Index > Fetch the complete documentation index at: https://docs.vibely.sh/llms.txt > Use this file to discover all available pages before exploring further. # App and chat connectors > Browse the connector catalog, connect a tool once, and use it in your published app or in the chat while the agent builds. The connector catalog has two kinds of connections. **App connectors** ship into your published app, which calls the tool while people use it. **Chat connectors** give the agent context while it builds and never reach your app. This page covers both, from connecting a tool to removing it. App and chat connectors Open the catalog from **Customize → Connectors** in the dashboard sidebar, or from **Manage → Connectors** inside a project. [Where to find connectors](/integrations/connectors/overview#where-to-find-connectors) lists every entry point. ## The catalog | Connector | App connector | Chat connector | Web | Mobile | Sign-in | | :- | :-: | :-: | :-: | :-: | :- | | [Vibely AI](/features/backend/ai) | ✅ | — | ✅ | ✅ | Built in, nothing to authorize | | [Supabase](/integrations/supabase) | ✅ | — | ✅ | ✅ | OAuth with your Supabase account | | [GitHub](/integrations/github) | ✅ | ✅ | ✅ | ✅ | GitHub App, one connection for both | | [Notion](/integrations/notion) | ✅ | ✅ | ✅ | ✅ | OAuth, separate connection per type | | [Linear](/integrations/linear) | ✅ | ✅ | ✅ | ✅ | OAuth, separate connection per type | | [Stripe](/integrations/stripe) | ✅ | — | ✅ | ✅ | **Connect with Stripe**, or your own API keys | | [RevenueCat](/integrations/revenuecat) | ✅ | — | — | ✅ | API keys | | [Figma](/integrations/figma) | — | ✅ | — | — | OAuth to Figma's hosted MCP server | | [Miro](/integrations/miro) | — | ✅ | — | — | OAuth to Miro's hosted MCP server | On iOS and Android, use Stripe only for physical goods and real-world services. Apple and Google require digital goods and subscriptions to go through in-app purchase, so use RevenueCat for those. A Stripe subscription inside a mobile app gets rejected at review. Your own [custom MCP servers](/integrations/connectors/custom-mcp) appear in the same list under the **Custom** category. ## App connectors An app connector makes a tool part of the app you publish. When a visitor submits a form, your app can create a Linear issue. When a customer checks out, it charges a card with Stripe. ### How app connections work An app connection uses **one shared account**. You, or an admin, sign in to the tool once, and every request from every project and every visitor goes through that account. Connections belong to your **workspace**, not to one project. Once Notion is connected, any project in the workspace can use it, and every workspace member with access to those projects builds against the same account. If each user of your app should sign in with their own account and see only their own data, ask for a [per-user connection](/integrations/connectors/auth#per-user-connections) instead. For OAuth connectors such as GitHub, Notion, and Linear, your app never holds the token. The agent writes a Supabase Edge Function that calls the tool through the Vibely connector gateway, and the gateway attaches the credential on the server. ### Connect a tool Open **Customize → Connectors** and select the tool. The detail panel shows what the connector does and lists its existing connections. Click **Add connection**. If the connector offers both types, choose **App connector** ("Your deployed app reads and writes … at runtime") or **Chat connector**. For OAuth tools, a new window opens so you can sign in and approve access. Make sure your browser doesn't block pop-ups. For API-key tools, paste the keys into the form. Vibely stores them encrypted and never shows them to the agent. Ask for the feature in your project's chat, for example: ```text wrap theme={"system"} When someone submits the feedback form, create a Linear issue in the Product team. ``` The agent writes the integration into your app, usually a client wrapper plus a Supabase Edge Function. If the connector needs keys that aren't set yet, it asks for them in a secure dialog. You don't have to connect first. If you ask for a feature that needs a tool that isn't connected, the agent shows a **Connectors that could help** card with a **Connect** button. Click it, authorize, and the build resumes on its own. Choose **None of these** to skip. By default, only workspace owners and admins can connect connectors, and the agent only uses app connector tools when the person prompting has that permission. An owner can grant it to editors under **Manage connectors** in **Settings → Permissions**. See [Admin controls](/integrations/admin-controls). App and chat connectors ## Chat connectors A chat connector lets the agent read one of your tools while it builds, so results match your real work instead of guesses. Chat connectors use MCP (Model Context Protocol). You don't need to know anything about MCP to use them. | Scenario | Example prompt | What the agent does | | :- | :- | :- | | A designer connects **Figma** | *Build this screen from our Figma file.* | Reads real frame geometry, components, and variables, then writes the screen to match. | | A product manager connects **Linear** | *Build the features in the current cycle's tickets.* | Reads issue descriptions and acceptance criteria to build aligned UI. | | A marketer connects **Notion** | *Turn our launch brief into a landing page.* | Uses the document as context for the copy and structure. | | A team connects **Miro** | *Prototype the signup flow from our whiteboard.* | Reads flow diagrams and turns them into screens and navigation. | ### How chat connections work * **Personal to you.** You connect with your own account. Teammates who want the same tool connect their own accounts. * **Build-time only.** The agent uses the connection in your project chats. Your published app and its visitors can't reach it. If your app needs the data at runtime, use an app connector. * **Only what you can already see.** Each connection sees only what your account can open in that tool. Figma also needs a Dev or Full seat for Dev Mode output. * **Switch it off per chat.** In the composer's **+ → Connectors** menu, each chat connector has a switch. Turning it off stops the agent using it without disconnecting, so turning it back on doesn't need another sign-in. ### Connect a chat connector Open **Customize → Connectors** and select Figma, Miro, Notion, or Linear. Click **Add connection**. For Notion and Linear, choose **Chat connector** ("Vibely reads your … content while building"). Sign in to the tool in the window that opens and approve access. For a tool that isn't in the catalog but has an MCP server, see [Custom MCP servers](/integrations/connectors/custom-mcp). ## Approve connector actions The agent can read through a connection freely, but by default it stops and asks before it changes anything. When it wants to create, update, delete, or send something through a connector, it shows an approval in the chat that names the action. You can: * **Allow**: run this one action. * **Always allow**: run this action and similar ones on the same connector from now on without asking. * **Skip**: don't run it. | Action type | Default | Examples | | :- | :- | :- | | Read-only tools | Always allow | List issues, read a page, search | | Write/delete tools | Needs approval | Create an issue, update a row, delete a file | | Interactive tools | Needs approval | Send a message, notify, reply | Linear also asks before reads by default, because tickets can hold private discussion. To change the defaults, open the connector and use **Tool permissions**. Each group has a setting for the whole group, and you can set individual tools to **Always allow**, **Needs approval**, or **Blocked**. The **Agent access** item in the connector's overflow menu sets all of them at once. Only workspace owners and admins can change tool permissions. ## Manage a connection Open **Customize → Connectors** and select the connector. The **Connections** table lists each connection with its name, type, and when it was last updated. * **Reconnect**: shown when a connection needs to be authorized again, for example after the tool revoked access. * **Disconnect**: removes the connection's saved credentials. You'll have to connect again to use it. Apps that call the tool through this connection stop working until you do. * **Bring your own OAuth app**: workspace owners and admins can replace Vibely's shared OAuth app with their own for some connectors. The panel shows the exact redirect URI to register in the provider's developer console. Disconnecting affects every project in the workspace that uses the connection, and every published app that calls it. App and chat connectors ## FAQ Anyone who can use your app. An app connection runs on one shared account, so every project and every visitor works with that account's data. If each user should only see their own data, use a [per-user connection](/integrations/connectors/auth#per-user-connections). No. OAuth tokens stay in the Vibely connector gateway, and keys are stored encrypted as secrets. The agent references them by name and never writes the value into a file. See [Auth and credentials](/integrations/connectors/auth). Check these in order: * **Your role.** By default only owners and admins can connect connectors. An owner can grant **Manage connectors** to editors in **Settings → Permissions**. * **Workspace controls.** An admin may have turned the connector off, or turned off **Remote MCP connectors** for chat connectors. See [Admin controls](/integrations/admin-controls). * **Your browser.** OAuth opens a new window. If nothing happens, allow pop-ups for Vibely and try again. No. A remix copies the project's files only. Your workspace secrets and connected services are never copied, so the person who remixes connects their own. ## Related * [Connectors overview](/integrations/connectors/overview) * [Auth and credentials](/integrations/connectors/auth) * [Custom MCP servers](/integrations/connectors/custom-mcp) * [Admin controls](/integrations/admin-controls) ## Related topics - [Connector authentication and credentials](/integrations/connectors/auth.md) - [Connect your app to Notion](/integrations/notion.md) - [Connect your app to Linear](/integrations/linear.md) - [Manage connectors in your workspace](/integrations/admin-controls.md) - [Connect tools, services, and APIs](/integrations/connectors/overview.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.