• Level: Basic

• Time to complete: 10 minutes

• Prerequisites:

  • An indexed RAG pipeline deployed in deepset Cloud. To display references for your pipeline's answers, it must contain the ReferencePredictor component. You can use a RAG-QA pipeline template or see Tutorial: Building a Robust RAG System for help.
  • Data for your pipeline to query uploaded to the same deepset Cloud workspace as your pipeline. For help, see Upload Files.
  • A deepset Cloud API key. For instructions, see Generate an API Key.
  • Basic knowledge of GitHub repositories.
  • You can use the UI we prepared as is, but to modify it, a basic knowledge of Next.js is helpful.

• Description: This tutorial shows how to connect deepset Cloud to an UI we've prepared. This UI is meant to serve as an example and may not include all necessary security measures and features required for a full production environment. You can use it as a starting point. Here's what it looks like out of the box:

  

• Goal: After completing this tutorial, you will have a locally deployed user interface to query your RAG pipeline. The UI shows answers and references.

Test Your Pipeline

First, let's check if your pipeline is ready and your API key is working. In the following code sample, replace:

• YOUR_WORKSPACE_NAME with the name of the deepset Cloud workspace where you created your pipeline
• YOUR_RAG_PIPELINE_NAME with the name of your RAG pipeline
• YOUR_API_KEY with the deepset Cloud API key
• Your query with a query your pipeline can answer

Use this code to test your pipeline:

curl \
--request POST \
--url https://api.cloud.deepset.ai/api/v1/workspaces/YOUR_WORKSPACE_NAME/pipelines/YOUR_RAG_PIPELINE_NAME/search \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--header 'authorization: Bearer YOUR_API_KEY' \
--data '{ "debug": false, "view_prompts": false, "queries": ["Your query" ] }'| \
less

You should get a paginated response with an answer to the query.

Run Dev Server to Test the UI Locally

1. Clone the GitHub repository.
2. In the command line, navigate to the location where you cloned the repository.
3. In this location, create a file called .env.local with the following contents:

   DEEPSET_CLOUD_WORKSPACE=YOUR_WORKSPACE_NAME
   DEEPSET_CLOUD_PIPELINE=YOUR_RAG_PIPELINE_NAME
   DEEPSET_CLOUD_API_KEY=YOUR_API_KEY
   

4. Install dependencies:
   Shell

   npm install
   

5. Start the development server:
   Shell

   npm run dev
   

6. In your browser, open http://localhost:3000 to see the UI. You should be able to ask questions and get answers. If your pipeline has the ReferencePredictor component, you'll also be able to see references to the answers.
7. When you're done testing, stop the server with Ctrl+C.