@ooopenlab/create-module/templates/component-injection/docs/INJECTION_GUIDE.md

CLI tool for creating OOOPEN Lab modules

# Component Injection Integration Guide

This guide provides detailed instructions for integrating AI-generated components into your module using the component injection workflow.

## 🎯 3-Step Integration Process

### Step 1: Generate Your Component
Use AI tools with the provided prompts to generate interactive components that follow the `InjectedComponentProps` interface.

### Step 2: Add Component to Module
1. Place your AI-generated component file in `src/components/injected/`
2. Import it in `QuestionComponent.tsx`
3. Replace the placeholder with `ComponentInjectionContainer`

### Step 3: Test and Validate
Run the validation scripts to ensure everything works correctly.

## 🔧 Integration Example

```tsx
import React from 'react';
import { ComponentInjectionContainer } from '@ooopenlab/quiz-shared';
import { MyAIComponent } from './injected/MyAIComponent';

export const QuestionComponent: React.FC<QuestionComponentProps> = ({ 
  config, 
  onResult 
}) => {
  const injectedProps = {
    config,
    onResult,
    timestamp: Date.now()
  };

  return (
    <ComponentInjectionContainer
      component={MyAIComponent}
      props={injectedProps}
      onResult={onResult}
      fallback={<div>Loading...</div>}
    />
  );
};
```

## 🧪 Validation

Before deploying, run:
- `npm run validate` - Check module structure
- `npm run check:ai-ready` - Verify injection readiness
- `npm test` - Run all tests

## 📋 Troubleshooting

- Component not loading? Check import paths
- Validation errors? Review props interface
- Type errors? Ensure TypeScript compatibility

For more help, see the full troubleshooting documentation.