LexMusic

About

LexMusic🎯 ConceptLexMusic is a web platform (React artifact in Claude.ai) that serves as an AI lawyer specialized in music contract law. It features two main functions:Analyze a contract — Upload or paste an existing music contract, and the AI detects legal loopholes, abusive clauses, missing rights, relevant organizations (SACEM, SPEDIDAM, BMDA, SUISA, SABAM...), and available subsidies.Create a contract — A 3-step form (general info → parties → collaborators/publishers) that generates a complete professional contract, tailored to the chosen country.Legal coverage: France, Belgium, Switzerland, Morocco, Canada, Senegal, Ivory Coast, United States, United Kingdom, International (Berne Convention, TRIPS, CISAC).🏗️ Current Technical ArchitecturePlatform: React Artifact (application/vnd.ant.react) in Claude.ai — a single file, with no real backend.Stack:React with hooks (useState, useEffect)No external routing — navigation is managed by page state in the root componentDirect API calls to [https://api.anthropic.com/v1/messages](https://api.anthropic.com/v1/messages) on the client side ("Claude in Claude" pattern)Models used: claude-sonnet-4-20250514 for analysis (requiring legal precision), claude-haiku-4-5-20251001 for generation (for speed)Pages/Views:landing — Marketing homepage (hero, features, stats, "how it works", testimonials, CTA, footer)login / signup — Simulated authentication (no real backend, just local state)pricing — 3 plans: Basic (free), Pro (€19/month), Prestige (€49/month)checkout — Simulated payment (card/PayPal/Apple Pay) with functional forms but fictitious processingcontact — Simulated contact formapp (MainApp) — Contains 3 sub-views: home, analyze, generate🎨 Current Design SystemTheme: Premium dark mode, "luxury lawyer" paletteBackground: #080809 (almost black)Gold accent: #c8a44a / #ddb85eGreen (success): #3b9458Red (danger): #c44545Amber (warning): #c47e30Typography:Titles/Numbers: Cormorant Garamond (elegant serif, via Google Fonts)Body text: InterAnimations (CSS keyframes):fadeUp, fadeIn, scaleIn, slideRight — Staggered appearancesfloatBg, floatBg2 — Floating light halos in the background (gold + green)drawLine — The SVG logo draws itself upon loadingglow — Golden pulsation on the main CTAshimmerText — A shimmer effect shining across the hero titlenoteFloat1/2/3 — Decorative floating musical notes (♪♫♩♬) on the hero sectioncheckPop — Elastic bounce on confirmation checkmarksshake — Shaking effect on error messagesgridOverlay — Subtle background grid ("blueprint" effect)Reusable components: Btn, Card, Field, Tag, Loader (double rotating ring), ErrMsg, PBar (progress bar), StepNav (stepper with checkmarks), AnimatedBg, FloatingNotes, LogoMark.🐛 Bugs Resolved During Development (for reference)Truncated JSON — max_tokens was too low (1000), cutting the response in the middle → Increased to 4000 (analysis) / 2000-2500 (generation).Upload button not working on mobile — onClick on a div does not trigger the file input on iOS/Android → Replaced with a true native HTML <label htmlFor>."JSON not found" — The model was wrapping its response in json ... despite instructions → Added aggressive regex cleanup (.replace(/^```(?:json)?\s*/i,"").replace(/\s*```\s*$/,"")) + reinforced the prompt ("start directly with {").React syntax error — Typo margin:"0 0:16px" (colon instead of space) → Broke the entire artifact rendering, corrected to "0 0 16px".Rate limit 429 — Temporary Anthropic limit, not a code bug; resolves itself by waiting a few hours.