AgentOp
Sign In Get Started

Preview: Contract Plain-Language Explainer

Paste any contract — employment, lease, NDA, freelance, or partnership — and get an instant plain-language breakdown. Detects clauses present and missing, flags HIGH and MEDIUM risks for your role, explains every clause in one clear sentence with a direct quote from the contract, and generates targeted questions to bring to your lawyer. Runs entirely in your browser using a local AI model. Nothing leaves your device.

← Back to List

Preview Mode

This is a preview with sample data. The template uses placeholders like which will be replaced with actual agent data.

Template Preview

Template Metadata

Slug
contract-plain-language-explainer
Created By
ozzo
Created
Feb 28, 2026
Usage Count
1

Tags

contract legal plain-language risk employment NDA lease privacy-first local-AI clause-analysis

Code Statistics

HTML Lines
166
CSS Lines
0
JS Lines
0
Python Lines
0

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ agent_name }}</title>
    <style>{{ css_code }}</style>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
</head>
<body>

<!-- Fixed WebLLM bar spacer (bar itself injected by AgentHTMLGenerator) -->
<div style="height: 140px;"></div>

<div class="dashboard">

    <!-- ═══════════════════════════════ SIDEBAR ═══════════════════════════════ -->
    <div class="sidebar">

        <div class="agent-header">
            <div class="agent-icon">⚖️</div>
            <div>
                <h2 style="margin:0; font-size:1.1rem; color:var(--text-heading);">{{ agent_name }}</h2>
                <p style="margin:0; color:var(--text-muted); font-size:0.8rem;">Legal · Privacy-first</p>
            </div>
        </div>

        <div class="privacy-badge">
            🔒 100% Local — Nothing leaves your browser
        </div>

        <!-- Contract options -->
        <div class="form-group">
            <label class="form-label">Contract Type</label>
            <select id="contract-type" class="form-select">
                <option value="employment">Employment Contract</option>
                <option value="lease">Lease / Rental Agreement</option>
                <option value="nda">NDA / Confidentiality</option>
                <option value="freelance">Freelance / Services Agreement</option>
                <option value="partnership">Partnership / Shareholder</option>
                <option value="purchase">Purchase / Sale Agreement</option>
                <option value="other">Other</option>
            </select>
        </div>

        <div class="form-group">
            <label class="form-label">Your Role</label>
            <select id="your-role" class="form-select">
                <option value="employee">Employee / Candidate</option>
                <option value="employer">Employer / Hiring Manager</option>
                <option value="tenant">Tenant</option>
                <option value="landlord">Landlord</option>
                <option value="contractor">Freelancer / Contractor</option>
                <option value="client">Client / Buyer</option>
                <option value="signer">Other Signing Party</option>
            </select>
        </div>

        <div class="form-group">
            <label class="form-label">Jurisdiction <span style="font-weight:400; color:var(--text-muted);">(optional)</span></label>
            <input type="text" id="jurisdiction" class="form-input"
                   placeholder="e.g. Netherlands, EU, US-CA, UK">
        </div>

        <div class="form-group">
            <label class="form-label">Paste Contract Text</label>
            <textarea id="contract-input" class="query-input"
                placeholder="Paste a clause, section, or full contract here...

Example:
'The Employee agrees not to compete with the Company for 24 months after termination within the European Union...'"
                rows="9"></textarea>
            <div id="char-counter" class="char-counter">0 characters</div>
        </div>

        <button class="analyze-button" id="analyzeBtn" onclick="processQuery()">
            <span>⚖️</span>
            <span>Analyze Contract</span>
        </button>

        <p style="font-size:0.75rem; color:var(--text-muted); text-align:center; margin: 0.5rem 0 1rem 0;">
            Ctrl+Enter to submit
        </p>

        <!-- Sample clauses -->
        <div class="sample-queries">
            <h4 style="margin: 0 0 0.6rem 0; font-size:0.875rem; color:var(--text-heading);">
                Try a sample clause:
            </h4>
            <div class="sample-query" onclick="fillSample('non-compete')">🔒 Non-compete clause</div>
            <div class="sample-query" onclick="fillSample('termination')">📋 Termination clause</div>
            <div class="sample-query" onclick="fillSample('ip-ownership')">💡 IP ownership clause</div>
            <div class="sample-query" onclick="fillSample('liability')">⚠️ Liability cap clause</div>
        </div>

        <!-- Pyodide status -->
        <div id="pyodide-status" class="status-badge status-loading">
            ⏳ Loading Python environment...
        </div>
    </div>

    <!-- ═══════════════════════════════ MAIN CONTENT ═══════════════════════════════ -->
    <div class="main-content">

        <div class="agent-header">
            <div>
                <h1 style="margin:0; font-size:1.5rem; color:var(--text-heading);">Contract Analysis</h1>
                <p style="margin:0.25rem 0 0 0; font-size:0.85rem; color:var(--text-muted);">
                    Plain-language breakdown · Risk flags · Lawyer questions
                </p>
            </div>
            <div style="margin-left:auto; display:flex; align-items:center; gap:0.5rem;">
                <button class="btn-clear" id="clearBtn" onclick="clearResults()" style="display:none;">
                    🗑 Clear
                </button>
            </div>
        </div>

        <!-- Results container -->
        <div class="result-area">
            <div id="results-container" class="result-content">

                <!-- Empty state -->
                <div id="empty-state" style="text-align:center; color:var(--text-muted); padding: 3.5rem 1rem;">
                    <div style="font-size:3.5rem; margin-bottom:1rem;">⚖️</div>
                    <h3 style="margin:0 0 0.5rem 0; color:var(--text-heading);">Ready to Analyze</h3>
                    <p style="margin:0; max-width:380px; margin: 0 auto;">
                        Paste any contract clause or section into the left panel, select your role, and click <strong>Analyze Contract</strong>.
                    </p>
                    <div style="margin-top:1.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;">
                        <div class="feature-pill">📋 Clause breakdown</div>
                        <div class="feature-pill">🚨 Risk flags</div>
                        <div class="feature-pill">💬 Lawyer questions</div>
                        <div class="feature-pill">🔒 Stays in browser</div>
                    </div>
                </div>

            </div>

            <!-- Loading indicator -->
            <div id="loading-indicator" class="loading-indicator">
                <div class="loading-spinner"></div>
                <span id="loading-text">Analyzing contract...</span>
            </div>
        </div>

        <!-- Disclaimer -->
        <div class="disclaimer-bar">
            ⚠️ <strong>Not legal advice.</strong> This tool explains contract language in plain terms.
            Always consult a qualified lawyer before signing any agreement.
        </div>
    </div>

</div>

<!-- Python code (injected by AgentHTMLGenerator via unified_agent.mustache merge) -->
<script type="text/python" id="python-code">
{{ python_code }}
</script>

<script>
{{ js_code }}
</script>

</body>
</html>