+
-
-
- 
- 
- The AI coding agent built for the terminal
-
-
+
+
+
+
+
+
+
+ curl
+
+
+ npm
+
+
+ bun
+
+
+ brew
+
+
+ paru
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
-
-
- -
- Native TUI A responsive, native, themeable terminal UI
-
- -
- LSP enabled Automatically loads the right LSPs for the LLM
-
- -
- opencode zen A curated list of models provided by opencode{" "}
-
-
- -
- Multi-session Start multiple agents in parallel on the same project
-
- -
- Shareable links Share a link to any sessions for reference or to debug
-
- -
- Claude Pro Log in with Anthropic to use your Claude Pro or Max account
-
- -
- Use any model Supports 75+ LLM providers through{" "}
- Models.dev, including local models
-
-
-
+
+
+
What is OpenCode?
+
OpenCode is an open source agent that helps you write and run code directly from the terminal.
+
+ -
+ [*]
+
+ Native TUI A responsive, native, themeable terminal UI
+
+
+ -
+ [*]
+
+ LSP enabled Automatically loads the right LSPs for the LLM
+
+
+ -
+ [*]
+
+ Multi-session Start multiple agents in parallel on the same project
+
+
+ -
+ [*]
+
+ Share links Share a link to any session for reference or to debug
+
+
+ -
+ [*]
+
+ Claude Pro Log in with Anthropic to use your Claude Pro or Max account
+
+
+ -
+ [*]
+
+ Any model 75+ LLM providers through Models.dev, including local models
+
+
+ -
+ [*]
+
+ Any editor OpenCode runs in your terminal, pair it with any IDE
+
+
+
+
-
-
-
npm
-
-
-
-
bun
-
-
-
-
homebrew
-
-
-
-
paru
-
-
-
+
+
+
The open source AI coding agent
+
+
[*]
+
+ With over 26,000 GitHub
+ stars, 188 contributors, and almost{" "}
+ 3,000 commits, OpenCode is used and trusted
+ by over 200,000{" "}
+ developers every month.
+
+
-
-
- opencode TUI with the tokyonight theme
-
- 
-
-
-
+
+
+
+
-
-
-
-
+
Fig 1. 26K GitHub Stars
+
+
+
+
+
+
+
+
+
Fig 2. 188 Contributors
+
+
+
+
+
+
+
+
+
Fig 3. 200K Monthly Devs
+
+
+
+
+
+
+
+
+
Built for privacy first
+
+
[*]
+
+
+ OpenCode does not store any of your code or context data, so
+ that it can operate in privacy sensitive
+ environments. Learn more about privacy
+ and enterprise.
+
+
+
+
+
+
+
FAQ
+
+
+ -
+
+ OpenCode is an open source agent that helps you write and run
+ code directly from the terminal. You can
+ pair OpenCode with any AI model, and because it’s
+ terminal-based you can pair it with your preferred
+ code editor.
+
+
+ -
+
+ The easiest way to get started is to read the intro.
+
+
+ -
+
+ Not necessarily, but probably. You’ll need an AI subscription
+ if you want to connect OpenCode to a
+ paid provider, although you can work with{" "}
+
+ local models
+ {" "}
+ for free. While we encourage users to use Zen, OpenCode works with all popular
+ providers such as OpenAI, Anthropic, xAI etc.
+
+
+ -
+
+ Yes, for now. We are actively working on a desktop app. Join
+ the waitlist for early access.
+
+
+ -
+
+ OpenCode is 100% free to use. Any additional costs will come
+ from your subscription to a model
+ provider. While OpenCode works with any model provider, we
+ recommend using Zen.
+
+
+ -
+
+ Your data and information is only stored when you create
+ sharable links in OpenCode. Learn more about{" "}
+ share pages.
+
+
+ -
+
+ Yes, OpenCode is fully open source. The source code is public
+ on{" "}
+
+ GitHub
+ {" "}
+ under the{" "}
+
+ MIT License
+
+ , meaning anyone can use, modify, or contribute to its
+ development. Anyone from the community can file
+ issues, submit pull requests, and extend functionality.
+
+
+
+
+
+
+
+
Access reliable optimized models for coding
+ agents
+
+ 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.
+
+
+
+ Learn about Zen
+
+
+
+
+
+
+
+
)
}
diff --git a/packages/console/app/src/routes/temp.tsx b/packages/console/app/src/routes/temp.tsx
new file mode 100644
index 00000000..3d663c27
--- /dev/null
+++ b/packages/console/app/src/routes/temp.tsx
@@ -0,0 +1,183 @@
+import "./index.css"
+import { Title } from "@solidjs/meta"
+import { onCleanup, onMount } from "solid-js"
+import logoLight from "../asset/logo-ornate-light.svg"
+import logoDark from "../asset/logo-ornate-dark.svg"
+import IMG_SPLASH from "../asset/lander/screenshot-splash.png"
+import { IconCopy, IconCheck } from "../component/icon"
+import { createAsync, query } from "@solidjs/router"
+import { getActor } from "~/context/auth"
+import { withActor } from "~/context/auth.withActor"
+import { Account } from "@opencode/console-core/account.js"
+
+function CopyStatus() {
+ return (
+
+
+
+
+ )
+}
+
+const defaultWorkspace = query(async () => {
+ "use server"
+ const actor = await getActor()
+ if (actor.type === "account") {
+ const workspaces = await withActor(() => Account.workspaces())
+ return workspaces[0].id
+ }
+}, "defaultWorkspace")
+
+export default function Home() {
+ const workspace = createAsync(() => defaultWorkspace())
+ onMount(() => {
+ const commands = document.querySelectorAll("[data-copy]")
+ for (const button of commands) {
+ const callback = () => {
+ const text = button.textContent
+ if (text) {
+ navigator.clipboard.writeText(text)
+ button.setAttribute("data-copied", "")
+ setTimeout(() => {
+ button.removeAttribute("data-copied")
+ }, 1500)
+ }
+ }
+ button.addEventListener("click", callback)
+ onCleanup(() => {
+ button.removeEventListener("click", callback)
+ })
+ }
+ })
+
+ return (
+
+ opencode | AI coding agent built for the terminal
+
+
+
+
+
+ The AI coding agent built for the terminal
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ Native TUI A responsive, native, themeable terminal UI
+
+ -
+ LSP enabled Automatically loads the right LSPs for the LLM
+
+ -
+ opencode zen A curated list of models provided by opencode{" "}
+
+
+ -
+ Multi-session Start multiple agents in parallel on the same project
+
+ -
+ Shareable links Share a link to any sessions for reference or to debug
+
+ -
+ Claude Pro Log in with Anthropic to use your Claude Pro or Max account
+
+ -
+ Use any model Supports 75+ LLM providers through{" "}
+ Models.dev, including local models
+
+
+
+
+
+
+
npm
+
+
+
+
bun
+
+
+
+
homebrew
+
+
+
+
paru
+
+
+
+
+
+
+ opencode TUI with the tokyonight theme
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/console/app/src/routes/zen/index.css b/packages/console/app/src/routes/zen/index.css
new file mode 100644
index 00000000..3856bd14
--- /dev/null
+++ b/packages/console/app/src/routes/zen/index.css
@@ -0,0 +1,781 @@
+::selection {
+ background: var(--color-background-interactive);
+ color: var(--color-text-strong);
+
+ @media (prefers-color-scheme: dark) {
+ background: var(--color-background-interactive);
+ color: var(--color-text-inverted);
+ }
+}
+
+[data-page="zen"] {
+ --color-background: hsl(0, 20%, 99%);
+ --color-background-weak: hsl(0, 8%, 97%);
+ --color-background-strong: hsl(0, 5%, 12%);
+ --color-background-strong-hover: hsl(0, 5%, 18%);
+ --color-background-interactive: hsl(62, 84%, 88%);
+ --color-background-interactive-weaker: hsl(64, 74%, 95%);
+
+ --color-text: hsl(0, 1%, 39%);
+ --color-text-weak: hsl(0, 1%, 74%);
+ --color-text-weaker: hsl(30, 2%, 81%);
+ --color-text-strong: hsl(0, 5%, 12%);
+ --color-text-inverted: hsl(0, 20%, 99%);
+
+ --color-border: hsl(30, 2%, 81%);
+ --color-border-weak: hsl(0, 1%, 85%);
+
+ --color-icon: hsl(0, 1%, 55%);
+}
+
+[data-page="zen"] {
+ @media (prefers-color-scheme: dark) {
+ --color-background: hsl(0, 9%, 7%);
+ --color-background-weak: hsl(0, 6%, 10%);
+ --color-background-strong: hsl(0, 15%, 94%);
+ --color-background-strong-hover: hsl(0, 15%, 97%);
+ --color-background-interactive: hsl(62, 100%, 90%);
+ --color-background-interactive-weaker: hsl(60, 20%, 8%);
+
+ --color-text: hsl(0, 4%, 71%);
+ --color-text-weak: hsl(0, 2%, 49%);
+ --color-text-weaker: hsl(0, 3%, 28%);
+ --color-text-strong: hsl(0, 15%, 94%);
+ --color-text-inverted: hsl(0, 9%, 7%);
+
+ --color-border: hsl(0, 3%, 28%);
+ --color-border-weak: hsl(0, 4%, 23%);
+
+ --color-icon: hsl(10, 3%, 43%);
+ }
+}
+
+[data-page="zen"] {
+ background: var(--color-background);
+ --padding: 5rem;
+ --vertical-padding: 4rem;
+ border-top: 1px solid var(--color-border-weak);
+
+ @media (max-width: 60rem) {
+ --padding: 1.5rem;
+ --vertical-padding: 3rem;
+ }
+
+ display: flex;
+ gap: var(--vertical-padding);
+ flex-direction: column;
+ font-family: var(--font-mono);
+ color: var(--color-text);
+ padding-bottom: 5rem;
+
+ a {
+ color: var(--color-text-strong);
+ text-decoration: underline;
+ text-underline-offset: var(--space-1);
+ text-decoration-thickness: 1px;
+ }
+
+ p {
+ line-height: 200%;
+ }
+
+ @media (max-width: 60rem) {
+ font-size: 15px;
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ transition: background-color 5000000s ease-in-out 0s;
+ }
+
+
+ [data-component="container"] {
+ max-width: 67.5rem;
+ margin: 0 auto;
+ border: 1px solid var(--color-border-weak);
+ border-top: none;
+
+ @media (max-width: 65rem) {
+ border: none;
+ }
+ }
+
+ [data-component="content"] {
+ }
+
+ [data-component="top"] {
+ padding: 24px var(--padding);
+ height: 80px;
+ position: sticky;
+ top: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--color-background);
+ border-bottom: 1px solid var(--color-border-weak);
+
+ z-index: 10;
+
+ img {
+ height: 34px;
+ width: auto;
+ }
+
+ [data-component="nav-desktop"] {
+ ul {
+ display: flex;
+ justify-content: space-between;
+ gap: 48px;
+ li {
+ display: inline-block;
+ a {
+ text-decoration: none;
+ span {
+ color: var(--color-text-weak);
+ }
+ }
+ a:hover {
+ text-decoration: underline;
+ text-underline-offset: var(--space-1);
+ text-decoration-thickness: 1px;
+ }
+ }
+ }
+
+ @media (max-width: 40rem) {
+ display: none;
+ }
+ }
+
+ [data-component="nav-mobile-toggle"] {
+ border: none;
+ background: none;
+ outline: none;
+ height: 40px;
+ width: 40px;
+ cursor: pointer;
+ }
+
+ [data-component="nav-mobile-toggle"]:hover {
+ background: var(--color-background-weak);
+ }
+
+ [data-component="nav-mobile"] {
+ display: none;
+
+ @media (max-width: 40rem) {
+ display: block;
+
+ [data-component="nav-mobile-icon"] {
+ cursor: pointer;
+ height: 40px;
+ width: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ [data-component="nav-mobile-menu-list"] {
+ position: fixed;
+ background: var(--color-background);
+ top: 80px;
+ left: 0;
+ right: 0;
+ height: 100vh;
+
+ ul {
+ list-style: none;
+ padding: 20px 0;
+
+ li {
+ a {
+ text-decoration: none;
+ padding: 20px;
+ display: block;
+
+ span {
+ color: var(--color-text-weak);
+ }
+ }
+
+ a:hover {
+ background: var(--color-background-weak);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ [data-slot="logo dark"] {
+ display: none;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ [data-slot="logo light"] {
+ display: none;
+ }
+ [data-slot="logo dark"] {
+ display: block;
+ }
+ }
+ }
+
+ [data-component="hero"] {
+ display: flex;
+ flex-direction: column;
+ padding: calc(var(--vertical-padding)*2) var(--padding);
+
+ [data-slot="zen logo dark"] {
+ display: none;
+ }
+
+ @media (max-width: 30rem) {
+ padding: var(--vertical-padding) var(--padding)
+ }
+
+ @media (prefers-color-scheme: dark) {
+ [data-slot="zen logo light"] {
+ display: none;
+ }
+ [data-slot="zen logo dark"] {
+ display: block;
+ }
+ }
+ }
+
+ [data-slot="hero-copy"] {
+ img {
+ margin-bottom: 24px;
+ }
+
+ strong {
+ font-size: 28px;
+ color: var(--color-text-strong);
+ font-weight: 500;
+ margin-bottom: 16px;
+ display: block;
+
+ @media (max-width: 60rem) {
+ font-size: 22px;
+ }
+ }
+
+
+
+ p {
+ color: var(--color-text);
+ margin-bottom: 24px;
+ max-width: 82%;
+
+ @media (max-width: 50rem) {
+ max-width: 100%;
+ }
+ }
+
+ a {
+ background: var(--color-background-strong);
+ padding: 8px 12px 8px 20px;
+ color: var(--color-text-inverted);
+ border: none;
+ border-radius: 4px;
+ font-weight: 500;
+ cursor: pointer;
+ margin-bottom: 56px;
+ display: flex;
+ width: fit-content;
+ gap: 12px;
+ text-decoration: none;
+ }
+
+ a:hover {
+ background: var(--color-background-strong-hover);
+ }
+ }
+ [data-slot="model-logos"] {
+ display: flex;
+ gap: 24px;
+ margin-bottom: 56px;
+
+ svg {
+ color: var(--color-background-strong);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ svg {
+ color: var(--color-background-strong);
+ }
+ }
+ }
+
+ [data-slot="pricing-copy"] {
+ strong {
+ color: var(--color-text-strong);
+ font-weight: 500;
+ }
+
+ p:first-child {
+ margin-bottom: 24px;
+ color: var(--color-text);
+ display: flex;
+ gap: 8px;
+
+ @media (max-width: 40rem) {
+ flex-direction: column;
+ gap: 4px;
+ }
+ }
+ }
+
+ [data-component="comparison"] {
+ border-top: 1px solid var(--color-border-weak);
+ video {
+ width: 100%;
+ height: auto;
+ max-width: none;
+ max-height: none;
+ display: block;
+ }
+ }
+
+ [data-slot="section-title"] {
+ margin-bottom: 24px;
+
+ h3 {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--color-text-strong);
+ margin-bottom: 12px;
+ }
+
+ p {
+ margin-bottom: 12px;
+ color: var(--color-text);
+ }
+ }
+
+ [data-component="problem"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+ color: var(--color-text);
+
+ p {
+ margin-bottom: 24px;
+ }
+
+ ul {
+ padding: 0;
+ li {
+ list-style: none;
+ margin-bottom: 16px;
+ display: flex;
+ gap: 12px;
+
+ span {
+ color: var(--color-icon);
+ }
+ }
+ li:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ [data-component="how"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+ color: var(--color-text);
+
+ ul {
+ padding: 0;
+ li {
+ list-style: none;
+ margin-bottom: 16px;
+ display: flex;
+ gap: 12px;
+
+ span {
+ color: var(--color-icon);
+ }
+ strong {
+ font-weight: 500;
+ color: var(--color-text-strong);
+ }
+ }
+ li:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ [data-component="privacy"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+ color: var(--color-text);
+
+ [data-slot="privacy-title"] {
+ h3 {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--color-text);
+ margin-bottom: 12px;
+ }
+
+ div {
+ display: flex;
+ gap: 12px;
+ }
+
+ p {
+ }
+
+ span {
+ color: var(--color-icon);
+ line-height: 200%;
+ }
+
+ div {
+ display: flex;
+ gap: 12px;
+ }
+ }
+ }
+
+ [data-component="email"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+ color: var(--color-text);
+
+ [data-slot="dock"] {
+ border-radius: 14px;
+ border: 0.5px solid rgba(176, 176, 176, 0.6);
+ background: #f2f1f0;
+ margin-bottom: 32px;
+ overflow: hidden;
+ height: 64px;
+ width: 185px;
+ box-shadow:
+ 0 6px 80px 0 rgba(0, 0, 0, 0.05),
+ 0 2.507px 33.422px 0 rgba(0, 0, 0, 0.04),
+ 0 1.34px 17.869px 0 rgba(0, 0, 0, 0.03),
+ 0 0.751px 10.017px 0 rgba(0, 0, 0, 0.03),
+ 0 0.399px 5.32px 0 rgba(0, 0, 0, 0.02),
+ 0 0.166px 2.214px 0 rgba(0, 0, 0, 0.01);
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ background: #312d2d;
+ }
+ }
+
+ [data-slot="form"] {
+ position: relative;
+
+ input {
+ background: var(--color-background-weak);
+ border-radius: 6px;
+ border: 1px solid var(--color-border-weak);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ width: 100%;
+
+ @media (max-width: 30rem) {
+ padding-bottom: 80px;
+ }
+ }
+
+ input:focus {
+ background: var(--color-background-interactive-weaker);
+ outline: none;
+ border: none;
+ color: var(--color-text-strong);
+
+ border: 1px solid var(--color-background-strong); /* Tailwind blue-600 as example */
+
+ /* Tailwind-style ring */
+ box-shadow: 0 0 0 3px var(--color-background-interactive);
+ /* mimics "ring-2 ring-blue-600/50" */
+ }
+
+ button {
+ position: absolute;
+ height: 40px;
+ right: 12px;
+ background: var(--color-background-strong);
+ padding: 4px 20px;
+ color: var(--color-text-inverted);
+ border-radius: 4px;
+ font-weight: 500;
+ cursor: pointer;
+ top: 50%;
+ margin-top: -20px;
+
+ @media (max-width: 30rem) {
+ left: 20px;
+ right: 20px;
+ bottom: 20px;
+ top: auto;
+ }
+ }
+ }
+ }
+
+ [data-component="faq"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+
+ ul {
+ padding: 0;
+
+ li {
+ list-style: none;
+ margin-bottom: 24px;
+ line-height: 200%;
+ }
+ }
+
+ [data-slot="faq-question"] {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 8px;
+ color: var(--color-text-strong);
+ font-weight: 500;
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 0;
+
+ [data-slot="faq-icon-plus"] {
+ flex-shrink: 0;
+ [data-closed] & {
+ display: block;
+ }
+ [data-expanded] & {
+ display: none;
+ }
+ }
+ [data-slot="faq-icon-minus"] {
+ flex-shrink: 0;
+ [data-closed] & {
+ display: none;
+ }
+ [data-expanded] & {
+ display: block;
+ }
+ }
+ [data-slot="faq-question-text"] {
+ flex-grow: 1;
+ text-align: left;
+ }
+ }
+
+ [data-slot="faq-answer"] {
+ margin-left: 40px;
+ margin-bottom: 32px;
+ }
+ }
+
+ [data-component="testimonials"] {
+ border-top: 1px solid var(--color-border-weak);
+ padding: var(--vertical-padding) var(--padding);
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ @media (max-width: 60rem) {
+ --padding: 1rem;
+ --vertical-padding: 1rem;
+ }
+
+ a {
+ text-decoration: none;
+ }
+ [data-slot="testimonial"] {
+ background: var(--color-background-weak);
+ border-radius: 6px;
+ border: 1px solid var(--color-border-weak);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ @media (max-width: 60rem) {
+ flex-direction: column-reverse;
+ gap: 24px;
+ padding: 24px 48px;
+ }
+
+ [data-slot="name"] {
+ display: flex;
+ gap: 16px;
+
+ strong {
+ font-weight: 500;
+ }
+
+ span {
+ color: var(--color-text);
+ }
+
+ @media (max-width: 60rem) {
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ span {
+ display: inline-block;
+ }
+
+ img {
+ height: 24px;
+ width: 24px;
+ border-radius: 24px;
+ }
+ }
+
+ [data-slot="quote"] {
+ margin-left: 40px;
+
+ @media (max-width: 60rem) {
+ margin-left: 0;
+ }
+ span {
+ color: var(--color-text);
+ text-decoration: none;
+ }
+ }
+ }
+
+ [data-slot="button"] {
+ all: unset;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ color: var(--color-text);
+ gap: var(--space-2-5);
+ font-size: 1rem;
+
+ @media (max-width: 24rem) {
+ font-size: 0.875rem;
+ }
+
+ strong {
+ color: var(--color-text-strong);
+ font-weight: 500;
+ }
+
+ @media (max-width: 40rem) {
+ justify-content: flex-start;
+ }
+
+ @media (max-width: 30rem) {
+ justify-content: center;
+ }
+ }
+ }
+
+ [data-component="copy-status"] {
+ @media (max-width: 38rem) {
+ display: none;
+ }
+
+ [data-slot="copy"] {
+ display: block;
+ width: var(--space-4);
+ height: var(--space-4);
+ color: var(--color-text-weaker);
+
+ [data-copied] & {
+ display: none;
+ }
+ }
+
+ [data-slot="check"] {
+ display: none;
+ width: var(--space-4);
+ height: var(--space-4);
+ color: var(--color-text-strong);
+
+ [data-copied] & {
+ display: block;
+ }
+ }
+ }
+
+ [data-component="footer"] {
+ border-top: 1px solid var(--color-border-weak);
+ display: flex;
+ flex-direction: row;
+
+ @media (max-width: 65rem) {
+ border-bottom: 1px solid var(--color-border-weak);
+ }
+
+
+ [data-slot="cell"] {
+ flex: 1;
+ text-align: center;
+
+
+ a {
+ text-decoration: none;
+ padding: 2rem 0;
+ width: 100%;
+ display: block;
+
+ span {
+ color: var(--color-text-weak);
+
+ @media (max-width: 40rem) {
+ display: none;
+ }
+
+ }
+ }
+
+ a:hover {
+ background: var(--color-background-weak);
+ text-decoration: underline;
+ text-underline-offset: var(--space-1);
+ text-decoration-thickness: 1px;
+ }
+ }
+
+ [data-slot="cell"] + [data-slot="cell"] {
+ border-left: 1px solid var(--color-border-weak);
+ }
+
+ /* Mobile: third column on its own row */
+ @media (max-width: 25rem) {
+ flex-wrap: wrap;
+
+ [data-slot="cell"] {
+ flex: 1 0 100%;
+ border-left: none;
+ border-top: 1px solid var(--color-border-weak);
+ }
+
+ [data-slot="cell"]:nth-child(1) {
+ border-top: none;
+ }
+ }
+ }
+
+ [data-component="legal"] {
+ color: var(--color-text-weak);
+ text-align: center;
+
+ a {
+ color: var(--color-text-weak);
+ text-decoration: none;
+ }
+ }
+}
diff --git a/packages/console/app/src/routes/zen/index.tsx b/packages/console/app/src/routes/zen/index.tsx
new file mode 100644
index 00000000..a676471d
--- /dev/null
+++ b/packages/console/app/src/routes/zen/index.tsx
@@ -0,0 +1,339 @@
+import "./index.css"
+import { Title, Meta, Link } from "@solidjs/meta"
+import { HttpHeader } from "@solidjs/start"
+import zenLogoLight from "../../asset/zen-ornate-light.svg"
+import zenLogoDark from "../../asset/zen-ornate-dark.svg"
+import compareVideo from "../../asset/lander/opencode-comparison-min.mp4"
+import compareVideoPoster from "../../asset/lander/opencode-comparison-poster.png"
+import avatarDax from "../../asset/lander/avatar-dax.png"
+import avatarJay from "../../asset/lander/avatar-Jay.png"
+import avatarFrank from "../../asset/lander/avatar-Frank.png"
+import avatarAdam from "../../asset/lander/avatar-Adam.png"
+import avatarDavid from "../../asset/lander/avatar-David.png"
+import { A, createAsync, query } from "@solidjs/router"
+import { getActor } from "~/context/auth"
+import { withActor } from "~/context/auth.withActor"
+import { Account } from "@opencode/console-core/account.js"
+import { EmailSignup } from "~/component/email-signup"
+import { Faq } from "~/component/faq"
+import { Legal } from "~/component/legal"
+import { Footer } from "~/component/footer"
+import { Header } from "~/component/header"
+
+const defaultWorkspace = query(async () => {
+ "use server"
+ const actor = await getActor()
+ if (actor.type === "account") {
+ const workspaces = await withActor(() => Account.workspaces())
+ return workspaces[0].id
+ }
+}, "defaultWorkspace")
+
+export default function Home() {
+ const workspace = createAsync(() => defaultWorkspace())
+
+ return (
+
+
+ OpenCode Zen | A curated set of reliable optimized models for coding agents
+
+
+
+
+
+
+
+
+
+
+
+
+
Reliable optimized models for coding agents
+
+ Zen gives you access to a curated set of AI models that OpenCode has tested and benchmarked specifically
+ for coding agents. No need to worry about inconsistent performance and quality, use validated models
+ that work.
+
+
+
+ Get started with Zen
+
+
+
+
+ Add $20 Pay as you go balance (+$1.23 card processing fee)
+
+
Use with any agent. Set monthly spend limits. Cancel any time.
+
+
+
+
+
+
+
+
+
What problem is Zen solving?
+
+ There are so many models available, but only a few work well with coding agents.
+
+ Most providers configure them differently with varying results.
+
+
We're fixing this for everyone, not just OpenCode users.
+
+ -
+ [*] Testing select models and consulting their teams
+
+ -
+ [*] Working with providers to ensure they’re delivered properly
+
+ -
+ [*] Benchmarking all model-provider combinations we recommend
+
+
+
+
+
+
+
How Zen works
+
While we suggest you use Zen with OpenCode, you can use Zen with any agent.
+
+
+
+
+
Your privacy is important to us
+
+
[*]
+
+ All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+ for model training, with the following exceptions.
+
+
+
+
+
+ {/*Dax*/}
+
+
+
+
+
Dax Raad
+
ex-CEO, Terminal Products
+
+
+ It's clear from using @OpenCode Zen that the team behind it are smart, funny, and
+ excellent lovers.
+
+
+
+
+
Jay V
+
ex-Founder, SEED, PM, Melt, Pop, Dapt, Cadmus, and ViewPoint
+
+
+ 4 out 5 people on our team love using @OpenCode Zen.
+
+
+
+
+
Adam Elmore
+
ex-Hero, AWS
+
+
+ I can't recommend @OpenCode Zen enough. Seriously, it’s really good.
+
+
+
+
+
David Hill
+
ex-Head of Design, Laravel
+
+
+ With @OpenCode Zen I know all the models are tested and perfect for coding agents.
+
+
+
+
+
Frank Wang
+
ex-Intern, Nvidia (4 times)
+
+
I wish I was still at Nvidia.
+
+
+
+
+
FAQ
+
+
+ -
+
+ Zen is a curated set of AI models tested and benchmarked for coding agents created by the team behind
+ OpenCode.
+
+
+ -
+
+ Zen only provides models that have been specifically tested and benchmarked for coding agents. You
+ wouldn’t use a butter knife to cut steak, don’t use poor models for coding.
+
+
+ -
+
+ Zen is not for profit. Zen passes through the costs from the model providers to you. The higher Zen’s
+ usage the more OpenCode can negotiate better rates and pass those to you.
+
+
+ -
+
+ Zen charges per request with zero markups, so you pay exactly what the model provider charges. Your
+ total cost depends on usage, and you can set monthly spend limits in your account.
+ To cover costs, OpenCode adds only a small payment processing fee of $1.23 per $20 balance top-up.
+
+
+ -
+
+ All Zen models are hosted in the US. Providers follow a zero-retention policy and do not use your data
+ for model training, with the following exceptions.
+
+
+ -
+ Yes, you can set monthly spending limits in your account.
+
+ -
+
+ Yes, you can disable billing at any time and use your remaining balance.
+
+
+ -
+
+ While Zen works great with OpenCode, you can use Zen with any agent. Follow the setup instructions in
+ your preferred coding agent.
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/console/app/src/style/base.css b/packages/console/app/src/style/base.css
index a4847ed4..1c3f1d55 100644
--- a/packages/console/app/src/style/base.css
+++ b/packages/console/app/src/style/base.css
@@ -7,3 +7,15 @@ html {
body {
font-family: var(--font-sans);
}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}