> ## Documentation Index
> Fetch the complete documentation index at: https://developer.qaip.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Lovableを組み合わせてRAGアプリケーションを短時間で構築

> QAIPとLovableを組み合わせ、取り込み済みデータに対する自然言語検索とAI回答を備えたWebアプリケーションを短時間で構築できます。

## 特徴

### すぐに使えるAPI

QAIPにデータを取り込むと、自動的にベクトル化・インデックス化が行われ、すぐにAPIから検索やAI回答生成が利用できるようになります。

### AI支援開発ツールとの組み合わせ

このAPIと[Lovable](https://lovable.dev/)、[v0](https://v0.dev/)、[Bolt](https://bolt.new/)などのAI支援フロントエンド開発ツールを組み合わせることで、RAGアプリケーションを短時間で構築できます。

このページでは、Lovableを使った実装例を紹介します。

## 開発手順

<Steps>
  <Step title="QAIPにデータを取り込む">
    各種データソースからデータを取り込みます。<br />
    詳しい手順は[こちら](/docs/datasources/index)をご参照ください。
  </Step>

  <Step title="タグを設定する（オプション）">
    データにタグを付与することで、タグを限定した検索が可能になります。<br />
    詳しい手順は[こちら](/docs/features/tag)をご参照ください。
  </Step>

  <Step title="APIキーを発行する">
    [APIキーの作成方法](/docs/features/apikey)を参照して、APIキーを発行します。
  </Step>

  <Step title="Lovableプロジェクトを作成">
    [Lovable](https://lovable.dev/)にアクセスして新規プロジェクトを作成します。
  </Step>

  <Step title="アプリケーションを作成">
    Lovableで、QAIPのAPIエンドポイント（/completions、/searchなど）を使用したアプリケーションを作成します。
    APIの詳細は[こちら](/docs/sdks/index)をご参照ください。

    **実装時の注意点:**

    * APIキーは `QAIP_API_KEY` などの名前で[Secrets](https://docs.lovable.dev/features/cloud#secrets)に登録して使用してください。
  </Step>
</Steps>

## 作成例

QAIPの `/completions` APIを使って作成した社内ナレッジ検索アプリです。<br />
自然言語での質問に対するAI回答と引用元表示を、約30分で実装できました。

### Lovableに入力したプロンプト例

最初のプロンプトで基本的なアプリを作成します：

```
根拠付き回答ポータルを作成してください。

QAIPのcompletionsエンドポイントを使って、質問に対する回答と根拠を表示します。

APIの仕様：
- エンドポイント: https://developer.qaip.com/api/v1/completions
- リファレンス: https://developer.qaip.com/docs/api-reference/completions/generate-llm-completion

機能：
- 質問入力フォーム
- completions APIを呼び出すedge function
- 回答と根拠（citations）を表示するUI

実装の注意点：
- まず、Secretsに QAIP_API_KEY という名前でAPIキーを登録してください
- edge functionからこのSecretを取得して、Authorization ヘッダーに設定してください
```

<Note>
  上記のプロンプトを入力すると、以下の手順で設定が進みます：

  1. 「Enable Cloud」のダイアログが表示されます。これはLovableのクラウド機能（Secrets、データベース、edge functionなど）を有効にするためのものです。**Allow**を選択してください。
  2. 次に「QAIP\_API\_KEYを入力してください」というダイアログが表示されます。QAIPのAPIキーを入力すると、自動的にSecretsに安全に保存されます。
</Note>

その後、必要に応じて追加の指示を出します：

```
- タイトルを「社内ナレッジ検索（出典付きAI回答）」に変更してください
- 回答のMarkdown表示に対応してください（太字、リスト、テーブルなど）
- 根拠のURL内のエンコードされた文字列（%E3%81%82など）を自動的にデコードしてください
```

### 完成イメージ

<img src="https://mintcdn.com/qaip/i8i5-w9Pp4owIOCa/images/use-cases/lovable_sample_app.png?fit=max&auto=format&n=i8i5-w9Pp4owIOCa&q=85&s=c6405f1cf963f9195c28d8e4baee314e" alt="社内ナレッジ検索アプリ" width="971" height="852" data-path="images/use-cases/lovable_sample_app.png" />