QA Agent - React Login App with CopilotKit

A simple React application with a login form, informative buttons, and an AI-powered sidebar chatbot using CopilotKit.

Features

• 🎨 Beautiful, modern UI with gradient backgrounds
• 🔐 Login form (demo - no actual authentication)
• 🚀 Informative buttons that navigate to the next page without login
• 📱 Responsive design for mobile and desktop
• ⚡ Fast development with Vite
• 🤖 AI-powered sidebar chatbot with CopilotKit
• 📖 CopilotReadable integration for AI content awareness
• 📊 Excel Test Case Upload - Upload Excel files with test cases
• 🤖 Automatic Test Execution - AI automatically executes test cases from Excel files
• 📈 Test Results & Reporting - View detailed test execution results

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Set up environment variables:

   • Create a .env or .env.local file in the root directory
   • Frontend variables (Vite requires VITE_ prefix):

     VITE_DEPLOYED_ENV=qa                    # Set to "qa" to enable CopilotKit, any other value disables it
     VITE_COPILOTKIT_URL=/api/copilotkit    # CopilotKit API endpoint
     

   • Backend variables (for server.js):

     GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here
     GEMINI_MODEL=gemini-2.0-flash-exp      # Optional: specify model (default: gemini-2.0-flash-exp)
     

   • Get your Gemini API key from: https://aistudio.google.com/app/apikey
   • Note: CopilotKit sidebar will only appear when VITE_DEPLOYED_ENV=qa

3. Start the backend server (in one terminal):

npm run server

4. Start the development server (in another terminal):

npm run dev

5. Open your browser and navigate to http://localhost:5173

Note: The sidebar chatbot will appear on the right side of the screen. Click it to interact with the AI assistant!

Available Scripts

• npm run dev - Start development server (Vite)
• npm run server - Start CopilotKit backend server
• npm run build - Build for production
• npm run preview - Preview production build

Project Structure

QA-Agent/
├── src/
│   ├── components/
│   │   ├── LoginForm.jsx
│   │   ├── LoginForm.css
│   │   ├── NextPage.jsx
│   │   └── NextPage.css
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── server.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

Usage

• Click any of the informative buttons on the home page to navigate to the next page
• The login form is for demonstration purposes only
• All navigation works without authentication
• AI Chatbot: Click the sidebar chatbot icon to interact with the AI assistant
• The chatbot can read and understand content wrapped with CopilotReadable components
• Ask the chatbot questions about the app, login form, or navigation features

🧪 Testing with Excel Files

1. Upload Test Cases:

   • Open the chatbot sidebar
   • Say: "Upload test file" or drag & drop sample_test_cases.xlsx
   • The chatbot will parse your Excel file automatically

2. Execute Tests:

   • Say: "Execute the test cases" or "Run the tests"
   • The AI will automatically execute all test cases sequentially

3. View Results:

   • Say: "Show test results" to see passed/failed/error counts
   • Get detailed results for each test case

Sample Test File: sample_test_cases.xlsx is included in the project root. See TEST_FILE_USAGE.md for details.

CopilotKit Integration

This app uses CopilotKit for AI-powered assistance:

• CopilotSidebar: A sidebar chatbot that provides contextual help
• CopilotReadable: Wraps content to make it accessible to the AI
• CopilotKit Provider: Manages the AI context and state

The chatbot can understand:

• Page content (titles, descriptions, buttons)
• Form fields and their purposes
• Navigation structure
• User questions about the application

Technologies Used

• React 18
• React Router DOM 6
• Vite
• CSS3
• CopilotKit (@copilotkit/react-core, @copilotkit/react-ui)
• Express.js (for CopilotKit backend)