{"id":18395836,"url":"https://github.com/deepset-ai/rag-ui-nextjs","last_synced_at":"2025-07-25T20:36:44.085Z","repository":{"id":248683271,"uuid":"819463236","full_name":"deepset-ai/rag-ui-nextjs","owner":"deepset-ai","description":"An example of a simple UI for a deepset Cloud RAG pipeline using Next.js","archived":false,"fork":false,"pushed_at":"2024-07-16T13:16:34.000Z","size":121,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T13:12:38.733Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deepset-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-24T14:53:35.000Z","updated_at":"2024-12-30T04:32:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"227c5998-7809-462f-8365-fb5187155ba3","html_url":"https://github.com/deepset-ai/rag-ui-nextjs","commit_stats":null,"previous_names":["deepset-ai/rag-ui-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/deepset-ai/rag-ui-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepset-ai%2Frag-ui-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepset-ai%2Frag-ui-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepset-ai%2Frag-ui-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepset-ai%2Frag-ui-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepset-ai","download_url":"https://codeload.github.com/deepset-ai/rag-ui-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepset-ai%2Frag-ui-nextjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267057829,"owners_count":24028907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T02:12:06.207Z","updated_at":"2025-07-25T20:36:44.058Z","avatar_url":"https://github.com/deepset-ai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## About\n\nThis repo contains a simple UI inspired by the [Playground](https://docs.cloud.deepset.ai/docs/run-a-search) feature of deepset Cloud. We’ve created it to help you interact with RAG pipelines deployed on deepset Cloud. It’s meant for illustrative purposes only and may not include all necessary security measures, optimizations, or features required for a full production environment. Use this code as a boilerplate project to help you get started, and make sure you thoroughly review, test, and enhance it before considering production deployment.\n\nThe code in this repo works with both deepset Cloud 1.0 and 2.0 pipelines.\n\n## What's inside\n\nThis is a [Next.js](https://nextjs.org/) project built using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). Here is a breakdown of its main components:\n\n- ```page.js``` - Main page and UI elements.\n- ```route.js``` - Server-side code that adds a Next.js route for ```/api/search``` and calls deepset Cloud's API.\n- ```ragPipelineResponse.js``` - Classes describing how we map the data.\n- ```ragUtils.js``` - A mini utility function that combines the answer from the JSON response with the references.\n\nHere's the project structure:\n\n```\nsrc\n├── app\n│   ├── api\n│   │   └── search\n│   │       └── route.js\n│   ├── favicon.ico\n│   ├── globals.css\n│   ├── layout.js\n│   └── page.js\n├── lib\n│   └── ragPipelineResponse.js\n└── utils\n    └── ragUtils.js\n```\n\n## Dependencies\n\nThis project uses [MUI](https://mui.com/) and a couple of additional React packages. For the initial installation, run:\n\n```\nnpm install @mui/material @emotion/react @emotion/styled react-markdown\n```\n\n(Check [package.json](https://github.com/deepset-ai/example-rag-ui/blob/main/package.json) for a full list of dependencies.)\n\n\n## Prerequisites\n\nBefore you start, make sure you have:\n\n- Created and deployed a RAG pipeline in deepset Cloud. We recommend using a RAG question answering [pipeline template](https://docs.cloud.deepset.ai/docs/pipeline-templates) from the *Basic QA* collection in deepset Cloud. Make sure the pipeline status is *indexed*.\n- [Uploaded data](https://docs.cloud.deepset.ai/docs/upload-files) for your RAG pipeline to query. The data must be in the same deepset Cloud workspace as the RAG pipeline.\n- Generated an API key to connect to deepset Cloud. You’ll find it in [Connections](https://cloud.deepset.ai/settings/connections). (Keep the key secure!)\n- Run the following code to test if your pipeline is working:\n\n```\n% curl --request POST \\\n--url https://api.cloud.deepset.ai/api/v1/workspaces/YOUR_WORKSPACE_NAME/pipelines/YOUR_RAG_PIPELINE_NAME/search \\\n--header 'accept: application/json' \\\n--header 'content-type: application/json' \\\n--header 'authorization: Bearer YOUR_API_KEY' \\\n--data '{ \"debug\": false, \"view_prompts\": false, \"queries\": [ \"What is GenAI?\" ] }'\n```\n\n## Configuration\n\nDefine the following environment variables in ```.env.local``` or [export](https://www.man7.org/linux/man-pages/man1/export.1p.html) them manually.\n\n``` \nDEEPSET_CLOUD_WORKSPACE=YOUR_WORKSPACE_NAME\nDEEPSET_CLOUD_PIPELINE=YOUR_RAG_PIPELINE_NAME\nDEEPSET_CLOUD_API_KEY=YOUR_API_KEY\n```\n\n## Running the UI locally\n\n1. Clone the repo.\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Start the development server to check the UI locally:\n\n```\nnpm run dev\n```\n\n4. In your browser, open [http://localhost:3000](http://localhost:3000) to access the UI.\n\n![how-to-build-an-ai-product](https://github.com/deepset-ai/example-rag-ui/assets/56412611/1b92c7f2-3a7f-4048-923d-5e240e1e6f82)\n\n5. When you’re done testing, stop the development server with Ctrl-C.\n\n## OpenAPI specification file\n\nYou can download the [OpenAPI](https://spec.openapis.org/oas/latest.html) specification of deepset Cloud's REST API as follows:\n\n```\ncurl --request GET --url 'https://api.cloud.deepset.ai/openapi.json' \\\n--header 'accept: application/json' \\\n--header 'authorization: Bearer YOUR_API_KEY'\n```\n\n## Example JSON response\n\nWhen you use the ```/search``` API endpoint in deepset Cloud, you get a response similar to the one below (we’ve shortened it for clarity).\n\n```\n{\n  \"query_id\": \"1685386a\",\n  \"results\": [\n    {\n      \"query_id\": \"1685386a\",\n      \"query\": \"how to build an ai product?\",\n      \"answers\": [\n        {\n          \"answer\": \"To build an AI product, follow these steps:\\n\\n1. **Identify Your Use Case**:\\n   - Define what you will be using AI for and how it brings measurable value to your business.\\n   - Get business and technical people together to brainstorm and prioritize use cases based on value and effort.\\n\\n2. **Assemble Your Team**:\\n   - Key roles include a product leader, AI engineer, domain expert, and software engineers.\\n   - The product leader manages stakeholders, establishes the product vision, and keeps delivery on track.\\n   - The AI engineer should understand the AI landscape, have prompt engineering skills, and a strong product mindset [..]\",\n          \"type\": \"generative\",\n          \"document_ids\": [\n            \"de71358c1604a3655fdad65ec5d7d536\"\n          ],\n          \"meta\": {\n            \"_references\": [\n              {\n                \"document_id\": \"de71358c1604a3655fdad65ec5d7d536\",\n                \"answer_start_idx\": 0,\n                \"answer_end_idx\": 170,\n                \"doc_start_idx\": 537,\n                \"doc_end_idx\": 922,\n                \"score\": 0.9981470108032227,\n                \"label\": \"grounded\"\n              }\n            ]\n          },\n          \"file\": {\n            \"id\": \"02aac1e3-486b-444d-821e-937ec57082ad\",\n            \"name\": \"5 Steps to a successful Gen AI Pilot.docx.txt\"\n          }\n        }\n      ],\n      \"documents\": [\n        {\n          \"id\": \"de71358c1604a3655fdad65ec5d7d536\",\n          \"content\": \"Hi everyone, glad to be here today. Let me just share my screen and then we can get right into it. Today I'm talking about how to run a successful gen AI pilot and I'm very sure that the topic is top of mind for a lot of people because 2023 was actually an incredible year for AI [..]\",\n          \"content_type\": \"text\",\n          \"meta\": {\n            \"file_name\": \"5 Steps to a successful Gen AI Pilot.docx.txt\",\n          }\n        }\n      ]\n    }\n  ]\n}\n```\n\nThe two main objects you want to focus on are:\n\n1. The ```answers``` object: It contains a list of answers generated by the model, along with details like the type and files and documents it’s based on.\n2. The ```documents``` object: This is a list of documents the answer is based on.\n\n*Note: The contents of ```answers``` and ```documents``` may differ depending on your pipeline configuration.*\n\n## Learn more\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepset-ai%2Frag-ui-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepset-ai%2Frag-ui-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepset-ai%2Frag-ui-nextjs/lists"}