URL Previews

Overview

When you add an activity or comment that contains a URL in the text, Stream can automatically fetch Open Graph (OG) metadata and attach a preview. This works for both activities and comments. You can disable enrichment per request with skip_enrich_url.

You can also use Stream's getOG endpoint to fetch OG data on your own.

Sync vs async enrichment

async_url_enrich_enabled is an app-level setting that controls how URL enrichment is done:

  • When enabled (async): The server saves the activity or comment first and enriches URLs in the background. The API responds without waiting for OG scraping.
  • When disabled (sync): The server does URL enrichment before responding, with a ~4 second timeout for OG scraping.

Configure it via updateApp (server-side only):

Node.js
// Async enrichment: API returns immediately; OG data is attached in the background
await client.updateApp({ async_url_enrich_enabled: true });

// Sync enrichment: API waits for OG scraping (up to ~4s) before responding
await client.updateApp({ async_url_enrich_enabled: false });

Activities with URL enrichment

// A URL in the text is scraped and attached automatically
final activity = await feed.addActivity(
  request: const FeedAddActivityRequest(
    type: 'post',
    text: 'Check out https://getstream.io',
  ),
);

print(activity.getOrThrow().attachments.map((a) => a.ogScrapeUrl));

Comments with URL enrichment

Comments support the same behavior: URLs in the comment text are enriched by default. Use skip_enrich_url: true when adding a comment to skip enrichment.

final comment = await feed.addComment(
  request: const ActivityAddCommentRequest(
    activityId: 'activity_123',
    activityType: 'activity',
    comment: 'Have a look at https://getstream.io',
  ),
);

print(comment.getOrThrow().attachments?.map((a) => a.ogScrapeUrl));

Skipping URL enrichment

To avoid fetching OG metadata for a given activity or comment, set skip_enrich_url to true.

// Leave the URLs in the text alone
await feed.addActivity(
  request: const FeedAddActivityRequest(
    type: 'post',
    text: 'Check out https://getstream.io',
    skipEnrichUrl: true,
  ),
);

await feed.addComment(
  request: const ActivityAddCommentRequest(
    activityId: 'activity_123',
    activityType: 'activity',
    comment: 'Have a look at https://getstream.io',
    skipEnrichUrl: true,
  ),
);

await feed.updateComment(
  commentId: 'comment_123',
  request: const UpdateCommentRequest(
    comment: 'Edited, still https://getstream.io',
    skipEnrichUrl: true,
  ),
);

Reading URL preview attachments

Activities and comments return an attachments array. Enriched URL previews appear as attachments with fields such as:

  • og_scrape_url – URL that was scraped
  • title – OG title
  • title_link – OG url
  • text – OG description
  • image_url or thumb_url – OG image
  • type – e.g. image, video, or audio
  • asset_url - link to the video/audio the link points to or empty

Use these fields to render link previews in your UI. Below: reading attachments from an activity and from a comment.

final activity = client.activity(
  activityId: 'activity_123',
  fid: const FeedId.user('john'),
);
await activity.get();

// A scraped attachment is the one carrying `ogScrapeUrl`
final attachments = activity.state.activity?.attachments ?? const <Attachment>[];
for (final attachment in attachments) {
  if (attachment.ogScrapeUrl == null) continue;
  print(attachment.title);
  print(attachment.text);
  print(attachment.imageUrl);
  print(attachment.ogScrapeUrl);
}

// Comments are enriched the same way
for (final comment in activity.state.comments) {
  for (final attachment in comment.attachments ?? const <Attachment>[]) {
    if (attachment.ogScrapeUrl == null) continue;
    print('${attachment.title} -> ${attachment.imageUrl}');
  }
}

URL enrichment using getOG endpoint

You can fetch Open Graph metadata for a URL without adding an activity or comment by calling the Get OG endpoint. This is useful if you want to show URL enrichment to users before an activity or comment is sent. You can then persist OG data in attachments when sending the activity or comment (make sure to set skip_enrich_url to avoid duplicate previews).

If OG data can't be fetched for the given URL, the API request is rejected with an error.

JavaScript
const url = "https://example.com/article";
const attachments: Attachment[] = [];

try {
  const ogResponse = await client.getOG({ url });
  const { duration: _d, metadata: _m, ...ogData } = ogResponse;
  attachments.push(ogData);
} catch (error) {
  // OG may not be fetched for all URLs
  if (!(error instanceof StreamApiError && error.code === 4)) {
    throw error;
  }
}

// Activity
const activityResponse = await feed.addActivity({
  type: "post",
  text: `Check this out: ${url}`,
  skip_enrich_url: true,
  attachment: attachments,
});
// Comment
const commentResponse = await client.addComment({
  comment: `See also: ${url}`,
  object_id: activityId,
  object_type: "activity",
  skip_enrich_url: true,
  attachments: attachments,
});