Frontend Overview

React/TypeScript frontend for the Dietrich Analysis Research Education (DARE) Platform.

Table of Contents

• What is DARE?
• Screenshots
• Overview
• Quick Start
• Documentation
• Tech Stack
• What is included in this repo?
• What is not included in this repo?
• Stay in touch
• Acknowledgements
• Contributors
• License

What is DARE?

The Dietrich Analysis Research Education (DARE) Platform is an open-source, multi-LLM research and conversation platform. It provides a single, vendor-agnostic interface to OpenAI, Anthropic Claude, Google Gemini, and self-hosted LLaMA models, with file-grounded retrieval (RAG), Model Context Protocol (MCP) tool integration, visual multi-step workflows, and real-time streaming. DARE is built for researchers and institutions that need more than a chatbot — document intelligence, reproducible workflows, and per-user usage tracking in one place.

This repository is the DARE web frontend — the primary user interface for the platform. It connects to the DARE backend over REST and Socket.IO and gives users:

• Multi-LLM chat — streaming conversations with OpenAI, Anthropic, Google, and self-hosted LLaMA models
• File-grounded RAG — upload documents and reference them in chat
• Visual workflow builder — design and run multi-step AI workflows as a DAG
• Prompt templates — reusable, parameterized prompts
• Artifacts — rich rendering for code, diagrams, and documents emitted by the model
• MCP integration — connect to Model Context Protocol servers for tool use

DARE runs standalone. The DARE frontend and backend are all you need to run the platform — nothing else is required. SocraticBooks is a separate, optional platform built on top of DARE.

Screenshots

Usage dashboard — activity, conversations, tokens, and wallet balance, all at a glance the moment you land:

<p align="center"> <img src="public/screenshots/dashboard.png" alt="DARE usage dashboard overview showing AI messages, conversations, files, token counts, and wallet balance" width="900" /> </p>

Overview

flowchart TB
    browser["Browser"]

    subgraph frontend["DARE Frontend (React 18)"]
        routes["React Router v6\nRoutes -> Pages"]
        components["Feature Components\nConversation, Workflows, Files, Artifacts"]
        primitives["UI Primitives\nRadix + Tailwind"]
        store["Redux Toolkit Store\nSlices + async thunks"]
        sockets["Socket.IO Middleware\n/chat + /workflow"]
        api["API Layer\nAxios clients by domain"]
    end

    backend["DARE Backend"]

    browser --> frontend
    routes --> components
    components --> primitives
    components --> store
    store --> api
    store --> sockets
    api <-->|REST| backend
    sockets <-->|Socket.IO| backend

The frontend is a static single-page app: a Redux Toolkit store drives feature components, an Axios API layer talks REST to the backend, and Socket.IO middleware streams chat and workflow events. See docs/architecture.md for the full diagram and component breakdown.

Quick Start

Get the frontend running locally in about two minutes:

git clone https://github.com/cmudco/dare-frontend.git
cd dare-frontend
npm install
cp .env.example .env      # defaults assume a backend on http://localhost:8000
npm run dev               # Vite dev server on http://localhost:5173

Prerequisites: Node.js 18+ and a running DARE backend (default http://localhost:8000).

See QUICKSTART.md for the full local-setup walkthrough, and DEPLOYMENT.md for building and serving dist/ in production.

Prerequisites

• Node.js 18+
• A running DARE backend (default http://localhost:8000)

Available Scripts

Documentation

Tech Stack

• React 18 + TypeScript
• Vite for build and dev server
• Redux Toolkit for state management
• React Router v6
• Tailwind CSS + Shadcn/ui (Radix UI primitives)
• Socket.IO Client for real-time chat and workflow streaming
• Formik + Yup for forms
• Zod for runtime validation of Socket.IO events
• Axios for HTTP

What is included in this repo?

• src/ — all application source code:
  • api/ — API layer (one file per domain)
  • components/ — UI components by feature (Conversation/, WorkflowBuilder/, FileManager/, Artifacts/, Layout/, and ui/ primitives)
  • redux/ — store, slices, async thunks, Socket.IO middleware, types, and workflow-canvas state
  • pages/, routes/, schemas/ (Zod), config/, and utils/
• docs/ — architecture, configuration, and project rules
• Supporting docs — QUICKSTART.md, DEPLOYMENT.md, CONTRIBUTING.md, CHANGELOG.md, SECURITY.md

What is not included in this repo?

• dare-backend — the Django REST + Socket.IO backend this frontend depends on (run it separately)
• socraticbooks-frontend — the SocraticBooks frontend (Private Repo for now)
• socraticbooks-backend — the SocraticBooks backend that proxies to DARE (Private Repo for now)

Stay in touch

• Found a bug or have a feature request? Open an issue on the project's GitHub repository.
• Questions or general inquiries? Email the project team at vks@andrew.cmu.edu.
• Security disclosures: see SECURITY.md.

Acknowledgements

DARE is an Open Forum for AI (OFAI) initiative, Carnegie Mellon University Libraries.

The DARE name and marks are owned by Carnegie Mellon University. Use of the name, wordmark, Scotty dog mark, header lockup, and footer badge is governed by the DARE Brand Guidelines & Usage Policy, independently of the software license.

This software integrates with third-party APIs (Anthropic, OpenAI, Google, and others); use of those APIs is subject to each provider's own Terms of Service.

Contributors

DARE is built and maintained by contributors at Carnegie Mellon University and in the open-source community.

Creators

<table> <tr> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Sayeed+Choudhury&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Sayeed Choudhury" /><br />_{<b>Sayeed Choudhury</b>}<br />Creator</td> <td align="center" valign="top" width="33.33%"><img src=".github/assets/team/vince.png" width="100" height="100" style="border-radius:50%" alt="Vincent Sha" /><br />_{<b>Vincent Sha</b>}<br />Creator</td> <td align="center" valign="top" width="33.33%"><img src=".github/assets/team/george.png" width="100" height="100" style="border-radius:50%" alt="George Cann" /><br />_{<b>George Cann</b>}<br />Creator</td> </tr> </table>

Team

<table> <tr> <td align="center" valign="top" width="33.33%"><img src=".github/assets/team/carl.png" width="100" height="100" style="border-radius:50%" alt="Carl Skipper" /><br />_{<b>Carl Skipper</b>}<br />Contributor</td> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Muhammad+Abdurrehman&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Muhammad Abdurrehman" /><br />_{<b>Muhammad Abdurrehman</b>}<br />Team Lead</td> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Brian+Wingenroth&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Brian Wingenroth" /><br />_{<b>Brian Wingenroth</b>}<br />Developer</td> </tr> <tr> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Farhat+Abbas&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Farhat Abbas" /><br />_{<b>Farhat Abbas</b>}<br />Developer</td> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Hariss+M&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Hariss M." /><br />_{<b>Hariss M.</b>}<br />Developer</td> <td align="center" valign="top" width="33.33%"><img src="https://ui-avatars.com/api/?name=Eira+Khan&size=100&background=162B4B&color=fff" width="100" height="100" style="border-radius:50%" alt="Eira Khan" /><br />_{<b>Eira Khan</b>}<br />QA</td> </tr> </table>

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0-only). The software license does not grant rights to the DARE name or marks; see the DARE Brand Guidelines & Usage Policy.

See the LICENSE file for the full license text, or visit <https://www.gnu.org/licenses/agpl-3.0.en.html>.