|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>OpenCoder - The AI Coding Agent for Terminal</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<section class="mb-20 text-center"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<span class="inline-block px-3 py-1 bg-purple-800 bg-opacity-30 text-purple-400 rounded-full text-sm font-medium mb-4">What's new in v0.15.12</span> |
|
|
<h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">The AI coding agent built for the terminal</h1> |
|
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any editor.</p> |
|
|
<div class="flex gap-4 justify-center"> |
|
|
<a href="https://opencode.ai/docs" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Read Docs</a> |
|
|
<a href="#features" class="px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Explore Features</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 rounded-xl overflow-hidden shadow-2xl max-w-6xl mx-auto border border-gray-800"> |
|
|
<div class="bg-gray-800 p-4"> |
|
|
<div class="flex gap-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
<video autoplay loop muted class="w-full"> |
|
|
<source src="https://opencode.ai/_build/assets/demo.mp4" type="video/mp4"> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">What is OpenCode?</h2> |
|
|
<p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto text-center">OpenCode is an open source agent that helps you write and run code directly from the terminal.</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="terminal" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Native TUI</h3> |
|
|
<p class="text-gray-400">A responsive, native, themeable terminal UI</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="code" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">LSP enabled</h3> |
|
|
<p class="text-gray-400">Automatically loads the right LSPs for the LLM</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="layers" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Multi-session</h3> |
|
|
<p class="text-gray-400">Start multiple agents in parallel on the same project</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="share-2" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Share links</h3> |
|
|
<p class="text-gray-400">Share a link to any session for reference or to debug</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="key" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Claude Pro</h3> |
|
|
<p class="text-gray-400">Log in with Anthropic to use your Claude Pro or Max account</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="cpu" class="text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Any model</h3> |
|
|
<p class="text-gray-400">75+ LLM providers through Models.dev, including local models</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20 py-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">The open source AI coding agent</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-purple-400 mb-2">26K</div> |
|
|
<p class="text-gray-400">GitHub Stars</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-purple-400 mb-2">188</div> |
|
|
<p class="text-gray-400">Contributors</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl font-bold text-purple-400 mb-2">200K</div> |
|
|
<p class="text-gray-400">Monthly Devs</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-12"> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-3xl font-bold mb-6">Built for privacy first</h2> |
|
|
<p class="text-xl text-gray-300 mb-6">OpenCode does not store any of your code or context data, so that it can operate in privacy sensitive environments.</p> |
|
|
<a href="https://opencode.ai/docs/enterprise/" class="inline-block px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Learn about privacy</a> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://opencode.ai/_build/assets/dock-DjAVB4vb.png" alt="Privacy focused" class="rounded-xl shadow-2xl"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-20"> |
|
|
<div class="bg-gray-800 rounded-2xl p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row gap-12"> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-3xl font-bold mb-6">FAQ</h2> |
|
|
<h3 class="text-xl font-semibold mb-4">Access reliable optimized models for coding agents</h3> |
|
|
<p class="text-gray-300 mb-6">Zen gives you access to a handpicked set of AI models that OpenCode has tested and benchmarked specifically for coding agents. No need to worry about inconsistent performance and quality across providers, use validated models that work.</p> |
|
|
<a href="https://opencode.ai/zen" class="inline-block px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Learn about Zen</a> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex items-center justify-center"> |
|
|
<div class="terminal-mockup"> |
|
|
<div class="terminal-header"> |
|
|
<div class="terminal-buttons"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
<div class="terminal-title">opencode --model=zen</div> |
|
|
</div> |
|
|
<div class="terminal-body"> |
|
|
<span class="text-green-400">$</span> <span class="text-gray-300">How can I implement a binary search in Python?</span> |
|
|
<div class="terminal-output"> |
|
|
<div class="text-gray-400"># Here's an implementation of binary search in Python:</div> |
|
|
<div class="text-blue-400">def</div> <div class="text-yellow-300">binary_search</div>(arr, target): |
|
|
<div class="ml-4">...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="text-center py-16 bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl"> |
|
|
<h2 class="text-3xl font-bold mb-6">OpenCode will be available on desktop soon</h2> |
|
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join the waitlist for early access.</p> |
|
|
<button class="px-8 py-4 bg-white text-gray-900 hover:bg-gray-200 rounded-lg font-bold text-lg transition-colors">Join Waitlist</button> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
VANTA.NET({ |
|
|
el: "body", |
|
|
color: 0x4c1d95, |
|
|
backgroundColor: 0x111827, |
|
|
points: 12, |
|
|
maxDistance: 20, |
|
|
spacing: 15 |
|
|
}); |
|
|
</script> |
|
|
<script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
