import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { Bot, Brain, Check, Eye, FileText, Menu, MessageSquare, PlayCircle, Plus, Search, Send, Settings, Sparkles, X } from 'lucide-react'; import { Area, Bar } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { return (

{/* Claude AI Logo Placeholder */}

Claude AI

{/* Title */}

Claude AI: The Procurement Shortcut Nobody Talks About!

); } function Scene1({ time }: { time: MotionValue }) { const bullet1Opacity = useTransform(time, [2.0, 2.5], [0, 1]); const bullet2Opacity = useTransform(time, [7.5, 8.0], [0, 1]); const bullet3Opacity = useTransform(time, [14.5, 15.0], [0, 1]); return (

What you'll learn

Redesign Your RFP Process

Generate ideal templates and evaluation criteria with AI.

Uncover Hidden Insights

Analyze competitor strategies and spot vendor red flags.

Master Negotiations

Prepare for tough vendor conversations with AI assistance.

); } function Scene2({ time }: { time: MotionValue }) { const fullPrompt = "I need to procure new cloud infrastructure for a mid-sized SaaS company. Draft a comprehensive Request for Proposal (RFP) template that includes sections for technical requirements, security compliance (SOC 2, ISO 27001), service level agreements, pricing structure, implementation timeline, and vendor support. Also, suggest a scoring rubric for evaluating responses, emphasizing scalability and data privacy. My budget is $500k annually."; const charIndex = useTransform(time, [10.5, 27.0], [0, fullPrompt.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(v))); }); const promptOpacity = useTransform(time, [10.0, 10.5], [0, 1], { clamp: true }); const inputHeight = useTransform(time, [10.5, 11.0], [40, 120], { clamp: true }); // Expand input box as text fills const sendButtonOpacity = useTransform(time, [26.5, 27.0], [0, 1], { clamp: true }); return (

{/* Header */}

Claude

claude.ai

{/* Chat Area - initially empty */}

{/* Welcome message or previous chat history can go here if needed, but for this scene it's empty */}

How can I help you today?

{/* Input Area */}

); } function Scene3({ time }) { const fullResponseText = `Request for Proposal (RFP): Cloud Infrastructure for SaaS Company 1. Introduction - Purpose, background, and scope of this RFP. - Key objectives for new cloud infrastructure. 2. Company Overview - Brief description of our mid-sized SaaS company. - Current infrastructure challenges and future growth projections. 3. Technical Requirements (Weight: 30%) - **Scalability:** Ability to handle rapid user growth (5x in 3 years). - **Compute & Storage:** Specific CPU, RAM, and storage needs. - **Networking:** Low latency, high throughput capabilities. - **Operating Systems:** Support for Linux distributions (e.g., Ubuntu, CentOS). - **Database Support:** Compatibility with PostgreSQL and MongoDB. - **APIs & Integrations:** Ease of integration with existing tools. 4. Security & Compliance (Weight: 25%) - **Certifications:** Must be SOC 2 Type II and ISO 27001 compliant. - **Data Privacy:** GDPR and CCPA adherence, data residency options. - **Encryption:** Data at rest and in transit encryption standards. - **Access Controls:** Granular IAM, MFA support. 5. Service Level Agreements (SLAs) (Weight: 10%) - **Uptime Guarantee:** Minimum 99.99% for critical services. - **Incident Response:** Defined response and resolution times. - **Disaster Recovery:** RTO/RPO objectives. 6. Pricing Structure (Weight: 15%) - **Transparency:** Clear, itemized breakdown of all costs. - **Billing Models:** Options for pay-as-you-go, reserved instances, commitment discounts. - **Hidden Costs:** Explicit declaration of potential egress fees, support costs. - **Cost Optimization:** Tools and features for managing spend. 7. Implementation Timeline (Weight: 10%) - Phased migration plan, key milestones, and estimated completion. 8. Vendor Support (Weight: 10%) - Support tiers, availability (24/7), response times, escalation paths. --- **Suggested Scoring Rubric for Evaluation:** - **Technical Fit (30%):** Scalability, performance, feature depth, integration capabilities. - **Security & Compliance (25%):** Adherence to certifications (SOC 2, ISO 27001), data privacy measures, access controls, auditability. - **Pricing & Total Cost of Ownership (TCO) (20%):** Cost-effectiveness, transparency of pricing models, value for money over contract term. - **Implementation & Support (15%):** Ease of migration, quality and responsiveness of vendor support, comprehensive documentation. - **Innovation & Roadmap (10%):** Future-proofing, proposed new features, vendor's long-term vision and alignment with our strategic goals. `; const words = fullResponseText.split(" "); const wordIndex = useTransform(time, [0, 10], [0, words.length]); const [visibleText, setVisibleText] = useState(""); useMotionValueEvent(wordIndex, "change", (v) => { setVisibleText(words.slice(0, Math.round(v)).join(" ")); }); // Animate scroll to reveal the rubric section. Adjust -250px based on content height to reveal rubric. const scrollY = useTransform(time, [8.0, 14.0], [0, -250]); const userPrompt = "I need to procure new cloud infrastructure for a mid-sized SaaS company. Draft a comprehensive Request for Proposal (RFP) template that includes sections for technical requirements, security compliance (SOC 2, ISO 27001), service level agreements, pricing structure, implementation timeline, and vendor support. Also, suggest a scoring rubric for evaluating responses, emphasizing scalability and data privacy. My budget is $500k annually."; return (

{/* Chat Header */}

Claude.ai

{/* Chat Messages Area */}

{/* User Prompt Bubble */}

{userPrompt}

{/* AI Response Bubble */}

$1').replace(/\n/g, '
') }} /> {/* Simple gradient overlay to suggest more content below */}

{/* Message Input (now filled, visually disabled for this scene) */}

); } function Scene4({ time }: { time: MotionValue }) { const fullPromptText = "Based on common industry practices for cloud infrastructure procurement for SaaS companies of similar size, what are typical areas where vendors try to upsell or hide costs? Also, what are the key negotiation points for securing favorable long-term contracts in this space?"; const promptCharIndex = useTransform(time, [4.0, 19.0], [0, fullPromptText.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(promptCharIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); const cursorOpacity = useTransform(time, [4.0, 4.2, 4.4, 4.6, 19.0, 19.2], // Blink at the start and end of typing [0, 1, 0, 1, 1, 0], // Off, On, Off, On, On, Off { clamp: false } // Allows the initial blink pattern ); return (

{/* Chat Header */}

Claude AI

{/* Chat History Area */}

{/* Initial welcome message */}

Hello! How can I assist you with your procurement analysis today?

{/* Message Input Area */}

{displayedPrompt}

); } function Scene5({ time }: { time: MotionValue }) { const fullResponse = "Incredibly useful insights. Common vendor tactics like tiered pricing structures that scale unexpectedly, or hidden fees for premium support. Key negotiation points include committing to longer contract terms for better discounts, or negotiating specific uptime guarantees. This helps anticipate vendor strategies and prepare counter-arguments, saving significant negotiation time and potentially thousands of dollars."; const words = fullResponse.split(" "); const responseStart = 0.5; const responseDuration = 15; // 15 seconds for 53 words const wordIndex = useTransform(time, [responseStart, responseStart + responseDuration], [0, words.length]); const [displayedWords, setDisplayedWords] = useState([]); const highlightRanges = [ { start: 7, end: 13, color: "bg-emerald-100 text-emerald-800" }, // "tiered pricing structures that scale unexpectedly," { start: 14, end: 19, color: "bg-red-100 text-red-800" }, // "hidden fees for premium support." { start: 23, end: 31, color: "bg-indigo-100 text-indigo-800" }, // "committing to longer contract terms for better discounts," { start: 32, end: 36, color: "bg-purple-100 text-purple-800" }, // "negotiating specific uptime guarantees." ]; useMotionValueEvent(wordIndex, "change", (v) => { const currentWordCount = Math.round(v); const newDisplayedWords: React.ReactNode[] = []; for (let i = 0; i < currentWordCount; i++) { let word = words[i]; let isHighlighted = false; let highlightClass = ""; for (const range of highlightRanges) { if (i >= range.start && i < range.end) { isHighlighted = true; highlightClass = range.color; break; } } newDisplayedWords.push( {word}{i < currentWordCount - 1 ? " " : ""} ); } setDisplayedWords(newDisplayedWords); }); const userPrompt = "Analyze vendor contract for negotiation points and potential pitfalls."; return (

{/* Chat Header */}

Claude AI

{/* Chat Messages */}

{/* User Message */}

{userPrompt}

{/* AI Response */}

{displayedWords}

{/* Chat Input */}

); } function Scene6({ time }: { time: MotionValue }) { const proposalText = ` **Vendor Proposal: Quantum Solutions Inc.** **Executive Summary:** Quantum Solutions Inc. (QSI) is pleased to submit this comprehensive proposal for providing advanced AI-driven procurement optimization services to [Client Company Name]. Our platform leverages cutting-edge machine learning to automate supplier discovery, contract analysis, risk assessment, and performance monitoring, promising a reduction in operational costs by up to 15% and an increase in efficiency by 25%. Our proprietary algorithms are designed for rapid deployment and seamless integration with existing ERP systems. **Solution Overview:** Our core offering includes: 1. **AI-Powered Supplier Discovery:** Utilizes a vast database and predictive analytics to identify optimal suppliers based on historical performance, market trends, and risk profiles. 2. **Automated Contract Analysis:** Scans and interprets contractual documents, highlighting key clauses, obligations, and potential areas of concern. 3. **Dynamic Risk Management:** Continuously monitors supplier financial health, geopolitical factors, and supply chain disruptions, providing real-time alerts. 4. **Performance Analytics Dashboard:** Customizable dashboards for tracking KPIs, spend analysis, and supplier performance. **Technical Architecture:** The QSI platform is built on a scalable, cloud-native architecture (AWS/Azure agnostic). It employs microservices for modularity and uses industry-standard encryption protocols (TLS 1.3, AES-256) for data in transit and at rest. Our API-first approach ensures flexible integration. **Security & Compliance:** QSI is SOC 2 Type II compliant and adheres to GDPR and CCPA regulations. We implement multi-factor authentication, role-based access control, and regular security audits. Data residency options are available upon request. **Scalability:** Our infrastructure is designed for elastic scalability, capable of handling varying transaction volumes and data loads. We guarantee 99.9% uptime with a robust disaster recovery plan. **Implementation Plan:** Phase 1: Discovery & Integration (2-4 weeks) Phase 2: Pilot Program & Training (4-6 weeks) Phase 3: Full Rollout & Optimization (Ongoing) **Pricing Model:** Our pricing is subscription-based, calculated on a tiered model tied to annual spend managed through the platform. - Tier 1 (Up to $50M spend): $10,000/month - Tier 2 ($50M - $200M spend): $25,000/month - Tier 3 (Above $200M spend): Custom Quote Additional fees apply for premium support and custom integrations. **SLA Commitments:** - Uptime: 99.9% (excluding scheduled maintenance) - Response Time (Critical Issues): 4 hours - Resolution Time (Critical Issues): 24 hours - Data Backup: Daily, with 30-day retention. **References:** Available upon request. **Contact:** sales@quantumsolution.com `; const fullPromptText = "Analyze this vendor proposal against our initial RFP requirements and the scoring rubric we developed. Specifically, identify any areas where the proposal is vague, contradictory, or seems to deviate from industry best practices for security and scalability. Point out any potential red flags regarding their pricing model or SLA commitments."; const charIndex = useTransform( time, [11.5, 25.5], // Start typing at 11.5s, finish at 25.5s [0, fullPromptText.length], { clamp: true } ); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); return (

{/* Chat Header */}

Claude Chat

{/* Chat History */}

{/* User message with proposal */}

Vendor Proposal: Quantum Solutions Inc.

{proposalText.split("\n").map((line, i) => (

{line}

))}

Pasted a large document for analysis.

{/* Claude placeholder response */}

Claude

Understood. I've processed the "Quantum Solutions Inc." proposal. Please let me know what specific analysis you'd like me to perform.

{/* Message Input */}

{displayedPrompt}

); } function Scene7({ time }) { // TIMING MAP: // [0.0s - 0.5s] Initial UI elements (chat container, header, user prompt) appear // [0.5s - 1.0s] AI introductory message "Analyzing..." appears // [1.5s - 2.0s] AI message "Key Findings:" appears // [2.5s - 3.0s] AI message for Point 1 (Vague Language) appears // [4.0s - 4.5s] AI message for Point 2 (Missing Cert) appears // [5.5s - 6.0s] AI message for Point 3 (Complex Pricing) appears // [7.0s - 7.5s] AI message for Point 4 (Contextual Nuance) appears // [7.5s - 12.0s] All AI analysis points are visible, narration continues to explain value. // Opacity animations for AI response parts const aiIntroOpacity = useTransform(time, [0.5, 1.0], [0, 1]); const keyFindingsOpacity = useTransform(time, [1.5, 2.0], [0, 1]); const point1Opacity = useTransform(time, [2.5, 3.0], [0, 1]); const point2Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const point3Opacity = useTransform(time, [5.5, 6.0], [0, 1]); const point4Opacity = useTransform(time, [7.0, 7.5], [0, 1]); return (

{/* Chat Header */}

Claude AI

{/* Chat Messages Area */}

{/* User Prompt */}

Analyze this vendor proposal for potential risks and areas for negotiation.

{/* AI Response - Part 1: Initial thought */} Analyzing vendor proposal... {/* AI Response - Part 2: Key Findings */} Key Findings: {/* AI Response - Part 3: Point 1 - Vague Language */} 1. Vague Language: Identified the phrase{" "} "future-proof scalability options available" as imprecise, lacking specific technical or implementation details. {/* AI Response - Part 4: Point 2 - Missing Certifications */} 2. Missing Certification: The RFP explicitly required{" "} ISO 27001 security certification, which is not explicitly mentioned or provided in the proposal. {/* AI Response - Part 5: Point 3 - Complex Pricing */} 3. Complex Pricing: Flagged pricing structure as{" "} overly complex with unclear escalation clauses, making long-term cost prediction difficult. {/* AI Response - Part 6: Point 4 - Contextual Nuance */} 4. Contextual Nuance: Leveraging deep understanding, identified subtle risks and inconsistencies that{" "} simple keyword searches would miss.

{/* Chat Input */}

); } function Scene8({ time }: { time: MotionValue }) { const fullPromptText = "I need to discuss specific ambiguities in their SLA and pricing model with Vendor X. They have a history of being firm on price. Draft a list of probing questions I can ask to clarify these points, and suggest ways to frame my concerns to encourage flexibility, while still maintaining a professional and firm stance. Also, anticipate their likely responses and suggest counter-arguments."; const promptTypingStart = 10.0; const promptTypingEnd = promptTypingStart + fullPromptText.length / 2.5; // ~2.5 chars/sec or 2.5 words/sec, let's use chars for smoother typing const charIndex = useTransform( time, [promptTypingStart, promptTypingEnd], [0, fullPromptText.length], { clamp: true } ); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); return (

{/* Chat Header */}

New Chat with Claude

{/* Chat Messages Area - Empty for new chat */}

How can I assist you today?

Start by typing a prompt below.

{/* Message Input */}

{displayedPrompt} {time.get() > promptTypingStart && time.get() < promptTypingEnd && ( )}

); } function Scene9({ time }) { const promptText = "Generate a negotiation brief for a SaaS vendor contract."; const introText = "Here's a comprehensive negotiation brief:"; const section1Content = ` 1. Specific Probing Questions: - "Can you walk me through a scenario where a service disruption occurs and how your proposed SLA would practically guarantee our uptime?"`; const section2Content = ` 2. Framing Concerns as Opportunities: - Instead of: "Your pricing seems high." Frame as: "We're looking for a partnership that aligns with our long-term budget strategy."`; const section3Content = ` 3. Anticipated Vendor Pushbacks & Counter-Arguments: - Pushback: "Our pricing is standard." Counter: "We understand competitive pricing, but our analysis shows similar services with more flexible terms. Can you elaborate on unique value?"`; const section4Content = ` By using these strategies, you'll walk into conversations feeling confident and prepared. Good luck!`; // Opacity for the AI response bubble itself const aiResponseOpacity = useTransform(time, [1.0, 1.5], [0, 1], { clamp: true }); // Character indices for each section, relative to their start times const charIndexIntro = useTransform(time, [1.5, 2.0], [0, introText.length], { clamp: true }); const charIndex1 = useTransform(time, [2.0, 5.0], [0, section1Content.length], { clamp: true }); const charIndex2 = useTransform(time, [5.0, 7.5], [0, section2Content.length], { clamp: true }); const charIndex3 = useTransform(time, [7.5, 12.5], [0, section3Content.length], { clamp: true }); const charIndex4 = useTransform(time, [12.5, 18.0], [0, section4Content.length], { clamp: true }); // UseStates for displayed text const [displayedIntro, setDisplayedIntro] = useState(""); const [displayedSection1, setDisplayedSection1] = useState(""); const [displayedSection2, setDisplayedSection2] = useState(""); const [displayedSection3, setDisplayedSection3] = useState(""); const [displayedSection4, setDisplayedSection4] = useState(""); // useMotionValueEvent to update displayed text useMotionValueEvent(charIndexIntro, "change", (v) => setDisplayedIntro(introText.slice(0, Math.round(v)))); useMotionValueEvent(charIndex1, "change", (v) => setDisplayedSection1(section1Content.slice(0, Math.round(v)))); useMotionValueEvent(charIndex2, "change", (v) => setDisplayedSection2(section2Content.slice(0, Math.round(v)))); useMotionValueEvent(charIndex3, "change", (v) => setDisplayedSection3(section3Content.slice(0, Math.round(v)))); useMotionValueEvent(charIndex4, "change", (v) => setDisplayedSection4(section4Content.slice(0, Math.round(v)))); return ( {/* Header */}

Procurement AI Assistant

{/* Chat Messages Area */}

{/* User Prompt Message (visible from start) */}

{promptText}

{/* AI Response Message (appears with opacity, then content types) */}

{displayedIntro &&

{displayedIntro}

} {displayedSection1 && (

1. Specific Probing Questions:

{displayedSection1.substring(displayedSection1.indexOf('\n') + 1)}

)} {displayedSection2 && (

2. Framing Concerns as Opportunities:

{displayedSection2.substring(displayedSection2.indexOf('\n') + 1)}

)} {displayedSection3 && (

3. Anticipated Vendor Pushbacks & Counter-Arguments:

{displayedSection3.substring(displayedSection3.indexOf('\n') + 1)}

)} {displayedSection4 && (

{displayedSection4}

)}

{/* Input Bar */}

); } function Scene10({ time }: { time: MotionValue }) { const item1Opacity = useTransform(time, [0.5, 1.0, 2.5, 3.0], [0.7, 1, 1, 0.7]); const item1Scale = useTransform(time, [0.5, 1.0, 2.5, 3.0], [1, 1.03, 1.03, 1]); const item2Opacity = useTransform(time, [3.0, 3.5, 5.0, 5.5], [0.7, 1, 1, 0.7]); const item2Scale = useTransform(time, [3.0, 3.5, 5.0, 5.5], [1, 1.03, 1.03, 1]); const item3Opacity = useTransform(time, [5.5, 6.0, 7.5, 8.0], [0.7, 1, 1, 0.7]); const item3Scale = useTransform(time, [5.5, 6.0, 7.5, 8.0], [1, 1.03, 1.03, 1]); const ctaOpacity = useTransform(time, [8.0, 8.5], [0, 1]); const ctaScale = useTransform(time, [8.0, 8.5, 11.5, 12.0], [0.95, 1, 1, 0.95]); // Subtle pulse towards the end return (

Key Takeaways

Flipped RFP Workflow

AI-Powered Vendor Insights

Negotiation Mastery with Claude

Give Claude AI a try to revolutionize your procurement process!

Like & Subscribe for more AI workflows!

); } // ─── Channel Logo ───────────────────────────────────────────────────────── function ChannelLogo() { return (

Unwrap

); } // ─── Scene Error Boundary ───────────────────────────────────────────────── class SceneErrorBoundary extends React.Component< { children: React.ReactNode; sceneIndex: number }, { error: string | null } > { constructor(props: { children: React.ReactNode; sceneIndex: number }) { super(props); this.state = { error: null }; } static getDerivedStateFromError(err: Error): { error: string } { return { error: err.message }; } componentDidCatch(err: Error) { // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {} } render() { if (this.state.error) { return (

⚠️

Scene {this.props.sceneIndex + 1} rendering error

{this.state.error}

); } return this.props.children; } } // ─── App Wrapper ───────────────────────────────────────────────────────── export default function App() { const { time, sceneIndex } = useVideoState(); return (

{sceneIndex === 0 && } {sceneIndex === 1 && } {sceneIndex === 2 && } {sceneIndex === 3 && } {sceneIndex === 4 && } {sceneIndex === 5 && } {sceneIndex === 6 && } {sceneIndex === 7 && } {sceneIndex === 8 && } {sceneIndex === 9 && } {sceneIndex === 10 && }

); }

How can AI help with Procurement?

Create Your Own Custom Tutorial