Build / Lovable content feed app

How to build a content feed app with Lovable.

Build the app in Lovable with Synorb MCP connected so the agent can discover Streams and inspect real cited Manifests. Ship it with a Supabase Edge Function or backend route that calls Synorb REST using server-side secrets. The browser should receive only feed rows, citations, pagination, and quota state.

Start with the two Synorb surfaces.

1

Synorb credentials

Get an MCP token plus a REST api-key and secret from /keys. The MCP token belongs in Lovable's connector. The REST pair belongs only in backend secrets.

2

Lovable backend path

Use Lovable with Supabase Edge Functions or another server route. A published frontend cannot keep Synorb credentials secret, even if variables are hidden in the editor.

3

A feed scope

Pick a topic, source group, domain, or list of tags. Lovable can use synorb-stream-search and synorb-manifests to discover the right scope before it writes code.

Use MCP to shape it. Use REST to ship it.

The same app can use both paths, but for different jobs. MCP helps Lovable reason during development; REST gives your deployed app a stable server-owned contract.

During development
Lovable + Synorb MCP
Use forFinding Streams, checking available data, sampling cited Manifests
CredentialMCP token in the Lovable connector
In the shipped app
Backend route + Synorb REST
Use forServing the feed, pagination, refresh, and quota display
CredentialSYNORB_API_KEY + SYNORB_SECRET as server secrets
Docs/docs

Credential safetyDo not put Synorb credentials in VITE_ variables, browser code, or a public repo. The browser calls your backend. Your backend calls Synorb.

Render feed rows, not raw source payloads.

For a content feed, most apps call POST https://api.synorb.com/streams/query from the backend and render the returned rows. Exact fields vary by story type, but the app should expect this shape:

{ "data": { "briefs": [ { "id": "manifest_or_story_id", "headline": "Short cited item", "summary": "What happened and why it matters.", "published_date": "2026-06-17", "source_url": "https://source.example/story" } ], "pagination": { "has_more": true, "next_page": 1 } }, "usage": { "monthly_limit": 1000, "remaining": 984 } }

Paste this into Lovable.

Use this after you have added the Synorb MCP connector. It tells Lovable to use MCP for discovery and REST for the deployed feed.

Lovable content feed app prompt

Scaffolds the UI, Supabase Edge Function, Synorb REST call, citations, pagination, loading states, and credential handling.

Questions builders ask.

Can Lovable use Synorb directly in the browser?

No. Use Synorb MCP in Lovable while designing. The shipped app should call Synorb from a backend route or Supabase Edge Function so credentials stay server-side.

Which Synorb setup page should I use first?

Use the canonical Lovable setup guide for connector and Supabase Edge Function details.

What does the feed receive from Synorb?

The REST API returns data and usage. Feed rows usually come from data.briefs[] or data.signals[] and include a headline, summary, date, stable IDs, and source_url for citation.

When should the app still use web search?

Use web search for gaps outside Synorb's tracked sources or very narrow facts. Use Synorb first when you need source-grounded, repeatable feed items with citations.

Using a different agent?

The same Synorb MCP connects to major MCP-capable coding agents. The deployed app should still use REST from a backend.

Free credentials. No card.

Generate credentials, connect Lovable, and ship a feed that cites its sources.