AI-powered quality intelligence platform with Claude AI integration
Skopaq is a comprehensive AI-powered end-to-end testing platform that leverages Claude's intelligence to autonomously test, analyze, and validate web applications. This repository contains the frontend dashboard built with Next.js 15, React 19, and Supabase.
- AI Chat Interface - Natural language test creation and debugging with Claude AI
- Test Runner - Execute browser-based E2E tests with real-time feedback
- Discovery Tool - Automatically find testable surfaces in your application
- Visual AI - Visual regression testing with AI-powered diff analysis
- AI Insights - Pattern analysis and test optimization recommendations
- Global Testing - Cross-browser and cross-region validation
- Quality Audit - Code health checks and best practice verification
- Intelligence Dashboard - Quality metrics and trends visualization
- Reports & Analytics - Comprehensive test result reporting
- Integrations - Connect with Datadog, Sentry, PagerDuty, and more
┌─────────────────────────────────────────────────────────────────────┐
│ ARGUS DASHBOARD │
│ (Next.js 15 + React 19) │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────────────────┼───────────────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ Clerk │ │ Supabase │ │ Skopaq Core │
│ Authentication│ │ Database │ │ (Backend) │
└───────────────┘ └───────────────┘ └───────────────┘
│
┌───────────┴───────────┐
▼ ▼
┌───────────────┐ ┌───────────────┐
│ Claude AI │ │ Browser │
│ (Anthropic) │ │ Automation │
└───────────────┘ └───────────────┘
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI Library | React 19 |
| Language | TypeScript 5.6 |
| Styling | Tailwind CSS 3.4 |
| Components | Radix UI Primitives |
| State Management | Zustand, TanStack Query |
| Database | Supabase (PostgreSQL) |
| Authentication | Clerk |
| AI Integration | Anthropic Claude (via Vercel AI SDK) |
| Charts | Recharts |
| Animations | Framer Motion |
- Node.js 18.17 or later
- npm, yarn, or pnpm
- Supabase account
- Clerk account
- Anthropic API key
- Clone the repository
git clone https://github.com/skopaq/skopaq.git
cd skopaq- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Set up environment variables
Create a .env.local file in the root directory:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...
# Anthropic AI
ANTHROPIC_API_KEY=sk-ant-...
# Optional: Analytics & Monitoring
NEXT_PUBLIC_POSTHOG_KEY=phc_...
SENTRY_DSN=https://...- Set up the database
Run the Supabase migrations:
npx supabase db pushOr apply migrations manually from supabase/migrations/.
- Start the development server
npm run devOpen http://localhost:3000 to view the application.
skopaq/
├── app/ # Next.js App Router pages
│ ├── (auth)/ # Authentication routes
│ ├── api/ # API routes
│ ├── discovery/ # Discovery tool
│ ├── global/ # Global testing
│ ├── insights/ # AI insights
│ ├── integrations/ # Third-party integrations
│ ├── intelligence/ # Quality metrics
│ ├── legal/ # Legal pages
│ ├── quality/ # Quality audit
│ ├── reports/ # Reports & analytics
│ ├── settings/ # User settings
│ ├── tests/ # Test runner
│ ├── visual/ # Visual AI testing
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home (Chat interface)
│
├── components/
│ ├── chat/ # Chat components
│ ├── layout/ # Layout components (Sidebar, Header)
│ ├── providers/ # Context providers
│ └── ui/ # Reusable UI components
│
├── lib/
│ ├── hooks/ # Custom React hooks
│ ├── supabase/ # Supabase client & types
│ ├── utils.ts # Utility functions
│ └── version.ts # Version management
│
├── public/ # Static assets
├── supabase/
│ └── migrations/ # Database migrations
│
├── middleware.ts # Next.js middleware (auth)
├── tailwind.config.ts # Tailwind configuration
└── tsconfig.json # TypeScript configuration
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run version:patch |
Bump patch version (1.0.x) |
npm run version:minor |
Bump minor version (1.x.0) |
npm run version:major |
Bump major version (x.0.0) |
The application uses Supabase with the following main tables:
| Table | Description |
|---|---|
projects |
User projects/applications to test |
test_runs |
Test execution records |
test_results |
Individual test results |
test_specs |
Test specifications |
chat_conversations |
AI chat history |
chat_messages |
Individual chat messages |
discoveries |
Discovered testable surfaces |
visual_snapshots |
Visual regression snapshots |
integrations |
Third-party integration configs |
- Connect your GitHub repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy automatically on push to
main
# Build the application
npm run build
# Start the production server
npm run start| Repository | Description |
|---|---|
| skopaq-core | Python backend with LangGraph orchestrator and AI agents |
| e2e-testing-agent | Cloudflare Worker for browser automation |
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: docs.skopaq.ai
- Issues: GitHub Issues
- Discussions: GitHub Discussions