# VibeSwap: list this app and install its ad slot VibeSwap (https://vibeswap.dev) is a free cross-promotion network for apps built with AI. Members show each other's small "vibe ads" in a slot on their sites. Every view the slot shows earns tokens, and tokens get the member's own app shown on everyone else's sites. Tokens can't be bought. Use these steps when the user asks to add, register, list, promote or update this app on VibeSwap, to install or move the VibeSwap slot/widget, or to check their VibeSwap tokens, views or clicks. ## 0. The API key Every call needs the member's personal key (it starts with `vc_`). 1. Use the `VIBESWAP_API_KEY` environment variable if it is set. 2. Otherwise ask the user to paste it. If they don't have one yet, tell them: "Sign up free at https://vibeswap.dev/signup (Google works), then open https://vibeswap.dev/dashboard#agent and press *Create my API key*. Paste the key here." 3. **Never** write the key into any file (not `.env`, not config, not code) and never commit it. Keep it only in this session. One key works for all of the member's projects. ## 1. Work out the app's details Read the project (README, package.json, landing page, ``, metadata) and decide: | field | rule | |------------|------| | `name` | the app's name, 2-40 characters | | `tagline` | one catchy sentence on what it does, 8-110 characters, in the app's own language | | `url` | the app's public **production** https URL. Look in the README, package.json `homepage`, deploy config (vercel.json, netlify.toml, CNAME), or metadataBase. If you can't find it, ask. Never use localhost or a preview URL. | | `emoji` | one emoji that fits the app | | `color` | one of: violet, ocean, lime, sunset, gold, night | | `category` | one of: AI tool, Productivity, Dev tool, Game, Design, Finance, Health, Education, Social, Other | | `site_url` | optional: the site that will show the slot, if it differs from `url` | Show the user these values in one short message before you send them, and use their edits. ## 2. Register (safe to repeat) ```bash curl -sS -X POST https://vibeswap.dev/api/v1/register \ -H "Authorization: Bearer $VIBESWAP_API_KEY" \ -H "Content-Type: application/json" \ -d '{"name":"...","tagline":"...","url":"https://...","emoji":"...","color":"violet","category":"..."}' ``` Running it again for the same domain updates the same app instead of making a duplicate, so use the same call to change the name, tagline or look later. The JSON answer looks like: ```json { "ok": true, "ad_id": "a_...", "slot_id": "s_...", "install": { "script": "<script async src=\"https://vibeswap.dev/embed.js\"></script>", "placeholder": "<div data-vibe-slot=\"s_...\"></div>", "one_line_html": "<script async src=\"https://vibeswap.dev/embed.js\" data-slot=\"s_...\"></script>" }, "dashboard": "https://vibeswap.dev/dashboard" } ``` Errors come back as `{ "error": "...", "details": [...] }`: fix the fields and retry. A 401 means the key is wrong or was replaced; ask for a new one. The app is listed and starts showing on other members' sites right away, paid from the welcome tokens. ## 3. Install the slot (earns the tokens) The slot is a small card that shows **other** members' apps (never the user's own). It loads async, renders in its own Shadow DOM, and can't clash with the site's CSS. 1. Load `install.script` **once** for the whole site: - Next.js (App Router): in the root `app/layout.tsx`, inside `<body>`: `<Script src="https://vibeswap.dev/embed.js" strategy="afterInteractive" />` with `import Script from "next/script"`. - Next.js (Pages Router): the same `<Script>` in `pages/_app.tsx`. - Vite, CRA, Svelte, Vue, Astro or plain HTML: add the tag to `index.html` (or the base layout) `<head>`. - No-code (Webflow, Framer, WordPress, Wix): give the user `install.one_line_html` to paste in an embed block. 2. Render `install.placeholder` in a visible spot that appears on most pages, usually the footer or a sidebar. Give it at least 300px of width. In React/JSX write it as `<div data-vibe-slot="s_..." style={{ minWidth: 300 }} />`. It works on client-side routes too. 3. Optional attributes on the div: `data-theme="light"` or `"dark"` (default follows the visitor), `data-layout="banner"` for a wide 728px strip (default is a 340px card). 4. Change nothing else in the design. Don't add the slot twice on one page. The slot turns live on the dashboard after its first real view on the deployed site, and the member gets a go-live bonus. It doesn't count views on localhost, so remind the user to deploy. ## 4. Check stats ```bash curl -sS https://vibeswap.dev/api/v1/me -H "Authorization: Bearer $VIBESWAP_API_KEY" ``` Answers with `tokens`, `views_sent` (views the user's slots gave other apps), `views_received` (views the user's apps got), and lists of `ads` and `slots` with their views, clicks and whether each slot is `live`. Summarize it in plain words. ## 5. Finish Tell the user: the app name as listed, the `slot_id`, the file(s) you changed and where the slot appears, and the dashboard link https://vibeswap.dev/dashboard. Don't print the API key back. ## How tokens work Sign up +100 · first slot goes live +50 · a visitor sees an ad on your site +1, clicks it +3 · someone sees your ad −1, clicks it −3. A view counts when the ad is half on screen for one second, once per visitor per slot every 30 minutes. Out of tokens: the ad pauses, the slot keeps earning.