2.9 KiB
2.9 KiB
Rippling MCP Apps
20 React applications built for the Rippling MCP server.
Apps Overview
Employee Management (4 apps)
- employee-dashboard - Company headcount overview with department stats
- employee-detail - Full employee profile viewer with search
- employee-directory - Searchable employee grid with department filters
- org-chart - Hierarchical organization structure visualization
Payroll (2 apps)
- payroll-dashboard - Pay runs overview with status tracking
- payroll-detail - Detailed pay run breakdown with payment tables
Time Management (4 apps)
- time-tracker - Time entry tracking and reporting
- timesheet-approvals - Pending timesheet approval workflow
- time-off-calendar - PTO calendar visualization
- benefits-overview - Benefits plans summary
Benefits (2 apps)
- benefits-enrollment - Enrollment details and management
Recruiting (ATS) (3 apps)
- ats-pipeline - Candidate pipeline kanban board
- job-board - Open positions grid view
- candidate-detail - Individual candidate profile viewer
Learning & Development (2 apps)
- learning-dashboard - Course assignments overview
- course-catalog - Available courses grid
IT Management (2 apps)
- device-inventory - Company devices tracker with type filters
- app-management - Installed apps overview
Organization (2 apps)
- team-overview - Team structure and members
- department-grid - Department breakdown and analytics
Technical Details
Structure
Each app is a standalone React application with:
App.tsx- Main React componentindex.html- HTML entry pointmain.tsx- React initializationvite.config.ts- Vite build configurationstyles.css- Component styles
Theme
- Dark theme using #0f172a (bg) and #1e293b (cards)
- Accent colors: #60a5fa (blue), #34d399 (green), #a78bfa (purple), #fbbf24 (yellow)
- Consistent UI patterns across all apps
Data Flow
- Apps call Rippling MCP tools via
window.mcp.callTool() - Fallback to sample data when tools unavailable
- Client-side state management with React hooks
- Loading states and error handling included
MCP Tools Used
rippling_list_employeesrippling_get_employeerippling_list_pay_runsrippling_get_pay_runrippling_list_time_entriesrippling_list_timesheetsrippling_list_time_off_requestsrippling_list_benefit_plansrippling_list_enrollmentsrippling_list_candidatesrippling_get_candidaterippling_list_job_postingsrippling_list_coursesrippling_list_devicesrippling_list_appsrippling_list_groups
Build & Run
Each app can be built independently:
cd src/ui/react-app/{app-name}
npm install
npm run dev
Stats
- Total Apps: 20
- Total Files: 100 (5 per app)
- Total Lines: ~3,600+
- Coverage: Employees, Payroll, Time, Benefits, ATS, Learning, IT, Org