Skip to content
Thanyapisit Buaprakhong
All projects

Self-hosted AI coding workspace

Ox Coder

A self-hosted AI coding workspace with explicit model choice, automatic task routing, trusted tools, multimodal input, and persistent chat.

Visit live project View repository
Project
Independent open-source product
Role
Product design, AI systems architecture, full-stack engineering, deployment, and testing
Focus
AI coding agent, Tool use, Multimodal chat, Open source
Stack
Next.js 16, React 19, TypeScript, OpenRouter, Auth.js, PostgreSQL, AI SDK MCP, Zod, Vitest, Tailwind CSS 4, Render
Ox Coder landing page with a prompt composer for coding tasks
The landing page moves directly from a plain-language task into the coding workspace, with shortcuts for building, debugging, reviewing, and connecting tools.
Ox Coder product section explaining automatic task routing and trusted capabilities
The product principle is stated clearly: keep the interface quiet, route the task automatically, and bring in capabilities only when the work needs them.
Ox Coder model selection overview for Ox Alpha, Qwen, and DeepSeek
Model choice stays visible to the user while the agent keeps responsibility for reasoning depth, task method, and tool selection.
Ox Coder tools overview with web search, web reader, calculator, current time, MCP, and custom actions
Built-in evidence tools sit alongside user-approved MCP servers and custom actions, all connected through bounded server-side execution.
Ox Coder journal index showing technical articles about models, tools, evaluation, and skills
The journal documents the system's product decisions through practical writing on model choice, evaluation, tools, and internet skills.
Ox Coder call to action and structured product footer
Public pages share one direct route into the workspace and a consistent information architecture across product, resources, workspace, and legal content.
Ox Coder AI and LLM journal landing page
Long-form, source-backed articles support the product with deeper explanations of transformers, agents, context, evaluation, and safe customization.
Ox Coder Transformer article with an active table of contents and architecture figure
Article pages keep technical evidence readable with active navigation, large diagrams, structured sections, and further-reading sources.
Ox Coder coding guide about attaching focused evidence and choosing a model
Coding guides turn the agent's operating model into concrete advice about context, evidence, privacy, and model selection.
Ox Coder authenticated chat workspace streaming a response with visible task progress
The production workspace combines persistent history, model and task status, visible generation progress, stop control, attachments, and an accessible composer.

The project

Ox Coder is a production AI coding workspace designed around a simple division of responsibility: the user chooses the model, while the system chooses the work method and relevant tools. It combines a quiet public product experience with an authenticated chat workspace, streamed agent activity, multimodal attachments, current web evidence, MCP and custom actions, cross-device history, and operational safeguards for a resource-constrained deployment.

  • Keeps model selection explicit while routing the work method automatically, so users retain provider choice without managing agent orchestration.
  • Supports up to three multimodal attachments per turn and exposes the active fallback model instead of hiding provider changes.
  • Restricts remote tools and readers to public HTTPS targets with DNS and IP checks, redirect limits, timeouts, response caps, and untrusted-content handling.
  • A 500-request live load run across 100 concurrent clients returned 500 HTTP 200 responses, with about 1.26-second p95 latency and 211 MB memory use on a Render Starter instance.

Product flow

How it works

  1. 01

    A signed-in user selects Ox Alpha, Qwen 3.8 27B, or DeepSeek V4 Flash, then submits a coding request with optional text, image, PDF, video, or public-link context supported by that model.

  2. 02

    The chat route validates the session, applies per-user rate and weighted capacity limits, checks the request schema and attachments, then infers a General, Build, Debug, Review, Tests, or Architecture work method.

  3. 03

    Built-in tools, public Streamable HTTP MCP servers, custom HTTPS actions, and internet-hosted skills are prepared only when they can help the current task.

  4. 04

    OpenRouter streams reasoning activity, tool calls, text, notices, and completion events as newline-delimited JSON. Compatible fallback routes preserve the required input modality and remain visible to the user.

  5. 05

    The browser renders each event incrementally and saves the completed conversation. PostgreSQL provides account-level, cross-device history when configured, with browser storage as the deliberate fallback.

Development approach

How the work was organized

The implementation moved from product control and stream contracts to bounded integrations, resilient state, and production verification.

  1. Frame the control model

    Define one clear product rule: the person chooses the model, while Ox selects the task method and decides when tools improve the answer.

  2. Specify the stream contract

    Align the browser and API around typed request schemas plus NDJSON events for activity, tool results, text, notices, errors, and completion.

  3. Add bounded capabilities

    Start with deterministic built-in tools, then add public MCP, custom actions, and internet skills behind strict URL, redirect, timeout, and size controls.

  4. Make state resilient

    Layer account-scoped PostgreSQL synchronization over immediate browser persistence, and make model fallback behavior visible instead of silent.

  5. Verify and operate

    Test schemas, routing, attachments, tools, MCP, stream rendering, settings, storage identity, rate limits, and capacity before the production build and Render release.

System design

How it was built

01

Built the public product, journal, guides, authentication flow, and responsive coding workspace in Next.js 16 and React 19, with model selection, persistent history, attachments, settings, Markdown responses, and visible generation activity.

02

Designed the agent runtime around OpenRouter streaming, automatic task methods, modality-aware model fallback, four built-in evidence tools, public MCP connections, custom HTTPS actions, and internet-hosted Markdown skills.

03

Hardened persistence and deployment with Auth.js, hashed user identities, PostgreSQL chat ownership, browser fallback, SSRF-resistant URL access, schema and content caps, rate limiting, weighted generation admission, health checks, and Render deployment guidance.

System architecture

Structure and trust boundaries

The application owns authentication, validation, routing, and persistence. Models and remote tools remain conditional external services.

Ox Coder architecture showing the browser workspace, trusted Next.js application, OpenRouter and remote integrations, PostgreSQL, and Render operations
The request path keeps authentication, validation, routing, and guardrails inside the trusted application while external models and tools remain conditional services.Download editable diagram

Public product surface

Landing, models, tools, journal, guides, legal pages, SEO metadata, public advertising placements, and the route into the workspace.

Authenticated workspace

Responsive chat, model menu, multimodal attachments, settings, chat history, Markdown rendering, sponsor interlude, and incremental stream state.

Agent and integration layer

Request validation, automatic task methods, OpenRouter model and modality fallback, built-in tool execution, MCP, custom tools, and internet skills.

Persistence and operations

Auth.js sessions, PostgreSQL chat storage, local fallback, rate and capacity controls, health reporting, and a single Render web-service deployment.