index.html•20.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ACE MCP Server - Agentic Context Engineering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="app-header">
<div class="header-content">
<div class="header-left">
<h1>ACE MCP Server</h1>
<span class="subtitle">Agentic Context Engineering for Cursor AI</span>
</div>
<div class="header-right">
<div class="context-selector">
<label for="context-select">Context:</label>
<select id="context-select" class="form-control">
<option value="default">Default Context</option>
</select>
<button class="btn btn--sm btn--primary" id="new-context-btn">+ New</button>
</div>
</div>
</div>
</header>
<!-- Navigation Tabs -->
<nav class="tabs">
<button class="tab-btn active" data-tab="dashboard">Dashboard</button>
<button class="tab-btn" data-tab="playbook">Playbook Browser</button>
<button class="tab-btn" data-tab="tools">MCP Tools</button>
<button class="tab-btn" data-tab="settings">Settings</button>
<button class="tab-btn" data-tab="logs">Activity Logs</button>
<button class="tab-btn" data-tab="docs">Documentation</button>
</nav>
<!-- Main Content Area -->
<main class="main-content">
<!-- Dashboard Tab -->
<div class="tab-content active" id="dashboard-tab">
<div class="dashboard-grid">
<!-- Statistics Cards -->
<div class="card stats-card">
<div class="card__body">
<h3>Total Bullets</h3>
<div class="stat-value" id="stat-total-bullets">0</div>
<div class="stat-label">In current playbook</div>
</div>
</div>
<div class="card stats-card">
<div class="card__body">
<h3>Active Contexts</h3>
<div class="stat-value" id="stat-contexts">1</div>
<div class="stat-label">Context playbooks</div>
</div>
</div>
<div class="card stats-card">
<div class="card__body">
<h3>Helpful Bullets</h3>
<div class="stat-value" id="stat-helpful">0</div>
<div class="stat-label">Marked as helpful</div>
</div>
</div>
<div class="card stats-card">
<div class="card__body">
<h3>Recent Operations</h3>
<div class="stat-value" id="stat-operations">0</div>
<div class="stat-label">In last session</div>
</div>
</div>
<!-- Quick Actions -->
<div class="card quick-actions-card">
<div class="card__body">
<h3>Quick Actions</h3>
<div class="quick-actions">
<button class="btn btn--primary" id="demo-workflow-btn">Run Demo Workflow</button>
<button class="btn btn--secondary" id="export-playbook-btn">Export Playbook</button>
<button class="btn btn--secondary" id="import-playbook-btn">Import Playbook</button>
<button class="btn btn--outline" id="reset-context-btn">Reset Context</button>
</div>
</div>
</div>
<!-- Playbook Overview -->
<div class="card playbook-overview-card">
<div class="card__body">
<h3>Playbook Overview</h3>
<div id="playbook-sections-chart"></div>
</div>
</div>
</div>
<!-- Getting Started Guide -->
<div class="card getting-started">
<div class="card__body">
<h3>Getting Started with ACE Framework</h3>
<ol class="guide-steps">
<li><strong>Generate:</strong> Call <code>ace_generate</code> with your query to create a trajectory using current playbook</li>
<li><strong>Reflect:</strong> Use <code>ace_reflect</code> to analyze the trajectory and extract insights</li>
<li><strong>Curate:</strong> Call <code>ace_curate</code> to synthesize insights into structured delta operations</li>
<li><strong>Update:</strong> Apply changes with <code>ace_update_playbook</code> to grow your context</li>
<li><strong>Iterate:</strong> Repeat the process to continuously improve AI agent understanding</li>
</ol>
<p class="help-text">💡 <strong>Pro Tip:</strong> Use the "Run Demo Workflow" button to see the complete ACE cycle in action!</p>
</div>
</div>
</div>
<!-- Playbook Browser Tab -->
<div class="tab-content" id="playbook-tab">
<div class="playbook-controls">
<div class="search-box">
<input type="text" id="bullet-search" class="form-control" placeholder="Search bullets...">
</div>
<div class="filter-controls">
<select id="section-filter" class="form-control">
<option value="all">All Sections</option>
</select>
<select id="sort-by" class="form-control">
<option value="created_desc">Newest First</option>
<option value="created_asc">Oldest First</option>
<option value="helpful_desc">Most Helpful</option>
<option value="helpful_asc">Least Helpful</option>
</select>
</div>
</div>
<div class="bullets-container" id="bullets-container">
<div class="empty-state">
<div class="empty-icon">📋</div>
<h3>No Bullets Yet</h3>
<p>Your playbook is empty. Use the MCP Tools tab to generate and curate bullets.</p>
</div>
</div>
</div>
<!-- MCP Tools Tab -->
<div class="tab-content" id="tools-tab">
<div class="tools-grid">
<!-- Generate Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>🔧 ace_generate</h3>
<p class="tool-description">Generates a response trajectory using the current context playbook</p>
<div class="form-group">
<label class="form-label">Query</label>
<textarea id="generate-query" class="form-control" rows="3" placeholder="e.g., Create a user authentication endpoint"></textarea>
</div>
<button class="btn btn--primary btn--full-width" id="run-generate-btn">Run Generate</button>
<div class="tool-output" id="generate-output"></div>
</div>
</div>
<!-- Reflect Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>🤔 ace_reflect</h3>
<p class="tool-description">Analyzes a trajectory to extract insights and lessons</p>
<div class="form-group">
<label class="form-label">Trajectory JSON</label>
<textarea id="reflect-trajectory" class="form-control" rows="5" placeholder="Paste trajectory from ace_generate"></textarea>
</div>
<div class="form-group">
<label class="form-label">Max Iterations</label>
<input type="number" id="reflect-iterations" class="form-control" value="5" min="1" max="10">
</div>
<button class="btn btn--primary btn--full-width" id="run-reflect-btn">Run Reflect</button>
<div class="tool-output" id="reflect-output"></div>
</div>
</div>
<!-- Curate Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>✨ ace_curate</h3>
<p class="tool-description">Synthesizes insights into structured delta updates</p>
<div class="form-group">
<label class="form-label">Insights JSON</label>
<textarea id="curate-insights" class="form-control" rows="5" placeholder="Paste insights from ace_reflect"></textarea>
</div>
<button class="btn btn--primary btn--full-width" id="run-curate-btn">Run Curate</button>
<div class="tool-output" id="curate-output"></div>
</div>
</div>
<!-- Update Playbook Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>💾 ace_update_playbook</h3>
<p class="tool-description">Applies delta operations and deduplicates the playbook</p>
<div class="form-group">
<label class="form-label">Delta Operations JSON</label>
<textarea id="update-deltas" class="form-control" rows="5" placeholder="Paste delta operations from ace_curate"></textarea>
</div>
<button class="btn btn--primary btn--full-width" id="run-update-btn">Apply Updates</button>
<div class="tool-output" id="update-output"></div>
</div>
</div>
<!-- Get Playbook Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>📖 ace_get_playbook</h3>
<p class="tool-description">Retrieves the current playbook or filtered sections</p>
<div class="form-group">
<label class="form-label">Section Filter (optional)</label>
<input type="text" id="get-section" class="form-control" placeholder="e.g., Code Generation">
</div>
<button class="btn btn--primary btn--full-width" id="run-get-btn">Get Playbook</button>
<div class="tool-output" id="get-output"></div>
</div>
</div>
<!-- Reset Playbook Tool -->
<div class="card tool-card">
<div class="card__body">
<h3>🔄 ace_reset_playbook</h3>
<p class="tool-description">Clears the playbook for a fresh start</p>
<div class="alert alert-warning">
⚠️ This will delete all bullets in the current context
</div>
<button class="btn btn--outline btn--full-width" id="run-reset-btn">Reset Playbook</button>
<div class="tool-output" id="reset-output"></div>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div class="tab-content" id="settings-tab">
<div class="settings-container">
<div class="card">
<div class="card__body">
<h3>Configuration Settings</h3>
<div class="form-group">
<label class="form-label">Deduplication Threshold</label>
<input type="number" id="setting-dedup-threshold" class="form-control" value="0.85" min="0" max="1" step="0.05">
<small class="form-hint">Cosine similarity threshold for merging similar bullets (0-1)</small>
</div>
<div class="form-group">
<label class="form-label">Max Playbook Size</label>
<input type="number" id="setting-max-bullets" class="form-control" value="1000" min="10" max="10000">
<small class="form-hint">Maximum number of bullets per context</small>
</div>
<div class="form-group">
<label class="form-label">Reflector Max Iterations</label>
<input type="number" id="setting-max-iterations" class="form-control" value="5" min="1" max="10">
<small class="form-hint">Maximum refinement iterations for insights extraction</small>
</div>
<div class="form-group">
<label class="form-label">
<input type="checkbox" id="setting-debug-mode"> Enable Debug Logging
</label>
<small class="form-hint">Show detailed logs in console</small>
</div>
<div class="form-group">
<label class="form-label">
<input type="checkbox" id="setting-auto-dedup"> Auto-deduplicate on Update
</label>
<small class="form-hint">Automatically remove duplicates when applying updates</small>
</div>
<button class="btn btn--primary" id="save-settings-btn">Save Settings</button>
<button class="btn btn--secondary" id="reset-settings-btn">Reset to Defaults</button>
</div>
</div>
<div class="card">
<div class="card__body">
<h3>System Information</h3>
<div class="info-grid">
<div class="info-item">
<span class="info-label">Framework Version:</span>
<span class="info-value">ACE v1.0</span>
</div>
<div class="info-item">
<span class="info-label">Storage Mode:</span>
<span class="info-value">In-Memory (Session Only)</span>
</div>
<div class="info-item">
<span class="info-label">Total Contexts:</span>
<span class="info-value" id="info-contexts">1</span>
</div>
<div class="info-item">
<span class="info-label">Session Start:</span>
<span class="info-value" id="info-session-start">-</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Activity Logs Tab -->
<div class="tab-content" id="logs-tab">
<div class="logs-controls">
<button class="btn btn--sm btn--secondary" id="clear-logs-btn">Clear Logs</button>
<button class="btn btn--sm btn--secondary" id="export-logs-btn">Export Logs</button>
</div>
<div class="logs-container" id="logs-container">
<div class="log-entry log-info">
<span class="log-timestamp">[System]</span>
<span class="log-message">ACE MCP Server initialized successfully</span>
</div>
</div>
</div>
<!-- Documentation Tab -->
<div class="tab-content" id="docs-tab">
<div class="docs-container">
<div class="card">
<div class="card__body">
<h2>ACE Framework Documentation</h2>
<section class="doc-section">
<h3>Overview</h3>
<p>The <strong>Agentic Context Engineering (ACE)</strong> framework is a systematic approach to improving AI agent performance through iterative context refinement. Based on Stanford/SambaNova research, ACE reduces token consumption by 50% while improving task success rates.</p>
</section>
<section class="doc-section">
<h3>Core Components</h3>
<h4>1. Generator</h4>
<p>Creates reasoning trajectories using the current context playbook. It tracks which strategies (bullets) help or hinder task completion.</p>
<ul>
<li>Uses playbook bullets as guidance</li>
<li>Tracks helpful/harmful bullets during execution</li>
<li>Produces structured trajectory output</li>
</ul>
<h4>2. Reflector</h4>
<p>Analyzes trajectories to extract actionable insights. Supports iterative refinement for better quality insights.</p>
<ul>
<li>Identifies patterns in successes/failures</li>
<li>Extracts concrete, actionable lessons</li>
<li>Refines insights over multiple iterations</li>
</ul>
<h4>3. Curator</h4>
<p>Synthesizes insights into structured delta updates. Manages playbook evolution through ADD/UPDATE/DELETE operations.</p>
<ul>
<li>Creates new bullets from insights</li>
<li>Updates existing bullet metadata</li>
<li>Removes outdated or harmful strategies</li>
<li>Performs semantic deduplication</li>
</ul>
</section>
<section class="doc-section">
<h3>MCP Tools Reference</h3>
<div class="tool-ref">
<h4>ace_generate</h4>
<p><strong>Purpose:</strong> Generate response trajectory using current playbook</p>
<p><strong>Input:</strong></p>
<pre>{
"query": string,
"context_id": string (optional)
}</pre>
<p><strong>Output:</strong> Trajectory object with helpful/harmful bullet tags</p>
</div>
<div class="tool-ref">
<h4>ace_reflect</h4>
<p><strong>Purpose:</strong> Analyze trajectory and extract insights</p>
<p><strong>Input:</strong></p>
<pre>{
"trajectory": object,
"max_iterations": number (default: 5)
}</pre>
<p><strong>Output:</strong> Structured insights JSON</p>
</div>
<div class="tool-ref">
<h4>ace_curate</h4>
<p><strong>Purpose:</strong> Synthesize insights into delta operations</p>
<p><strong>Input:</strong></p>
<pre>{
"insights": object,
"current_playbook": object
}</pre>
<p><strong>Output:</strong> Array of delta operations</p>
</div>
<div class="tool-ref">
<h4>ace_update_playbook</h4>
<p><strong>Purpose:</strong> Apply delta updates with deduplication</p>
<p><strong>Input:</strong></p>
<pre>{
"delta_operations": array,
"context_id": string
}</pre>
<p><strong>Output:</strong> Updated playbook statistics</p>
</div>
</section>
<section class="doc-section">
<h3>Best Practices</h3>
<ul>
<li><strong>Start Small:</strong> Begin with a few high-quality bullets</li>
<li><strong>Iterate Often:</strong> Run the ACE cycle frequently to refine context</li>
<li><strong>Review Insights:</strong> Manually review Reflector insights before curation</li>
<li><strong>Monitor Growth:</strong> Keep playbook size manageable (50-200 bullets)</li>
<li><strong>Adjust Threshold:</strong> Fine-tune deduplication threshold for your use case</li>
</ul>
</section>
<section class="doc-section">
<h3>Research Reference</h3>
<p>This implementation is based on the ACE framework from:</p>
<blockquote>
"Agentic Context Engineering: Systematic Optimization of LLM Agents"
<br>Stanford University & SambaNova Systems
<br><a href="#" target="_blank">View Research Paper</a>
</blockquote>
</section>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Modals -->
<div class="modal" id="new-context-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Create New Context</h3>
<button class="modal-close" id="close-modal-btn">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Context Name</label>
<input type="text" id="new-context-name" class="form-control" placeholder="e.g., frontend-dev">
</div>
</div>
<div class="modal-footer">
<button class="btn btn--secondary" id="cancel-context-btn">Cancel</button>
<button class="btn btn--primary" id="create-context-btn">Create</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>