docs: INTEGRATIONS.md — Lovable, Bolt, Framer, Vercel, plain Vite#48
docs: INTEGRATIONS.md — Lovable, Bolt, Framer, Vercel, plain Vite#48alokit-bot wants to merge 2 commits into
Conversation
Polished, post-ready article targeting Lovable/Bolt/Framer/Replit developers. Covers: CORS problem, BYOK model, 3-step integration walkthrough, streaming, provider support, self-hosting, and full feature inventory. ~1500 words, code examples throughout, dev.to frontmatter included. Next step: post to dev.to (needs API key or manual post by Avi). GROWTH_PLAN.md Day 7 → ✅ Done 2026-06-17.
…e snippets Growth Plan Day 8. Platform-specific copy-paste guides for the four most common AI app builders: - Lovable: TypeScript relay module + ApiKeySettings component + chat wiring - Bolt.new: one-prompt approach + manual setup + env var note - Framer: full self-contained Code Component (no imports needed) - Vercel/Next.js: App Router + Pages Router + SQLite/Turso warning - Plain React/Vite: @byok-relay/client npm package usage - Shared utilities: vanilla JS relay.js + browser smoke test All examples use the managed relay (https://relay.byokrelay.com) as default.
📝 WalkthroughWalkthroughAdds two new Markdown documents: Changesbyok-relay Integration Docs
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
submissions/devto-article.md (1)
299-299: 💤 Low valueOptional: Vary sentence structure for better flow.
The three consecutive sentences starting with "No" create intentional rhetorical emphasis, but could be improved for readability:
Current: "No new server. No Dockerfile. No $50/month infrastructure bill for a hobby project."
Consider: "No new server, no Dockerfile, no $50/month infrastructure bill for a hobby project." or rewording one clause.
This is a minor stylistic note; the current version works fine for a technical blog post.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@submissions/devto-article.md` at line 299, The three consecutive sentences starting with "No" create repetitive sentence structure that affects readability. Improve the flow by either combining the three "No" clauses into a single sentence separated by commas, or by rewording one of the clauses to introduce variation while preserving the rhetorical emphasis. For example, restructure the passage from "No new server. No Dockerfile. No $50/month infrastructure bill for a hobby project." into a more varied format with better grammatical flow.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@INTEGRATIONS.md`:
- Around line 327-346: The buffer handling in the streaming response loop is
incorrect. The issue is that buf.split("\n") on line 334 processes all fragments
including the incomplete last one, and then line 343 attempts to preserve only
the last fragment, but it gets discarded. Fix this by splitting buf into lines
first, keeping the incomplete last fragment separate, and only iterating over
the complete lines (all elements except the last). Store the incomplete last
element back to buf for the next iteration, following the pattern used in the
relay.js utilities where you split the buffer, process complete lines, and use
pop() to preserve only the incomplete final fragment for the next read cycle.
- Line 224: The code fence on line 224 of INTEGRATIONS.md is missing a language
identifier after the opening triple backticks. Add "text" as the language
identifier immediately after the opening code fence markers (change ``` to
```text) to enable proper syntax highlighting and improve the readability of the
documentation for users copying the code block.
- Line 260: The code fence in the INTEGRATIONS.md file that contains the
VITE_RELAY_URL environment variable example is missing a language identifier for
syntax highlighting. Add `bash` immediately after the opening triple backticks
(``` ) to specify that this is a bash code block, changing it from ``` to
```bash. This will enable proper syntax highlighting for the code block content.
- Line 56: The submissions/devto-article.md file contains inconsistent
authentication headers and API endpoint paths compared to INTEGRATIONS.md. The
relay backend requires the 'x-relay-token' header (enforced in src/index.js),
but devto-article.md uses 'Authorization' with Bearer token format which will
cause authentication failures. Additionally, the endpoint paths in
devto-article.md are missing the '/v1/' path segment that the backend routes
require. To fix this: in all code examples in submissions/devto-article.md,
replace every instance of 'Authorization': `Bearer ${token}` with
'x-relay-token': token in the headers object, and update all API endpoint paths
from /relay/openai/chat/completions to /relay/openai/v1/chat/completions to
match the correct backend routes and align with INTEGRATIONS.md documentation.
In `@submissions/devto-article.md`:
- Line 98: The API endpoint paths in the article are inconsistent and do not
match INTEGRATIONS.md. Lines 98 and 126 use the endpoint
`/relay/openai/chat/completions` without the `/v1/` version segment, while other
provider paths in lines 169, 172, 175, 178 include `/v1/` (like
`/relay/anthropic/v1/messages`), and INTEGRATIONS.md uses
`/relay/openai/v1/chat/completions`. Update the fetch calls at lines 98 and 126
to include `/v1/` in the OpenAI endpoint path (changing from
`/relay/openai/chat/completions` to `/relay/openai/v1/chat/completions`), then
verify all endpoint paths throughout the article are consistent with the format
used in INTEGRATIONS.md before publication.
---
Nitpick comments:
In `@submissions/devto-article.md`:
- Line 299: The three consecutive sentences starting with "No" create repetitive
sentence structure that affects readability. Improve the flow by either
combining the three "No" clauses into a single sentence separated by commas, or
by rewording one of the clauses to introduce variation while preserving the
rhetorical emphasis. For example, restructure the passage from "No new server.
No Dockerfile. No $50/month infrastructure bill for a hobby project." into a
more varied format with better grammatical flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 316a0468-85e7-4cd7-a97c-10084b34b420
📒 Files selected for processing (2)
INTEGRATIONS.mdsubmissions/devto-article.md
| const token = await ensureToken(); | ||
| const res = await fetch(`${RELAY_URL}/keys/${provider}`, { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json', 'x-relay-token': token }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check relay backend source for auth header and path expectations
# Look for the actual endpoint definitions in the relay codebase
# If you have relay source: grep for expected header name
grep -r "x-relay-token\|Authorization.*Bearer" /path/to/byok-relay/src --include="*.ts" --include="*.js" -n
# Also check for v1 path patterns
grep -r "/relay/.*/v1/" /path/to/byok-relay/src --include="*.ts" --include="*.js" -nRepository: avikalpg/byok-relay
Length of output: 177
🏁 Script executed:
#!/bin/bash
# Test which auth header the relay actually accepts
RELAY="https://relay.byokrelay.com"
# Get a token first
TOKEN=$(curl -s -X POST "$RELAY/users" \
-H "Content-Type: application/json" \
-d '{"app_id":"test"}' | jq -r '.token')
# Test format 1: x-relay-token header
echo "Testing x-relay-token header format..."
curl -s "$RELAY/keys" -H "x-relay-token: $TOKEN" | head -c 100
# Test format 2: Authorization Bearer header
echo -e "\n\nTesting Authorization Bearer header format..."
curl -s "$RELAY/keys" -H "Authorization: Bearer $TOKEN" | head -c 100Repository: avikalpg/byok-relay
Length of output: 207
🏁 Script executed:
find . -name "INTEGRATIONS.md" -o -name "devto-article.md" | head -20Repository: avikalpg/byok-relay
Length of output: 112
🏁 Script executed:
# Check if files exist and their sizes
wc -l INTEGRATIONS.md submissions/devto-article.md 2>/dev/null || echo "Files not found in expected locations"Repository: avikalpg/byok-relay
Length of output: 132
🏁 Script executed:
# Search for the authentication header patterns in the repository
rg "x-relay-token|Authorization.*Bearer" -n --max-count=20Repository: avikalpg/byok-relay
Length of output: 3628
🏁 Script executed:
# Check for API endpoint path patterns
rg "/relay/openai.*chat/completions|/relay/.*v1/" -nRepository: avikalpg/byok-relay
Length of output: 1749
Critical: Authentication header format and API endpoint paths are inconsistent across documentation files.
INTEGRATIONS.md uses 'x-relay-token': token (lines 56, 68, 89, 306, 320, 622, 682), while submissions/devto-article.md uses 'Authorization': \Bearer ${token}`(lines 81, 102, 130, 280, 290). The relay backend explicitly requires thex-relay-tokenheader (enforced in src/index.js line 113-114); requests with theAuthorization: Bearerformat will fail with"error": "x-relay-token header required"`.
Additionally, API endpoint paths differ:
- INTEGRATIONS.md:
/relay/openai/v1/chat/completions(with/v1/) - devto-article.md:
/relay/openai/chat/completions(without/v1/, lines 98, 126, 286)
The backend routes require the /v1/ path segment. Developers copying code from devto-article.md will encounter 401 and 404 errors at runtime.
Update submissions/devto-article.md to match INTEGRATIONS.md: replace all 'Authorization': \Bearer ${token}`headers with'x-relay-token': token, and correct the endpoint paths to include /v1/`.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@INTEGRATIONS.md` at line 56, The submissions/devto-article.md file contains
inconsistent authentication headers and API endpoint paths compared to
INTEGRATIONS.md. The relay backend requires the 'x-relay-token' header (enforced
in src/index.js), but devto-article.md uses 'Authorization' with Bearer token
format which will cause authentication failures. Additionally, the endpoint
paths in devto-article.md are missing the '/v1/' path segment that the backend
routes require. To fix this: in all code examples in
submissions/devto-article.md, replace every instance of 'Authorization': `Bearer
${token}` with 'x-relay-token': token in the headers object, and update all API
endpoint paths from /relay/openai/chat/completions to
/relay/openai/v1/chat/completions to match the correct backend routes and align
with INTEGRATIONS.md documentation.
|
|
||
| Paste this into Bolt's prompt: | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Missing language identifier in code fence.
Line 224 starts a code block without specifying the language. For copy-paste documentation, this reduces syntax highlighting and makes the guide less usable.
🔧 Proposed fix
### One-prompt approach
Paste this into Bolt's prompt:
-```
+```text
Read https://byokrelay.com/skill and integrate byok-relay into this project.🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 224-224: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@INTEGRATIONS.md` at line 224, The code fence on line 224 of INTEGRATIONS.md
is missing a language identifier after the opening triple backticks. Add "text"
as the language identifier immediately after the opening code fence markers
(change ``` to ```text) to enable proper syntax highlighting and improve the
readability of the documentation for users copying the code block.
|
|
||
| If you self-host the relay, set in Bolt's environment panel: | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Missing language identifier in code fence.
Line 260 starts a code block without specifying the language. This should be marked as bash for proper syntax highlighting.
🔧 Proposed fix
### Environment variable (optional)
If you self-host the relay, set in Bolt's environment panel:
-```
+```bash
VITE_RELAY_URL=https://your-relay.example.com📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ``` | |
| ### Environment variable (optional) | |
| If you self-host the relay, set in Bolt's environment panel: | |
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 260-260: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@INTEGRATIONS.md` at line 260, The code fence in the INTEGRATIONS.md file that
contains the VITE_RELAY_URL environment variable example is missing a language
identifier for syntax highlighting. Add `bash` immediately after the opening
triple backticks (``` ) to specify that this is a bash code block, changing it
from ``` to ```bash. This will enable proper syntax highlighting for the code
block content.
| const reader = res.body.getReader() | ||
| const dec = new TextDecoder() | ||
| let buf = "" | ||
| while (true) { | ||
| const { done, value } = await reader.read() | ||
| if (done) break | ||
| buf += dec.decode(value, { stream: true }) | ||
| for (const line of buf.split("\n")) { | ||
| if (!line.startsWith("data: ")) continue | ||
| const d = line.slice(6).trim() | ||
| if (d === "[DONE]") continue | ||
| try { | ||
| const chunk = JSON.parse(d).choices?.[0]?.delta?.content ?? "" | ||
| if (chunk) setOutput((p) => p + chunk) | ||
| } catch {} | ||
| } | ||
| buf = buf.split("\n").pop() | ||
| } | ||
| setLoading(false) | ||
| } |
There was a problem hiding this comment.
Critical: Streaming buffer handling is incorrect in Framer component.
Line 343 (buf = buf.split("\n").pop()) is malformed. After splitting on newlines, you're assigning only the last fragment back to buf, losing any incomplete data. The correct pattern is to split, process complete lines, and keep the incomplete last fragment. Additionally, line 334 re-splits buf, potentially processing the same incomplete line twice.
Compare to the shared utilities pattern (line 642 in the relay.js section):
const lines = buffer.split('\n');
buffer = lines.pop()!; // Keep the incomplete last fragment for next iteration🐛 Proposed fix for Framer buffer handling
const reader = res.body.getReader()
const dec = new TextDecoder()
let buf = ""
while (true) {
const { done, value } = await reader.read()
if (done) break
buf += dec.decode(value, { stream: true })
- for (const line of buf.split("\n")) {
- if (!line.startsWith("data: ")) continue
- const d = line.slice(6).trim()
- if (d === "[DONE]") continue
- try {
- const chunk = JSON.parse(d).choices?.[0]?.delta?.content ?? ""
- if (chunk) setOutput((p) => p + chunk)
- } catch {}
- }
- buf = buf.split("\n").pop()
+ const lines = buf.split("\n")
+ buf = lines.pop() || ""
+ for (const line of lines) {
+ if (!line.startsWith("data: ")) continue
+ const d = line.slice(6).trim()
+ if (d === "[DONE]") continue
+ try {
+ const chunk = JSON.parse(d).choices?.[0]?.delta?.content ?? ""
+ if (chunk) setOutput((p) => p + chunk)
+ } catch {}
+ }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@INTEGRATIONS.md` around lines 327 - 346, The buffer handling in the streaming
response loop is incorrect. The issue is that buf.split("\n") on line 334
processes all fragments including the incomplete last one, and then line 343
attempts to preserve only the last fragment, but it gets discarded. Fix this by
splitting buf into lines first, keeping the incomplete last fragment separate,
and only iterating over the complete lines (all elements except the last). Store
the incomplete last element back to buf for the next iteration, following the
pattern used in the relay.js utilities where you split the buffer, process
complete lines, and use pop() to preserve only the incomplete final fragment for
the next read cycle.
|
|
||
| ```javascript | ||
| async function chat(relayToken, messages) { | ||
| const res = await fetch(`${RELAY_URL}/relay/openai/chat/completions`, { |
There was a problem hiding this comment.
API endpoint paths are inconsistent within this article and conflict with INTEGRATIONS.md.
Lines 98 and 126 use /relay/openai/chat/completions (without /v1/), but:
- Lines 169, 172, 175, 178 (provider support section) use
/relay/anthropic/v1/messagesand other/v1/paths - INTEGRATIONS.md consistently uses
/relay/openai/v1/chat/completions(with/v1/)
This internal inconsistency and cross-document conflict means developers won't know which path format is correct.
This is part of the larger authentication header + API path inconsistency issue flagged in INTEGRATIONS.md review above. Both documents must be reconciled before publication.
Also applies to: 126-126
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@submissions/devto-article.md` at line 98, The API endpoint paths in the
article are inconsistent and do not match INTEGRATIONS.md. Lines 98 and 126 use
the endpoint `/relay/openai/chat/completions` without the `/v1/` version
segment, while other provider paths in lines 169, 172, 175, 178 include `/v1/`
(like `/relay/anthropic/v1/messages`), and INTEGRATIONS.md uses
`/relay/openai/v1/chat/completions`. Update the fetch calls at lines 98 and 126
to include `/v1/` in the OpenAI endpoint path (changing from
`/relay/openai/chat/completions` to `/relay/openai/v1/chat/completions`), then
verify all endpoint paths throughout the article are consistent with the format
used in INTEGRATIONS.md before publication.
1 participant
Growth Plan — Day 8
Adds
INTEGRATIONS.md: platform-specific copy-paste integration guides targeting the four biggest AI app builder audiences.What is in this PR
relay.tsmodule +ApiKeySettings.tsxcomponent + chat wiring snippet@byok-relay/clientnpm package usagerelay.js(env-var-aware, works in React/Vue/Svelte/plain HTML) + browser smoke testAll examples default to the managed relay (
https://relay.byokrelay.com).Why this matters
Discoverability metrics show clones are healthy (113 over 14d) but views are low (16). Lovable/Bolt/Framer are the highest-traffic search surfaces for "how do I add AI to my frontend app" — having a dedicated
INTEGRATIONS.mdgives coding agents a single doc to land on and quote.Metrics snapshot
stars=51 forks=0 views=16 clones=113Summary by CodeRabbit