Lovable × Perplexity API｜リアルタイムWeb検索付きAIを組み込む

Perplexity APIはWeb検索とLLMが統合されており、「最新ニュース要約」「価格調査」「事実確認」などに最適です。

最小コード#

const r = await fetch("https://api.perplexity.ai/chat/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.PERPLEXITY_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "sonar",
    messages: [{ role: "user", content: query }],
  }),
});

実例ケーススタディ：競合ニュース監視ボット#

1. Perplexity sonar に『過去24時間の〇〇業界の主要ニュース3件、各150字でcitation付き』を1日3回
2. 結果をLovable Cloudの news_digest に保存
3. Slackコネクタで毎日09:00/13:00/18:00に通知
4. 競合社名や規制キーワードを含む場合は赤色＋メンション通知に分岐

つまずきポイント集#

• 症状：日本語の検索結果が薄い → 対処：search_domain_filter で nikkei.com, itmedia.co.jp 等を限定
• 症状：古いニュースが混ざる → 対処：search_recency_filter='day' を必ず指定
• 症状：JSONが返ってこない → 対処：response_formatでjson_schemaを必ず指定
• 症状：APIキー漏洩 → 対処：server function経由のみ。クライアントから絶対に呼ばない

よくある質問（検索意図別）#

[初心者向け] Q. Perplexity APIで何ができる？

Web検索結果＋出典URL付きでLLM応答を返してくれるAPIです。ニュース要約・競合調査・リアルタイム情報を扱うAIアプリで『回答に必ず根拠URLを付けたい』ケースに最適。

[実装手順] Q. 出典URLをUIに自然に表示するには？

レスポンスのcitations配列を、メッセージ下部にfavicon＋ドメイン名＋リンクの形で箇条書きレンダリング。番号付きでLLM本文中の[1][2]と対応させるとChatGPT/Geminiっぽい信頼感のあるUIになります。