Web Development

Learn how to build webapps powered by RAG using R2R

Web developers can easily integrate R2R into their projects using the R2R JavaScript client. For more extensive reference and examples of how to use the r2r-js library, we encourage you to look at the R2R Application and its source code.

Hello R2R—JavaScript

R2R gives developers configurable vector search and RAG right out of the box, as well as direct method calls instead of the client-server architecture seen throughout the docs:

r2r-js/examples/hello_r2r.js
1const { r2rClient } = require("r2r-js");
2
3const client = new r2rClient("http://localhost:7272");
4
5async function main() {
6  const files = [
7    { path: "examples/data/raskolnikov.txt", name: "raskolnikov.txt" },
8  ];
9
10  const EMAIL = "[email protected]";
11  const PASSWORD = "change_me_immediately";
12  console.log("Logging in...");
13  await client.login(EMAIL, PASSWORD);
14
15  console.log("Ingesting file...");
16  const ingestResult = await client.ingestFiles(files, {
17    metadatas: [{ title: "raskolnikov.txt" }],
18    skip_document_info: false,
19  });
20  console.log("Ingest result:", JSON.stringify(ingestResult, null, 2));
21
22  console.log("Performing RAG...");
23  const ragResponse = await client.rag({
24    query: "What does the file talk about?",
25    rag_generation_config: {
26      model: "openai/gpt-4o",
27      temperature: 0.0,
28      stream: false,
29    },
30  });
31
32  console.log("Search Results:");
33  ragResponse.results.search_results.vector_search_results.forEach(
34    (result, index) => {
35      console.log(`\nResult ${index + 1}:`);
36      console.log(`Text: ${result.metadata.text.substring(0, 100)}...`);
37      console.log(`Score: ${result.score}`);
38    },
39  );
40
41  console.log("\nCompletion:");
42  console.log(ragResponse.results.completion.choices[0].message.content);
43}
44
45main();

r2r-js Client

Installing

To get started, install the R2R JavaScript client with npm:

$npm install r2r-js

Creating the Client

First, we create the R2R client and specify the base URL where the R2R server is running:

1const { r2rClient } = require("r2r-js");
2
3// http://localhost:7272 or the address that you are running the R2R server
4const client = new r2rClient("http://localhost:7272");

Log into the server

Sign into the server to authenticate the session. We’ll use the default superuser credentials:

1const EMAIL = "[email protected]";
2const PASSWORD = "change_me_immediately";
3console.log("Logging in...");
4await client.login(EMAIL, PASSWORD);

Ingesting Files

Specify the files that we’ll ingest:

1const files = [
2    { path: "examples/data/raskolnikov.txt", name: "raskolnikov.txt" },
3];
4console.log("Ingesting file...");
5    const ingestResult = await client.ingestFiles(files, {
6        metadatas: [{ title: "raskolnikov.txt" }],
7        skip_document_info: false,
8    });
9console.log("Ingest result:", JSON.stringify(ingestResult, null, 2));
10...
11/* Ingest result: {
12  "results": {
13    "processed_documents": [
14      "Document 'raskolnikov.txt' processed successfully."
15    ],
16    "failed_documents": [],
17    "skipped_documents": []
18  }
19} */

This command processes the ingested, splits them into chunks, embeds the chunks, and stores them into your specified Postgres database. Relational data is also stored to allow for downstream document management, which you can read about in the quickstart.

Performing RAG

We’ll make a RAG request,

1console.log("Performing RAG...");
2  const ragResponse = await client.rag({
3    query: "What does the file talk about?",
4    rag_generation_config: {
5      model: "openai/gpt-4o",
6      temperature: 0.0,
7      stream: false,
8    },
9  });
10
11console.log("Search Results:");
12  ragResponse.results.search_results.vector_search_results.forEach(
13    (result, index) => {
14      console.log(`\nResult ${index + 1}:`);
15      console.log(`Text: ${result.metadata.text.substring(0, 100)}...`);
16      console.log(`Score: ${result.score}`);
17    },
18  );
19
20  console.log("\nCompletion:");
21  console.log(ragResponse.results.completion.choices[0].message.content);
22...
23/* Performing RAG...
24Search Results:
25
26Result 1:
27Text: praeterire culinam eius, cuius ianua semper aperta erat, cogebatur. Et quoties praeteribat,
28iuvenis ...
29Score: 0.08281802143835804
30
31Result 2:
32Text: In vespera praecipue calida ineunte Iulio iuvenis e cenaculo in quo hospitabatur in
33S. loco exiit et...
34Score: 0.052743945852283036
35
36Completion:
37The file discusses the experiences and emotions of a young man who is staying in a small room in a tall house.
38He is burdened by debt and feels anxious and ashamed whenever he passes by the kitchen of his landlady, whose
39door is always open [1]. On a particularly warm evening in early July, he leaves his room and walks slowly towards
40a bridge, trying to avoid encountering his landlady on the stairs. His room, which is more like a closet than a
41proper room, is located under the roof of the five-story house, while the landlady lives on the floor below and
42provides him with meals and services [2].
43*/

Connecting to a Web App

R2R can be easily integrated into web applications. We’ll create a simple Next.js app that uses R2R for query answering. We’ve created a template repository with this code.

Alternatively, you can add the code below to your own Next.js project.

R2R Dashboard Overview

Setting up an API Route

First, we’ll create an API route to handle R2R queries. Create a file named r2r-query.ts in the pages/api directory:

This API route creates an R2R client, logs in, and processes the incoming query using the RAG method.

Frontend: React Component

Next, create a React component to interact with the API. Here’s an example index.tsx file:

This component creates a simple interface with an input field for the query and a button to submit it. When the button is clicked, it sends a request to the API route we created earlier and displays the result.

Template Repository

For a complete working example, you can check out our template repository. This repository contains a simple Next.js app with R2R integration, providing a starting point for your own R2R-powered web applications.

For more advanced examples, check out the source code for the R2R Dashboard.

R2R Web App Template Repository

To use this template:

  1. Clone the repository
  2. Install dependencies with pnpm install
  3. Make sure your R2R server is running
  4. Start the development server with pnpm dev

This template provides a foundation for building more complex applications with R2R, demonstrating how to integrate R2R’s powerful RAG capabilities into a web interface.