tractatus/public/implementer.html
TheFlow 055c798fdd feat: add About and Values pages with Te Tiriti acknowledgment
- Created /about.html with mission, values, framework overview
- Created /about/values.html with comprehensive values statement
- Included respectful Te Tiriti o Waitangi acknowledgment
- Added CARE Principles for Indigenous Data Governance
- Documented digital sovereignty and Māori data sovereignty
- Updated all page footers with Te Tiriti acknowledgment
- Added links to Te Mana Raraunga and indigenous data resources
- Cache-busted all HTML files for deployment

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-07 23:14:32 +13:00

468 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Implementers | Tractatus AI Safety Framework</title>
<meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
<link rel="stylesheet" href="/css/tailwind.css?v=1759832032">
</head>
<a href="#main-content" class="skip-link">Skip to main content</a>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
<span class="ml-4 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Implementer Path</span>
</div>
<div class="flex items-center space-x-6">
<a href="/researcher.html" class="text-gray-600 hover:text-gray-900">Researcher</a>
<a href="/advocate.html" class="text-gray-600 hover:text-gray-900">Advocate</a>
<a href="/docs.html" class="text-gray-600 hover:text-gray-900">Documentation</a>
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-5xl font-bold text-gray-900 mb-6">
Production-Ready<br>AI Safety
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Integrate Tractatus framework into your AI systems with practical guides, code examples, and battle-tested patterns for real-world deployment.
</p>
<div class="flex justify-center space-x-4">
<a href="#quickstart" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
Quick Start Guide
</a>
<a href="/docs.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold border-2 border-blue-600 hover:bg-blue-50 transition">
View Documentation
</a>
</div>
</div>
</div>
</div>
<!-- Integration Options -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Integration Approaches</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Full Stack Integration -->
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-blue-600">
<h3 class="text-xl font-bold text-gray-900 mb-3">Full Stack</h3>
<p class="text-gray-600 mb-4">
Complete framework integration for new AI-powered applications. All five services active with persistent instruction storage.
</p>
<ul class="space-y-2 text-sm text-gray-600 mb-6">
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Instruction classification & storage</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Cross-reference validation</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Boundary enforcement</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Context pressure monitoring</span>
</li>
</ul>
<div class="text-sm text-gray-500">Best for: New projects, greenfield AI applications</div>
</div>
<!-- Middleware Layer -->
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-indigo-600">
<h3 class="text-xl font-bold text-gray-900 mb-3">Middleware Layer</h3>
<p class="text-gray-600 mb-4">
Add Tractatus validation as middleware in existing AI pipelines. Non-invasive integration with gradual rollout support.
</p>
<ul class="space-y-2 text-sm text-gray-600 mb-6">
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Drop-in Express/Koa middleware</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Monitor mode (log only)</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Gradual enforcement rollout</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Compatible with existing auth</span>
</li>
</ul>
<div class="text-sm text-gray-500">Best for: Existing production AI systems</div>
</div>
<!-- Selective Components -->
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-purple-600">
<h3 class="text-xl font-bold text-gray-900 mb-3">Selective Components</h3>
<p class="text-gray-600 mb-4">
Use individual Tractatus services à la carte. Mix and match components based on your specific safety requirements.
</p>
<ul class="space-y-2 text-sm text-gray-600 mb-6">
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Standalone pressure monitoring</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Boundary checks only</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Classification without storage</span>
</li>
<li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span>Custom component combinations</span>
</li>
</ul>
<div class="text-sm text-gray-500">Best for: Specific safety requirements</div>
</div>
</div>
</div>
<!-- Quick Start -->
<div id="quickstart" class="bg-white py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Quick Start Guide</h2>
<div class="space-y-8">
<!-- Step 1 -->
<div class="border-l-4 border-blue-600 pl-6">
<div class="flex items-center mb-3">
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">1</span>
<h3 class="text-xl font-bold text-gray-900">Installation</h3>
</div>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>npm install @tractatus/framework
# or
yarn add @tractatus/framework</code></pre>
<p class="text-gray-600">Install the framework package and its dependencies (MongoDB for instruction storage).</p>
</div>
<!-- Step 2 -->
<div class="border-l-4 border-blue-600 pl-6">
<div class="flex items-center mb-3">
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">2</span>
<h3 class="text-xl font-bold text-gray-900">Initialize Services</h3>
</div>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>const { TractatusFramework } = require('@tractatus/framework');
const tractatus = new TractatusFramework({
mongoUri: process.env.MONGODB_URI,
verbosity: 'SUMMARY', // or 'VERBOSE', 'SILENT'
components: {
classifier: true,
validator: true,
boundary: true,
pressure: true,
metacognitive: 'selective'
}
});
await tractatus.initialize();</code></pre>
<p class="text-gray-600">Configure and initialize the framework with your preferred settings.</p>
</div>
<!-- Step 3 -->
<div class="border-l-4 border-blue-600 pl-6">
<div class="flex items-center mb-3">
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">3</span>
<h3 class="text-xl font-bold text-gray-900">Classify Instructions</h3>
</div>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>const instruction = "Always use MongoDB on port 27017";
const classification = await tractatus.classify(instruction);
// {
// quadrant: 'SYSTEM',
// persistence: 'HIGH',
// temporal_scope: 'PROJECT',
// verification_required: 'MANDATORY',
// explicitness: 0.85
// }
if (classification.explicitness >= 0.6) {
await tractatus.store(instruction, classification);
}</code></pre>
<p class="text-gray-600">Classify user instructions and store those that meet explicitness threshold.</p>
</div>
<!-- Step 4 -->
<div class="border-l-4 border-blue-600 pl-6">
<div class="flex items-center mb-3">
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">4</span>
<h3 class="text-xl font-bold text-gray-900">Validate Actions</h3>
</div>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>// Before executing AI-generated action
const action = {
type: 'db_config',
parameters: { port: 27027 } // Wrong port!
};
const validation = await tractatus.validate(action);
if (validation.status === 'REJECTED') {
console.error(`Validation failed: ${validation.reason}`);
console.log(`Conflicts with: ${validation.conflicting_instruction}`);
// Do not execute action
} else {
// Safe to proceed
executeAction(action);
}</code></pre>
<p class="text-gray-600">Validate AI actions against stored instructions before execution.</p>
</div>
<!-- Step 5 -->
<div class="border-l-4 border-blue-600 pl-6">
<div class="flex items-center mb-3">
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">5</span>
<h3 class="text-xl font-bold text-gray-900">Enforce Boundaries</h3>
</div>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>// Check if decision crosses Tractatus boundary
const decision = {
domain: 'values',
description: 'Change privacy policy to enable analytics'
};
const boundary = await tractatus.checkBoundary(decision);
if (!boundary.allowed) {
// Requires human decision
await notifyHuman({
decision,
reason: boundary.reason,
alternatives: boundary.ai_can_provide
});
}</code></pre>
<p class="text-gray-600">Enforce boundaries: AI cannot make values decisions without human approval.</p>
</div>
</div>
</div>
</div>
<!-- Code Examples -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Integration Patterns</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Express Middleware</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>app.use(tractatus.middleware({
mode: 'enforce', // or 'monitor'
onViolation: async (req, res, violation) => {
await logViolation(violation);
res.status(403).json({
error: 'Tractatus boundary violation',
reason: violation.reason
});
}
}));</code></pre>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Content Moderation</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>async function moderateContent(content) {
const decision = {
domain: 'values',
action: 'auto_moderate',
content
};
const check = await tractatus.checkBoundary(decision);
if (!check.allowed) {
return { action: 'human_review', alternatives: check.ai_can_provide };
}
}</code></pre>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Pressure Monitoring</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>const pressure = await tractatus.checkPressure({
tokens: 150000,
messages: 45,
errors: 2
});
if (pressure.level === 'CRITICAL') {
await suggestHandoff(pressure.recommendations);
} else if (pressure.level === 'HIGH') {
await increaseVerification();
}</code></pre>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Custom Classification</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>const customClassifier = {
patterns: {
CRITICAL: /security|auth|password/i,
HIGH: /database|config|api/i
},
classify(text) {
for (const [level, pattern] of Object.entries(this.patterns)) {
if (pattern.test(text)) return level;
}
return 'MEDIUM';
}
};</code></pre>
</div>
</div>
</div>
<!-- Resources -->
<div class="bg-blue-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Implementation Resources</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Documentation</h3>
<ul class="space-y-3">
<li>
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Complete API Reference
</a>
</li>
<li>
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Implementation Guide
</a>
</li>
<li>
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Architecture Overview
</a>
</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Examples</h3>
<ul class="space-y-3">
<li>
<a href="/demos/classification-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Classification Demo
</a>
</li>
<li>
<a href="/demos/boundary-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Boundary Enforcement
</a>
</li>
<li>
<a href="/demos/27027-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
→ Real Failure Cases
</a>
</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Support</h3>
<p class="text-gray-600 mb-4">
Get help with implementation, integration, and troubleshooting.
</p>
<ul class="space-y-2 text-sm text-gray-600">
<li>• GitHub Issues & Discussions</li>
<li>• Implementation consulting</li>
<li>• Community Slack channel</li>
</ul>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
<h2 class="text-3xl font-bold mb-4">Ready to Implement?</h2>
<p class="text-xl mb-8 opacity-90">
Join organizations building safer AI systems with architectural guarantees.
</p>
<div class="flex justify-center space-x-4">
<a href="/docs.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
View Full Documentation
</a>
<a href="/researcher.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
Research Background →
</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Preserving human agency through architectural constraints, not aspirational goals.
</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
<ul class="space-y-2 text-sm">
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
<li><a href="/advocate.html" class="hover:text-white">Advocates</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
<li><a href="/" class="hover:text-white">Home</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
<p>© 2025 Tractatus Framework. Licensed under MIT.</p>
</div>
</div>
</footer>
</body>
</html>