DSPA AI Tutor and Virtual Assistant

Project info

This SOCR webapp shows an interactive demonstation of an LLM GAIM providing suport for the UMich HS650 (Data Science and Predictive Analytics (DSPA) graduate course.

Overview

This project is an AI-powered chatbot designed to assist users with data science tasks. Its core capability is the ability to execute both R and Python code directly within the browser using WebAssembly technologies (WebR and Pyodide). This allows for interactive data analysis, visualization generation, and experimentation without requiring a separate server-side execution environment for these languages.

The application leverages the Vercel AI SDK for managing chat interactions and streaming responses.

Key Features

• AI Chat Interface: Conversational interface powered by modern AI models (via Vercel AI SDK).
• In-Browser Code Execution:
  • Run Python code using Pyodide, including package installation via micropip.
  • Run R code using WebR.
• Rich Output:
  • Display standard output (stdout) and error messages (stderr).
  • Render plots generated by Matplotlib (Python) and base R graphics.
  • Enable downloading of files generated by code execution (e.g., CSVs).
• Interactive Code Blocks:
  • Syntax highlighting for R, Python, and other common languages.
  • Copy code functionality.
  • "Run" button for executable languages.
• Optimized Markdown Rendering: Efficiently renders chat messages and code blocks, handling streaming updates.

Tech Stack

• Framework: Next.js (React)
• AI/Chat: Vercel AI SDK
• Styling: Tailwind CSS
• Python Execution: Pyodide
• R Execution: WebR
• Database/Auth: Supabase
• UI Components: shadcn/ui (built on Radix UI)
• Syntax Highlighting: highlight.js

Getting Started

Prerequisites

• Node.js (version recommended by Next.js, e.g., 18.x or later)
• npm or yarn

Setup

1. Clone the repository:

   git clone <your-repository-url>
   cd socr-dspa-assistant 

2. Install dependencies:

   npm install

   Note: Due to potential dependency conflicts, you might need the --legacy-peer-deps flag:

   npm install --legacy-peer-deps

3. Set up Environment Variables:

   • Create a .env.local file in the project root.
   • Add your Supabase project URL and anon key:

     NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
     NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
     OPENAI_API_KEY

   • Add any necessary API keys for the AI models used by the Vercel AI SDK (e.g., OPENAI_API_KEY). Refer to the Vercel AI SDK documentation for specific requirements.

4. Run the development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:3000.

Notes

• Pyodide Version: This project is currently configured to use Pyodide v0.23.4 due to compatibility reasons found during development with Next.js 14+.
• Security Headers: The next.config.ts includes specific Cross-Origin and Content-Security-Policy headers necessary for Pyodide and WebR (SharedArrayBuffer, WASM loading, worker execution, etc.). Modify these with caution.
• Code Execution: Code is executed entirely within the user's browser. Ensure users understand the implications of running potentially untrusted code.

Resources

• DSPA Site
• DSPA AI Tutor and Virtual Assistant (Live App)
• COntact SOCR Team