EuConquisto Composer MCP

# 🖥️ Viewing Compositions - Browser Options ## Overview When you create a composition through Claude Desktop using the MCP server, you have several options for viewing the result. ## Option 1: Browser-Enabled MCP Server (Recommended) ### What It Does - **Launches a real browser window** with the composition loaded - **Keeps the browser open** for you to interact with - **Takes screenshots** for documentation - **Uses your JWT token** for authentication ### How to Use 1. **Configure Claude Desktop** to use the browser-enabled server: ```json { "mcpServers": { "euconquisto-composer": { "command": "npm", "args": ["run", "mcp:browser"], "cwd": "/path/to/euconquisto-composer-mcp-poc" } } } ``` 2. **In Claude Desktop**, use the tool with browser enabled: ``` Use the create-intelligent-composition tool with: - prompt: "Crie uma aula sobre fotossíntese..." - title: "Fotossíntese" - openBrowser: true (default) ``` 3. **Result**: A browser window opens showing your composition! ### Features - ✅ **Live Preview**: See the actual Composer interface - ✅ **Full Interaction**: Edit widgets, save changes - ✅ **Screenshot**: Automatic screenshot saved - ✅ **Persistent Window**: Browser stays open until you close it ## Option 2: Manual Browser Access If using the simplified `mcp:working` server: 1. **Copy the URL** returned by the MCP server 2. **Open your browser** manually 3. **Paste the URL** with your JWT token appended: ``` https://composer.rdpnredes.com.br/composer?token=YOUR_JWT_TOKEN ``` ## Option 3: View Existing Composition Use the `view-composition` tool in the browser-enabled server: ``` Use the view-composition tool with: - url: "https://composer.rdpnredes.com.br/composer/123456" - keepOpen: true ``` ## 🔍 What You'll See ### Initial Load 1. **Composer Interface** loads with your generated composition 2. **All widgets** displayed in the correct order: - Header (cabeçalho) - Text content (texto) - Video (if requested) - Flashcards (if memorization needed) - Quiz (if assessment needed) ### Interaction Options - **Edit widgets** by clicking on them - **Reorder** by dragging - **Save** to get a permanent URL - **Preview** in different device sizes - **Export** options available ## 🚨 Important Notes ### Browser Window Behavior - **Stays Open**: The browser window will remain open until you close it - **MCP Server Waits**: The MCP server command will appear "stuck" while browser is open - **Manual Close**: You must close the browser window when done ### Authentication - **JWT Token Required**: The browser automation uses your JWT token - **Auto-Login**: No manual login needed - **Session Persistence**: Stays logged in while browser is open ## 📸 Screenshots The browser-enabled server automatically saves screenshots to: ``` /euconquisto-composer-mcp-poc/composition-preview-[timestamp].png ``` ## 🛠️ Troubleshooting ### Browser Doesn't Open - Check Playwright is installed: `npm run install:browsers` - Verify JWT token exists: `correct-jwt-new.txt` - Check console for error messages ### Composition Doesn't Load - Ensure localStorage is being set correctly - Check browser console for JavaScript errors - Verify the composition JSON structure ### MCP Server Seems Frozen - This is normal! The server waits while browser is open - Close the browser window to complete the operation ## 🎯 Best Practices 1. **Use Browser-Enabled Server** for interactive development 2. **Keep Browser Open** to test and refine compositions 3. **Save Frequently** to preserve your work 4. **Use Screenshots** for documentation ## Example Workflow 1. **Claude Desktop**: "Create a biology lesson about photosynthesis for 7th grade" 2. **MCP Server**: Generates composition and opens browser 3. **You**: Review the content in the browser 4. **You**: Make any manual adjustments needed 5. **You**: Click "Salvar" to save 6. **You**: Copy the final URL 7. **You**: Close browser window 8. **Claude Desktop**: Receives confirmation with URL and screenshot This gives you the best of both worlds: AI-powered generation with human review and refinement! 🚀