🚀 Now available on npm

Universal AI-Powered UI Testing

See your interfaces through the lens of intelligence. jpglens analyzes your UI through the context of real user journeys, testing not just functionality, but user experience.

Get Started

📚 Read Docs 🤖 For AI Assistants LLMs

Terminal

$ npm install jpglens |

✅ jpglens@1.1.1 installed successfully

🤖 AI-powered testing ready to use

1.0.1

Latest Version

Frameworks

MIT

License

jpglens-analysis.js

                            // Analyze with AI-powered insights
                        
                            import { analyzeUserJourney } from 'jpglens/playwright';
                        
                            await analyzeUserJourney(page, {
                        
                            stage: 'checkout-flow',
                        
                            userIntent: 'complete purchase',
                        
                            userContext: {
                        
                            persona: 'mobile-shopper',
                        
                            device: 'mobile'
                        
                            }
                        
                            });
                        
                            // ✅ UX Score: 8.2/10
                        
                            // 🚨 Found 2 critical issues
                        
                            // 💡 Generated 5 recommendations

Get Started in Seconds

Install jpglens and start analyzing your UI with AI-powered insights.

npm install --save-dev jpglens

yarn add --dev jpglens

pnpm add -D jpglens

📦 View on npm ⭐ Star on GitHub

Why jpglens?

Traditional testing tools check if buttons work. jpglens understands if they're intuitive, accessible, and delightful to use.

🧠

AI-Powered Analysis

Advanced AI models analyze your UI through the lens of real user behavior, identifying usability issues humans might miss.

🎭

Universal Framework Support

Works seamlessly with Playwright, Cypress, Selenium, Storybook, and Testing Library. One tool for all your testing needs.

🗺️

User Journey Mapping

Analyze complete user workflows, not just isolated components. Understand how users flow through your application.

♿

Accessibility First

Built-in WCAG compliance checking with contextual recommendations for improving accessibility across all user types.

📊

Rich Reporting

Generate beautiful reports in Markdown, HTML, or JSON. Customizable templates and automated insights for your team.

🔧

Highly Configurable

Customize analysis types, user personas, prompts, and output formats. Adapt jpglens to your specific needs.

See It In Action

jpglens integrates naturally with your existing tests, adding AI-powered insights without changing your workflow.

✅ Contextual user analysis

✅ Accessibility compliance

✅ Performance insights

✅ Actionable recommendations

                            // tests/checkout.spec.js
import { test } from '@playwright/test';
import { analyzeUserJourney } from 'jpglens/playwright';

test('user can complete purchase', async ({ page }) => {
  await page.goto('/checkout');
  
  // Standard Playwright actions
  await page.fill('[data-testid="email"]', 'user@example.com');
  await page.fill('[data-testid="address"]', '123 Main St');
  
  // 🔍 AI Analysis - Understands user context
  await analyzeUserJourney(page, {
    stage: 'checkout-completion',
    userIntent: 'complete purchase securely',
    userContext: {
      persona: 'first-time-buyer',
      device: 'mobile',
      urgency: 'high'
    },
    criticalElements: ['payment-form', 'security-badges', 'total-price']
  });
  
  await page.click('[data-testid="place-order"]');
});
                        

                            // cypress/e2e/dashboard.cy.js
import 'jpglens/cypress';

describe('Dashboard Analytics', () => {
  it('user analyzes business metrics', () => {
    cy.visit('/dashboard');
    cy.get('[data-cy="date-filter"]').select('last-30-days');
    
    // 🔍 AI Analysis with Cypress
    cy.analyzeUserExperience({
      journey: 'data-analysis-workflow',
      userType: 'business-analyst',
      expectation: 'quickly understand key metrics',
      context: 'daily business review preparation'
    });
  });
});
                        

                            // Button.stories.js
import { analyzeComponentStates } from 'jpglens/storybook';

export const InteractiveStates = {
  args: { variant: 'primary' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    
    // Test different states
    await userEvent.hover(button);
    await userEvent.focus(button);
    
    // 🔍 AI Analysis of component states
    await analyzeComponentStates(canvas, {
      component: 'Primary Button',
      states: ['default', 'hover', 'focus', 'active'],
      context: 'critical call-to-action in checkout flow',
      designSystem: 'company-design-system'
    });
  }
};
                        

⚡ MCP v6 Integration Production Ready

AI Agents with Vision

Transform AI agents into UI testing experts with jpglens MCP integration. Give your AI agents the power to "see" and analyze user interfaces through standardized Model Context Protocol.

🎭

8 MCP Tools

Complete v6 toolset for comprehensive UI analysis

🧠

AI Agent Vision

Enable agents to understand UI context and user experience

⚡

Dual Transport

Stdio + SSE bridge support for any architecture

🏭

Production Grade

100% test coverage, Docker ready, enterprise validated

🚀 Explore MCP Integration 📦 Install MCP Server