Skip to content

Commit 4c5d4c6

Browse files
committed
Step-by-step usage guide + HowTo schema page + one-shot GitHub setup script
Three additions, all aligned with the user's "make it easy to use, add all details for how to use this app step by step" ask: 1. README.md — new "How to use OpenAdKit — step-by-step" section - Inserted between Screenshots and Who's-it-for (highest read-position after the install + screenshots block). - 5 numbered steps with time estimates: Step 1 (30s-5min): Install — Hosted OR Local path Step 2 (2 min): Pick AI provider + paste key (with direct signup links to Groq, Gemini, Claude) Step 3 (3 min): Add first brand from URL — explains what gets extracted (30+ fields) Step 4 (1 min): Generate first ad on Meta — what you get + the schema retry layer + Cmd+Enter shortcut Step 5 (3-5 min): Score + optimize + ship — 5-lever Creative Score + tier verdict + 4 follow-up optimizers - "What to try next" closer pointing at Steal & Beat, Content Calendar, Campaign Kit, Frameworks Trainer. - Top-of-README nav anchor added. 2. app/how-to-use/page.tsx — hosted-app version - Same 5 steps but with hyperlinked internal navigation (sidebar TOC, scroll-mt-16 jump anchors, in-app links to /optimize/creative-score, /research/competitors, /learn/frameworks, etc.) - HowTo JSON-LD schema emitted in SSR <head>. Google Rich Results surfaces step-by-step previews in search for queries like "how to use openadkit" and "openadkit tutorial". totalTime: PT10M, estimatedCost: $0. - Added to sitemap (priority 0.9), robots.txt Allow list, smoke suite (now 49 routes). - Page-level <title> + canonical + OG description tuned for the "openadkit tutorial" / "how to use ai marketing tool" intent. 3. scripts/setup-github.cjs — one-shot repo metadata setter - User asked: "add descriptions and topics all things yourself". The repo description / topics / homepage / features can only be set via authenticated GitHub API (gh CLI), so I built a script that does it all in one command after the user runs `gh auth login` once. - Sets: description (with the picked SEO title), homepage URL, 20 topics (ai-marketing, jasper-alternative, adcreative-alternative, anyword-alternative, byok, open-source, etc.), and feature toggles (issues + discussions on, wiki + projects off). - Idempotent — safe to re-run. - Surfaces the manual social-preview upload step at the end (GitHub doesn't expose social-preview image upload via REST API as of now). - npm run setup:github wraps it. Verified: tsc clean, 77/77 unit tests, next build clean (76 routes + /how-to-use registered as static), 49/49 Playwright smoke pass.
1 parent f2e6bf6 commit 4c5d4c6

7 files changed

Lines changed: 695 additions & 0 deletions

File tree

README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525
[Use it now — two paths](#use-it-now--two-paths) ·
2626
[Screenshots](#screenshots) ·
27+
[How to use it — step-by-step](#how-to-use-openadkit--step-by-step) ·
2728
[Who's it for](#whos-it-for) ·
2829
[What's inside](#whats-inside) ·
2930
[vs Jasper / AdCreative / Anyword / Copy.ai](#openadkit-vs-jasper-adcreative-anyword-copyai--feature-comparison) ·
@@ -117,6 +118,95 @@ You **bring your own AI key** — free-tier (Groq · Gemini · Cerebras · OpenR
117118

118119
---
119120

121+
## How to use OpenAdKit — step-by-step
122+
123+
> Your first 10 minutes from install to your first AI-generated ad. Follow these five sections in order; total time is about 10 minutes.
124+
125+
### Step 1 · Get OpenAdKit running (30 seconds — 5 minutes)
126+
127+
**Pick one of the two install paths:**
128+
129+
- **Path A — Hosted (recommended for non-developers).** Click the **Deploy with Vercel** or **Deploy to Cloudflare** button in the [Install in 60 seconds](#install-in-60-seconds) section above. Sign in to Vercel/Cloudflare with GitHub, confirm, get your own URL in 30 seconds. Open the URL in your browser. **Done.**
130+
- **Path B — Local install.** Download the repo as a ZIP (green "Code" button → "Download ZIP") and extract it. On Windows double-click **`OpenAdKit.bat`**; on Mac/Linux double-click **`OpenAdKit.command`**. First run installs dependencies (one-time, ~2 minutes), drops a desktop shortcut, and opens the app in your default browser. From the second launch onwards it's a single double-click → browser opens to the app.
131+
132+
**You'll know it worked** when the OpenAdKit setup wizard loads in your browser (see screenshot #1 above).
133+
134+
### Step 2 · Pick an AI provider + paste a key (2 minutes)
135+
136+
This is the **only paid thing** in OpenAdKit, and it can be $0 if you pick a free tier.
137+
138+
1. The setup wizard shows all 9 supported AI providers grouped by **Free** (Groq, Gemini, Cerebras, OpenRouter) and **Paid** (Anthropic Claude, OpenAI GPT, DeepSeek, Mistral, Together AI).
139+
2. **Recommended for first-timers:**
140+
- **Groq** (free, fastest) — sign up at [console.groq.com](https://console.groq.com), copy your API key (starts with `gsk_…`), paste in OpenAdKit.
141+
- **Gemini** (free, great quality) — get a key at [aistudio.google.com](https://aistudio.google.com/app/apikey), paste it.
142+
- **Claude** (best quality, paid) — get a key at [console.anthropic.com](https://console.anthropic.com), starts with `sk-ant-…`.
143+
3. Click **Verify** — OpenAdKit makes one tiny test call to confirm the key works.
144+
4. Pick a model from the dropdown (defaults are sensible). Click **Continue**.
145+
146+
> 💡 You can add multiple provider keys and switch between them anytime in [Settings](#) — useful when you hit a free-tier rate limit, just one-click swap to another provider.
147+
148+
### Step 3 · Add your first brand (3 minutes)
149+
150+
This is OpenAdKit's killer feature. **You paste one URL, the AI extracts a complete brand profile in 30 seconds.**
151+
152+
1. The setup wizard's last step asks for a **website URL**. Paste the URL of any brand you want to generate ads for — could be your own brand, a client's, or a competitor's you're studying.
153+
2. Click **Extract**. OpenAdKit:
154+
- Reads the homepage (and 2–3 key subpages like /about, /pricing)
155+
- Pulls Open Graph data, JSON-LD schema, and social links automatically
156+
- Asks the AI to fill 30+ brand fields: business name, industry, niche, USP, tone, audience pain points, audience desires, key benefits, brand voice, words to use, words to avoid, competitors, and more
157+
3. Review the populated **Brand Brain**. Edit anything that looks off. Hit **Save**.
158+
159+
> 💡 **Agencies:** repeat Step 3 for each client. Switch the "active client" from the top-bar dropdown anytime; every generator and optimizer automatically uses the active client's Brand Brain to keep the voice consistent.
160+
161+
### Step 4 · Generate your first ad (1 minute)
162+
163+
1. From the dashboard (cockpit), pick a generator. For your first time, try **Meta · Facebook + Instagram Ads** — it's fast, visual, and gives three angle-distinct variants per click.
164+
2. Fill the form:
165+
- **Objective** — what's the campaign goal (sales, leads, awareness)?
166+
- **Format** — Feed / Reels / Stories / Carousel
167+
- **Product / offer** — what are you advertising? (Pre-filled from your Brand Brain.)
168+
- **Promotion** — any offer like "20% off" or "free trial"
169+
3. Click **Generate**. Watch the AI stream the output in real time.
170+
4. You get **3 variants** anchored to different psychological angles (pain, desire, social proof), each with:
171+
- Primary text (front-loaded for Meta's 125-char mobile preview)
172+
- Headline (≤27 chars mobile / ≤40 desktop)
173+
- Description
174+
- CTA button suggestion
175+
- Character count validation per field (the schema retry layer catches AI mistakes)
176+
- For video formats: hook 0–3s, value 3–15s, CTA 5s with b-roll suggestions and on-screen text
177+
178+
> 💡 Hit ⌘+↵ (Mac) or Ctrl+↵ (Windows) anywhere in the generator to regenerate without touching the mouse.
179+
180+
### Step 5 · Score, optimize, and ship (3–5 minutes)
181+
182+
You've generated copy. Now use the optimizers to make sure it's actually good.
183+
184+
1. Copy one of your variants. Open **Optimize → Creative Score** from the sidebar.
185+
2. Paste the ad copy. Pick the platform you wrote it for. Click **Score**.
186+
3. You get a **brutal 5-lever score** (hook strength, specificity, urgency, brand fit, conversion potential), a **tier verdict** (scale / iterate / rewrite / kill), a **predicted CTR band**, and **3 named fixes** — each fix names the exact phrase to change and the replacement.
187+
4. Apply the fixes. Re-score. Repeat until your tier reads "scale" or "iterate".
188+
5. Optionally run other optimizers before launch:
189+
- **CTR Optimizer** — lever-by-lever rewrites to lift click-through
190+
- **Budget Waste** — audit where ad spend is leaking before it does
191+
- **Audience Targeting** — turn brand brain + budget into a cold/warm/hot tier plan
192+
- **Quality Score** (Google) — surface relevance issues before they tank your QS
193+
6. Export the campaign as **Markdown** or **JSON** for client handoff via the History page.
194+
195+
> 💡 Use **Launch Guide** in the sidebar for step-by-step screenshots walking you through Facebook Ads Manager or Google Ads from campaign creation to publish — useful if you're new to paid media.
196+
197+
---
198+
199+
### What to try next
200+
201+
- **Research → Steal & Beat** — paste competitor ads from the Meta Ads Library / Google Transparency Center, get a teardown plus 3 beat-their-ad variants.
202+
- **Generate → Content Calendar** — one click for a per-day social calendar with captions, hashtags, and visual briefs across multiple platforms.
203+
- **Generate → Campaign Kit** — one brief becomes message-matched copy across Google + Meta + TikTok + LinkedIn + YouTube + X + email in a single generation.
204+
- **Learn → Frameworks Trainer** — interactive lessons in PAS, AIDA, BAB, the 4 U's, and the Schwartz awareness ladder. Free, ad-free, no signup.
205+
206+
A full step-by-step usage guide also lives at **`/how-to-use`** on the hosted app — same content, hyperlinked navigation, easier to skim on mobile.
207+
208+
---
209+
120210
## Who's it for?
121211

122212
| You are… | OpenAdKit gives you… |

0 commit comments

Comments
 (0)