<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dave Kurian</title>
    <description>The latest articles on DEV Community by Dave Kurian (@davekurian).</description>
    <link>https://dev.to/davekurian</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3962819%2F50b558da-9a83-43ee-a473-5381fe6bb0d4.png</url>
      <title>DEV Community: Dave Kurian</title>
      <link>https://dev.to/davekurian</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/davekurian"/>
    <language>en</language>
    <item>
      <title>Lovable Raises $330M Series A to Scale AI-Powered No-Code Platform</title>
      <dc:creator>Dave Kurian</dc:creator>
      <pubDate>Tue, 02 Jun 2026 09:03:04 +0000</pubDate>
      <link>https://dev.to/davekurian/lovable-raises-330m-series-a-to-scale-ai-powered-no-code-platform-17m1</link>
      <guid>https://dev.to/davekurian/lovable-raises-330m-series-a-to-scale-ai-powered-no-code-platform-17m1</guid>
      <description>&lt;p&gt;Lovable’s $330M Series A at a $6.6B valuation is the kind of milestone that rarely happens this early — especially for an AI platform pitching that its “vibe coding” conversation-first builder can give non-technical users software superpowers. That sheer capital, led by heavyweight venture arms Capital G and Menlo Ventures, signals more than optimism — it’s a hard bet on a paradigm shift where app-making becomes as common as editing a doc, and the winners are the infra players, not just the models.&lt;/p&gt;

&lt;p&gt;[[IMG: Lovable team in Stockholm office, schematic showing natural language converting into app code]]&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Lovable’s $330M Series A funding and who led it?
&lt;/h2&gt;

&lt;p&gt;Lovable secured $330 million in Series A investment in December 2025, led by Capital G and Menlo Ventures for a total valuation of $6.6 billion (CNBC Disruptor 50). This brings Lovable’s total funding to $552.5 million — a number that stands out given the company was founded in 2023.&lt;/p&gt;

&lt;p&gt;Capital G (Alphabet’s growth arm) and Menlo Ventures both specialize in fueling high-velocity SaaS and AI efforts with broad market potential — so their leading role isn’t an accident: the bet is that Lovable’s architecture enables the next wave of software democratization. Few AI SaaS companies attract over half a billion dollars before a Series B; even OpenAI and Cohere’s early funding rounds were outpaced by this raise. That gives Lovable one of the largest war chests for an AI-native coding tool built for the mass market, not just engineers.&lt;/p&gt;

&lt;p&gt;In an AI software market swimming with half-steps and wrappers, a $330M Series A is a sharpened signal: the real gold is platforms enabling new classes of users, and the capital backs going for scale now, not later. &lt;/p&gt;

&lt;h2&gt;
  
  
  How does Lovable’s AI-powered vibe coding platform work?
&lt;/h2&gt;

&lt;p&gt;Lovable’s platform lets users build apps by describing their purpose, interface, and data flow in ordinary language through prompted chat. The engine then parses these natural language interactions and scaffolds a working application, presenting suggestions rather than requiring traditional manual coding, all in real time.&lt;/p&gt;

&lt;p&gt;The core idea: instead of expecting users to understand frameworks or syntax, Lovable interprets intent — “build me a time-tracking tool that emails CSV logs every Friday” — and iterates interactively, with the user refining via conversational feedback (think: “Let’s add a dashboard” or “Make this mobile-friendly”). There’s no hard wall; every prompt is a building step.&lt;/p&gt;

&lt;p&gt;Underneath, Lovable’s “vibe coding” concept uses purpose-built LLMs that stitch together scaffolding, code generation, UI wireframes, and integration glue based on ongoing conversation. That moves well beyond simple code-completion or no-code block arrangement — it’s a stateful dialog that refines both business rules and UX. The user doesn’t see the code unless they ask for it. Suggestions appear (“Would you like to connect to Google Sheets?”), guiding even absolute beginners forward.&lt;/p&gt;

&lt;p&gt;Founded by Anton Osika and Fabian Hedin in Stockholm in 2023, Lovable isn’t positioning as just another UI-builder or static template engine — it’s a play for AI-powered, fully interactive app synthesis. With a mission of making software creation as accessible as natural conversation, every piece of Lovable’s product design aims to eliminate handoffs and the cognitive load required to build even relatively complex logic.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is Lovable’s platform important for non-technical users?
&lt;/h2&gt;

&lt;p&gt;The fundamental win: non-technical users can finally move from brainstorm to working product without being bottlenecked by engineering bandwidth, tutorials, or learning curves. For anyone who’s ever been told to “fill out a requirements doc and wait,” Lovable’s conversational enable transforms how ideas become deployable.&lt;/p&gt;

&lt;p&gt;This is especially relevant for business units and independent creators who don’t get a prioritization slot on the dev backlog. Enterprise workers, operations leaders, sales, HR, education — all stand to benefit. Now, they can describe what they want (“I need a notification when inventory drops below 10, connected to our Slack”) and see it built, tested, and iterated within the hour.&lt;/p&gt;

&lt;p&gt;Lovable is targeting both the consumer (“just ship your side project without code”) and enterprise market (“let every team automate their workflows without waiting on IT”). This dual focus supports runway for mass adoption, drawing in everyone blocked by traditional software gatekeeping.&lt;/p&gt;

&lt;p&gt;Recent growth and funding make clear the ambition: not just a playground for hobbyists, but a durable SaaS infra layer to speed up the slowest parts of knowledge work — delivering working apps wherever descriptions exist. In the near term, expect a dramatic expansion of the addressable software maker population, with business units accelerating their own tools rather than purchasing one-size-fits-none SaaS products.&lt;/p&gt;

&lt;h2&gt;
  
  
  How will Lovable use the $330M Series A funding?
&lt;/h2&gt;

&lt;p&gt;Lovable lists three concrete priorities for deploying its new capital:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accelerate team hiring across AI research, product, and customer success&lt;/li&gt;
&lt;li&gt;Drive feature milestones and scale platform reliability for enterprise demand&lt;/li&gt;
&lt;li&gt;Expand go-to-market for both consumer and enterprise segments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The capital will allow Lovable to compete for top LLM engineering talent against the largest AI labs, actively iterate on product stability and vertical features, and expand its devops and support capabilities as user base surges. Expect a strong focus on horizontal scalability, LLM safety/reliability improvements, and AI-human feedback cycles making even more nuanced suggestions for app-building edge cases.&lt;/p&gt;

&lt;p&gt;Enterprise onboarding and compliance support are clear near-future targets, as Lovable aims to become not just a playground, but the backbone powering business-critical processes (with an API, admin tools, audit logs, and permission controls to match).&lt;/p&gt;

&lt;p&gt;In the crowded AI builder field, getting to broad, reliable support for real-world workflows is capital- and talent-intensive work. This raise switches Lovable from “interesting toy” to “funded for industrial reliability” overnight.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does Lovable’s valuation and funding round mean for the AI industry?
&lt;/h2&gt;

&lt;p&gt;A $6.6B valuation for a pre-Series B AI startup isn’t just a sign of a hot market — it’s a signal that investors see major value in generation-over-instruction platforms, where builders don’t need to touch code or even drag blocks.&lt;/p&gt;

&lt;p&gt;Compared to other recent funding rounds for no-code/low-code or LLM-based builder tools, Lovable’s Series A is an order of magnitude larger. (Even previously well-funded platforms like Bubble or Airtable haven’t broken this valuation/funding ratio at such an early stage.) When investors like Capital G (Alphabet’s venture arm) and Menlo Ventures pile in this quickly, the message is clear: the next phase of enterprise digitization will hinge less on who has the best models and more on who can surface those models to a new class of users.&lt;/p&gt;

&lt;p&gt;Lovable’s approach — going for scale, broad language understanding, and enterprise reliability — positions it as one of the leading infra rails for the coming wave of “AI-extended” knowledge workers, not just solo app-makers. The valuation sets a benchmark for how quickly AI builders-for-builders can leapfrog their human-in-the-loop, instruction-heavy competitors.&lt;/p&gt;

&lt;p&gt;For founders and technical leads watching the space: funding velocity of this magnitude points to open opportunities in AI-powered abstraction, integration, and workflow composition layers. The user demand is real — the capital will go to the players who abstract away the brittle points of current no-code and SaaS builder stacks.&lt;/p&gt;

&lt;h2&gt;
  
  
  How can non-technical users start using Lovable’s platform today?
&lt;/h2&gt;

&lt;p&gt;Getting started is as simple as signing up at lovable.dev. There’s no steep onboarding: once you’re in, you’re greeted by a chat-style UI that prompts, “What do you want to build today?” The process is entirely conversation-driven:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Start with a goal:&lt;/strong&gt; Type a plain-English description (“Build a personal expense tracker with a dashboard and weekly email report”).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Follow AI-led suggestions:&lt;/strong&gt; The platform recommends integrations, features, or next steps in real time (“Would you like to import data from a spreadsheet?”).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refine via conversation:&lt;/strong&gt; As you reply, the app’s components, visuals, and backend logic evolve automatically. You handle exceptions (“Connect to PayPal for payments”) as conversational follow-ups.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploy:&lt;/strong&gt; After a few minutes of dialog, Lovable publishes your app with a shareable link; export options are available for more advanced use.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Public demo accounts are available, and both free trials and enterprise onboarding are supported — with higher limits and access to enterprise-control features (e.g., SSO, audit logs) on request.&lt;/p&gt;

&lt;p&gt;No setup or IDE to configure. No “learn our builder syntax”-type manual. It’s just chat, suggestion, and ship.&lt;/p&gt;

&lt;p&gt;For those used to classic SaaS onboarding, the difference is night-and-day in time-to-first-productivity.&lt;/p&gt;

&lt;p&gt;[[IMG: Lovable platform chat interface with a simple business app being specified and generated step-by-step]]&lt;/p&gt;

&lt;h2&gt;
  
  
  The backbone layer for a shifting toolchain
&lt;/h2&gt;

&lt;p&gt;Lovable’s $330M Series A, at a $6.6B valuation, isn’t just a capital headline. It’s a functional inflection where the “describe, don’t code” model is now funded at the scale needed to build durable software rails beneath the LLM/model churn. For builders, that means a faster path from idea to working app for anyone — not just engineers. For technical teams, it means the glue code and vertical SaaS explosion is just getting started, and the platforms abstracting away “how” in favor of “what” will become the critical productivity multiplier. New AI models, frameworks, and APIs will keep coming — but the stack that can talk to both non-technical users and legacy infra is the one that endures.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Same component, web + mobile — the architecture behind @otfdashkit/ui</title>
      <dc:creator>Dave Kurian</dc:creator>
      <pubDate>Tue, 02 Jun 2026 07:17:58 +0000</pubDate>
      <link>https://dev.to/davekurian/same-component-web-mobile-the-architecture-behind-otfdashkitui-3foi</link>
      <guid>https://dev.to/davekurian/same-component-web-mobile-the-architecture-behind-otfdashkitui-3foi</guid>
      <description>&lt;p&gt;The dream of "write once, run on web + mobile" has burned a lot of people. Cordova /&lt;br&gt;
Ionic / Native Script / React Native Web / Flutter for web — each generation tries to make&lt;br&gt;
the platforms agree, and each generation pays a tax somewhere.&lt;/p&gt;

&lt;p&gt;OTF doesn't try to dissolve the difference. It does something narrower: &lt;strong&gt;share the&lt;br&gt;
&lt;em&gt;design system&lt;/em&gt; across web and mobile, but keep the &lt;em&gt;implementation&lt;/em&gt; native on each side.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Same &lt;code&gt;Card&lt;/code&gt; component name, same prop intent. Different file, different render path. One&lt;br&gt;
mental model.&lt;/p&gt;

&lt;p&gt;This post is about how that's structured, and where it bends.&lt;/p&gt;
&lt;h2&gt;
  
  
  The two packages
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@otfdashkit/tokens       — design tokens (CSS variables + JS object)
@otfdashkit/ui           — web implementation (Radix + Tailwind)
@otfdashkit/ui-native    — native implementation (Tamagui)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;code&gt;tokens&lt;/code&gt; is the seam. It exports the &lt;em&gt;same values&lt;/em&gt; in two formats:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;web.css&lt;/code&gt; — CSS custom properties (&lt;code&gt;--background&lt;/code&gt;, &lt;code&gt;--primary&lt;/code&gt;, …)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;native.ts&lt;/code&gt; — JS object consumed by Tamagui's &lt;code&gt;createTamagui&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When you change &lt;code&gt;--primary&lt;/code&gt; in &lt;code&gt;theme-warm&lt;/code&gt;, both web and native pick it up. There's&lt;br&gt;
exactly one source of truth for color, spacing, radius, motion.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why two implementation packages, not one
&lt;/h2&gt;

&lt;p&gt;We tried unified. It went badly.&lt;/p&gt;

&lt;p&gt;We tried React Native Web — running RN components in a browser via &lt;code&gt;react-native-web&lt;/code&gt;. It&lt;br&gt;
works, but the bundle is huge (you're shipping RN's entire layout engine to the browser),&lt;br&gt;
the styling story is awkward (&lt;code&gt;StyleSheet.create&lt;/code&gt; is a worse fit than Tailwind for web), and&lt;br&gt;
the animation primitives don't map cleanly to web idioms.&lt;/p&gt;

&lt;p&gt;We tried Tamagui-everywhere — Tamagui generates its own web output from the same source as&lt;br&gt;
its native output. Closer to the dream, but Tamagui's compile-step adds friction to web&lt;br&gt;
projects that don't need it, and the web-side ergonomics aren't as good as Radix + Tailwind&lt;br&gt;
for our use case (heavy keyboard accessibility, nested overlays, etc.).&lt;/p&gt;

&lt;p&gt;So we split. &lt;strong&gt;&lt;code&gt;@otfdashkit/ui&lt;/code&gt; uses Radix + Tailwind&lt;/strong&gt;, optimised for the web. &lt;strong&gt;&lt;code&gt;@otfdashkit/ui-native&lt;/code&gt;&lt;br&gt;
uses Tamagui&lt;/strong&gt;, optimised for native. They share &lt;em&gt;names&lt;/em&gt; (where the abstraction is honest)&lt;br&gt;
and &lt;em&gt;tokens&lt;/em&gt; (always).&lt;/p&gt;
&lt;h2&gt;
  
  
  The shared name policy
&lt;/h2&gt;

&lt;p&gt;Where the abstraction is honest, the names match:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Component&lt;/th&gt;
&lt;th&gt;Web&lt;/th&gt;
&lt;th&gt;Native&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Card&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Card&amp;gt;&lt;/code&gt; from &lt;code&gt;@otfdashkit/ui&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Card&amp;gt;&lt;/code&gt; from &lt;code&gt;@otfdashkit/ui-native&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Avatar&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Avatar&amp;gt;&lt;/code&gt; + parts&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Avatar&amp;gt;&lt;/code&gt; + parts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Input&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;Input&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;&amp;lt;Input&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Button&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt; (variant prop)&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt; (variant prop)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Tooltip&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Tooltip&amp;gt;&lt;/code&gt; + parts&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Tooltip&amp;gt;&lt;/code&gt; (long-press on native)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Tabs&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;Tabs&amp;gt;&lt;/code&gt; + parts&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;&amp;lt;OtfTabs&amp;gt;&lt;/code&gt; (prefixed to avoid Tamagui conflict)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Where the abstraction is &lt;em&gt;not&lt;/em&gt; honest, the names diverge:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web &lt;code&gt;&amp;lt;Sheet&amp;gt;&lt;/code&gt; (right-slide modal) → Native &lt;code&gt;&amp;lt;BottomSheet&amp;gt;&lt;/code&gt; (drag-up sheet, snap points,
different physics)&lt;/li&gt;
&lt;li&gt;Web &lt;code&gt;&amp;lt;Drawer&amp;gt;&lt;/code&gt; → Native &lt;code&gt;&amp;lt;ActionSheet&amp;gt;&lt;/code&gt; (iOS-style action picker) or &lt;code&gt;&amp;lt;BottomSheet&amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Web &lt;code&gt;&amp;lt;Toaster&amp;gt;&lt;/code&gt; (DOM-mounted) → Native &lt;code&gt;&amp;lt;OtfToastProvider&amp;gt;&lt;/code&gt; (RN context-mounted)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is deliberate. A named abstraction that papers over a real platform difference &lt;em&gt;will&lt;/em&gt;&lt;br&gt;
break. Better to keep names different where the implementations are different.&lt;/p&gt;
&lt;h2&gt;
  
  
  Tokens that work on both sides
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;tokens&lt;/code&gt; package emits two outputs from one source.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web (CSS custom properties)&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* @otfdashkit/tokens/web.css */&lt;/span&gt;
&lt;span class="nd"&gt;:root&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;--background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;0%&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;       &lt;span class="c"&gt;/* HSL components — multiplied through hsl() at use site */&lt;/span&gt;
  &lt;span class="py"&gt;--foreground&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;220&lt;/span&gt; &lt;span class="m"&gt;8%&lt;/span&gt; &lt;span class="m"&gt;12%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="py"&gt;--primary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;    &lt;span class="m"&gt;212&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt; &lt;span class="m"&gt;47%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="c"&gt;/* ... */&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.dark&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;--background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;220&lt;/span&gt; &lt;span class="m"&gt;12%&lt;/span&gt; &lt;span class="m"&gt;7%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="py"&gt;--foreground&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;0%&lt;/span&gt; &lt;span class="m"&gt;96%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="c"&gt;/* ... */&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.theme-warm&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;--primary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;28&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt; &lt;span class="m"&gt;56%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;        &lt;span class="c"&gt;/* Override single tokens to retheme */&lt;/span&gt;
  &lt;span class="c"&gt;/* ... */&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Native (JS)&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// @otfdashkit/tokens/native.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;tokens&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hsl(0, 0%, 100%)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;foreground&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hsl(220, 8%, 12%)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hsl(212, 100%, 47%)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;themes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;light&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;tokens&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;background&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;foreground&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;tokens&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;foreground&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;tokens&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hsl(220, 12%, 7%)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both come from the same &lt;code&gt;themes.ts&lt;/code&gt; source object that's transformed into CSS or JS during&lt;br&gt;
the package build.&lt;/p&gt;
&lt;h2&gt;
  
  
  Charts: the recharts problem
&lt;/h2&gt;

&lt;p&gt;Charts are the place where we deliberately broke "same name, same place". &lt;code&gt;@otfdashkit/ui&lt;/code&gt;&lt;br&gt;
exports &lt;code&gt;BarChart&lt;/code&gt;, &lt;code&gt;LineChart&lt;/code&gt;, &lt;code&gt;AreaChart&lt;/code&gt;, etc. — wrappers around recharts. There is no&lt;br&gt;
equivalent in &lt;code&gt;@otfdashkit/ui-native&lt;/code&gt;, because recharts doesn't run on RN.&lt;/p&gt;

&lt;p&gt;Native charts in our kits use &lt;code&gt;react-native-svg&lt;/code&gt; directly with custom tokens. They look&lt;br&gt;
similar to the web charts but their API doesn't match. We considered shipping a thin abstract&lt;br&gt;
layer to make them match, but the SVG-direct approach is honest and the abstraction would&lt;br&gt;
have leaked the moment we needed dual-axis or interactivity.&lt;/p&gt;
&lt;h2&gt;
  
  
  Theming with one switch
&lt;/h2&gt;

&lt;p&gt;Both web and native read from the tokens package. Switching themes is one mechanism on each:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web&lt;/strong&gt;: swap a class on &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;documentElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;className&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;theme-warm dark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Native&lt;/strong&gt;: swap a Tamagui theme prop:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Theme&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"dark"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;App&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Theme&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The kits both wrap this in a &lt;code&gt;useThemeColor()&lt;/code&gt; hook + &lt;code&gt;&amp;lt;FloatingThemePicker&amp;gt;&lt;/code&gt; component so&lt;br&gt;
the user-facing UX is the same: tap the palette icon, pick a theme, both web and native&lt;br&gt;
re-render to match.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvwfuj2e4lct7dy7erxl0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvwfuj2e4lct7dy7erxl0.png" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What we gave up
&lt;/h2&gt;

&lt;p&gt;This split costs you two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Two implementations to maintain when adding a new component.&lt;/strong&gt; A new &lt;code&gt;Banner&lt;/code&gt; ships&lt;br&gt;
on web first. The native side gets it later (or never, if it's not needed natively).&lt;br&gt;
~80% of components are on both sides. ~20% are platform-specific (e.g. &lt;code&gt;Marquee&lt;/code&gt; is web-only,&lt;br&gt;
&lt;code&gt;OnboardingCarousel&lt;/code&gt; is native-only).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Per-platform mental load when reading the kit.&lt;/strong&gt; A developer who's only on web reads&lt;br&gt;
&lt;code&gt;@otfdashkit/ui&lt;/code&gt; and ignores &lt;code&gt;@otfdashkit/ui-native&lt;/code&gt;. A developer who's on both reads both.&lt;br&gt;
The kits make this clearer by structuring &lt;code&gt;kits/&amp;lt;name&amp;gt;/&lt;/code&gt; consistently — same hooks shape,&lt;br&gt;
same Hono routes shape, same &lt;code&gt;CLAUDE.md&lt;/code&gt; template — so cross-platform fluency comes from&lt;br&gt;
the kit's structural conventions, not from a unified component layer.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What we got back
&lt;/h2&gt;

&lt;p&gt;In return:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Web bundle stays small.&lt;/strong&gt; No RN engine in the browser. Vite tree-shakes the unused&lt;br&gt;
primitives. The SaaS Dashboard kit's prod bundle is ~180 KB gzipped including all of&lt;br&gt;
&lt;code&gt;@otfdashkit/ui&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Native feels native.&lt;/strong&gt; Tamagui's per-platform optimizations (Skia for animations on&lt;br&gt;
iOS, Reanimated worklets, native gesture handler) all ship through. No layout-engine&lt;br&gt;
emulation tax.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Theming is a class swap.&lt;/strong&gt; No re-renders, no provider changes, no animation glitches.&lt;br&gt;
Both web and native pick up token changes immediately.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Each side stays idiomatic.&lt;/strong&gt; Web devs see Radix + Tailwind. Native devs see Tamagui.&lt;br&gt;
Neither has to learn the other to be productive on their side.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The architecture in one diagram
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                ┌───────────────────────────┐
                │   @otfdashkit/tokens      │
                │  ─ themes.ts (source)     │
                │  ─ web.css (output)       │
                │  ─ native.ts (output)     │
                └─────────┬─────────────────┘
                          │ imports
            ┌─────────────┴─────────────┐
            │                           │
    ┌───────▼─────────┐         ┌───────▼─────────┐
    │ @otfdashkit/ui  │         │@otfdashkit/      │
    │ Radix + Tailwind│         │   ui-native      │
    │ Web only        │         │ Tamagui + RN     │
    └───────┬─────────┘         └───────┬─────────┘
            │ used by                   │ used by
    ┌───────▼─────────┐         ┌───────▼─────────┐
    │ SaaS Dashboard  │         │  Fitness Kit    │
    │ Vite + Hono     │         │ Expo + Hono     │
    └─────────────────┘         └─────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Same theme. Same names. Different files. One mental model.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;The conventions live in the &lt;a href="https://dev.to/docs/tokens/overview"&gt;Tokens overview&lt;/a&gt;,&lt;br&gt;
the &lt;a href="https://dev.to/docs/components/ui/overview"&gt;Components overview&lt;/a&gt;, and the&lt;br&gt;
&lt;a href="https://dev.to/docs/components/ui-native/overview"&gt;Native components overview&lt;/a&gt;. The kits at&lt;br&gt;
&lt;a href="https://saas.otf-kit.dev" rel="noopener noreferrer"&gt;saas.otf-kit.dev&lt;/a&gt; and &lt;a href="https://fitness-preview.otf-kit.dev" rel="noopener noreferrer"&gt;fitness-preview.otf-kit.dev&lt;/a&gt;&lt;br&gt;
are the canonical implementations.&lt;/p&gt;

&lt;p&gt;If you're going to ship cross-platform, you have to decide what you're sharing and what&lt;br&gt;
you're not. We share design — colors, spacing, names, vibes. We don't share implementation.&lt;br&gt;
That single decision dropped most of our cross-platform pain.&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>design</category>
      <category>mobile</category>
      <category>ui</category>
    </item>
    <item>
      <title>How to build cross-platform templates AI coding tools actually respect</title>
      <dc:creator>Dave Kurian</dc:creator>
      <pubDate>Tue, 02 Jun 2026 07:17:57 +0000</pubDate>
      <link>https://dev.to/davekurian/how-to-build-cross-platform-templates-ai-coding-tools-actually-respect-4ebe</link>
      <guid>https://dev.to/davekurian/how-to-build-cross-platform-templates-ai-coding-tools-actually-respect-4ebe</guid>
      <description>&lt;p&gt;Watch any AI coding tool — Claude Code, Cursor, Antigravity, Lovable, Aider, Continue —&lt;br&gt;
work inside an unfamiliar codebase for ten minutes, and you'll see the same three failure&lt;br&gt;
modes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;It invents conventions that don't exist&lt;/strong&gt; ("here's a new utility I made up because I
couldn't find an existing one").&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;It ignores conventions that do exist&lt;/strong&gt; ("I see you use TanStack Query everywhere, but
I'll use a fresh &lt;code&gt;useEffect&lt;/code&gt; for this fetch because the prompt didn't say not to").&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;It mistakes scaffold for product&lt;/strong&gt; ("I see you import from &lt;code&gt;@/components/ui/button&lt;/code&gt; —
so I'll create a new component at &lt;code&gt;@/components/MyButton.tsx&lt;/code&gt;").&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Each failure has the same root cause: the codebase isn't legible enough to a model that&lt;br&gt;
hasn't seen it before. The fix isn't to switch models; it's to write code AI models&lt;br&gt;
can read.&lt;/p&gt;

&lt;p&gt;Below are the conventions we've landed on while building the OTF SDK and the kits that ship&lt;br&gt;
on top of it. They're not opinions — every one came from watching an AI tool fail and asking&lt;br&gt;
"what would have made this clearer?"&lt;/p&gt;
&lt;h2&gt;
  
  
  1. One file, one component, one idea
&lt;/h2&gt;

&lt;p&gt;The biggest thing we changed: every component sits in its own file with no clever&lt;br&gt;
inheritance, no &lt;code&gt;index.ts&lt;/code&gt; re-exports inside a component folder, no shared base classes.&lt;br&gt;
A model that opens &lt;code&gt;Button.tsx&lt;/code&gt; should see the entire button.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// packages/ui/src/primitives/button.tsx — entire file is ~80 lines&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;buttonVariants&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;cva&lt;/span&gt;&lt;span class="p"&gt;(...)&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forwardRef&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;HTMLButtonElement&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ButtonProps&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(...)&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ButtonProps&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Compare to a file that re-exports from three other files: an AI looking at the import&lt;br&gt;
&lt;code&gt;from '@otfdashkit/ui'&lt;/code&gt; has to follow chains to know what &lt;code&gt;Button&lt;/code&gt; actually is. With our&lt;br&gt;
flat layout, the answer is a single file read.&lt;/p&gt;
&lt;h2&gt;
  
  
  2. Naming carries meaning
&lt;/h2&gt;

&lt;p&gt;Names are the cheapest documentation. We invest hard in them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;useCreateProject&lt;/code&gt; — "this is a TanStack Query mutation hook for creating a project"&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;useProjects&lt;/code&gt; — "this is a TanStack Query query hook for the list"&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;Stat&amp;gt;&lt;/code&gt; — "single-purpose stat tile, not a generic card"&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;Persona&amp;gt;&lt;/code&gt; — "avatar + name + role row, not a generic user list item"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When an AI sees &lt;code&gt;useCreateProject&lt;/code&gt;, it doesn't have to read the file to know it returns a&lt;br&gt;
&lt;code&gt;useMutation&lt;/code&gt; result. It can call &lt;code&gt;mutate&lt;/code&gt; / &lt;code&gt;mutateAsync&lt;/code&gt; confidently because that's what&lt;br&gt;
the name implies.&lt;/p&gt;
&lt;h2&gt;
  
  
  3. Patterns live in the file system, not in your head
&lt;/h2&gt;

&lt;p&gt;Every recurring pattern in the kit gets one canonical implementation that reads like a template:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hook shape → &lt;code&gt;src/hooks/useProjects.ts&lt;/code&gt; (the optimistic-update template)&lt;/li&gt;
&lt;li&gt;Hono route shape → &lt;code&gt;server/routes/projects.ts&lt;/code&gt; (CRUD template)&lt;/li&gt;
&lt;li&gt;New screen shape → step-by-step in &lt;code&gt;CLAUDE.md&lt;/code&gt; ("create file at &lt;code&gt;src/pages/...&lt;/code&gt;, wrap in
&lt;code&gt;&amp;lt;FadeIn&amp;gt;&lt;/code&gt;, add to router")&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When a user asks Claude "add a tasks endpoint", Claude reads &lt;code&gt;CLAUDE.md&lt;/code&gt;, finds the route&lt;br&gt;
shape, copies &lt;code&gt;projects.ts&lt;/code&gt;, and adapts. No invention.&lt;/p&gt;
&lt;h2&gt;
  
  
  4. The AI config file is non-optional
&lt;/h2&gt;

&lt;p&gt;Every kit ships:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;CLAUDE.md&lt;/code&gt; — for Claude Code&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;.cursorrules&lt;/code&gt; — for Cursor&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;AGENTS.md&lt;/code&gt; — for Antigravity / agent-mode editors&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They're hand-maintained right now. They share a structure:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Stack table&lt;/strong&gt; — what tools and at what versions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;File map&lt;/strong&gt; — top-down where things live&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Patterns&lt;/strong&gt; — 5-10 lines of code per recurring shape&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Conventions&lt;/strong&gt; — strict TypeScript, Tailwind tokens only, no comments unless &lt;code&gt;// Why: ...&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploy&lt;/strong&gt; — exact command&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Without this, opening the kit in Claude Code and asking "add a new screen" produces something&lt;br&gt;
that almost-works but uses a different naming convention than the rest of the codebase.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0wa0yfecqsh4wogg0lut.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0wa0yfecqsh4wogg0lut.png" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  5. Tokens, not hex
&lt;/h2&gt;

&lt;p&gt;We never put a hex color outside the tokens package. Every component reads &lt;code&gt;--background&lt;/code&gt;,&lt;br&gt;
&lt;code&gt;--primary&lt;/code&gt;, &lt;code&gt;--card&lt;/code&gt;, etc. — variables defined by &lt;code&gt;@otfdashkit/tokens&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This sounds like a cosmetic choice. It isn't. When an AI asks "make this button red" and&lt;br&gt;
the codebase has hex everywhere, the AI guesses a hex. When the codebase has only tokens,&lt;br&gt;
the AI either asks ("which red — destructive?") or reads the token file and picks&lt;br&gt;
&lt;code&gt;hsl(var(--destructive))&lt;/code&gt;. Either is better than a hardcoded color drifting into the&lt;br&gt;
codebase.&lt;/p&gt;

&lt;p&gt;We enforce this with &lt;code&gt;@otfdashkit/eslint-plugin-otf-design&lt;/code&gt; — it lints out hex literals and&lt;br&gt;
inline &lt;code&gt;style={{ background: '...' }}&lt;/code&gt; outside the tokens package.&lt;/p&gt;
&lt;h2&gt;
  
  
  6. Strict types are AI ergonomics, not just code quality
&lt;/h2&gt;

&lt;p&gt;We turned on &lt;code&gt;strict&lt;/code&gt; and &lt;code&gt;noUncheckedIndexedAccess&lt;/code&gt;. Every prop is typed. Every hook return&lt;br&gt;
is typed. No &lt;code&gt;any&lt;/code&gt;, no &lt;code&gt;as&lt;/code&gt; casts unless commented.&lt;/p&gt;

&lt;p&gt;The reason: when an AI tool generates a call like &lt;code&gt;useProjects().data.find(p =&amp;gt; p.title)&lt;/code&gt;,&lt;br&gt;
TypeScript catches the missing null check at edit time. The AI sees the error and adapts.&lt;br&gt;
Without strict mode, the bug ships.&lt;/p&gt;
&lt;h2&gt;
  
  
  7. Comments only for &lt;em&gt;why&lt;/em&gt;, never for &lt;em&gt;what&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;Almost every comment in the OTF kits starts with &lt;code&gt;// Why:&lt;/code&gt; or doesn't exist. We don't have&lt;br&gt;
"// fetch the user" above &lt;code&gt;const { data } = useUser()&lt;/code&gt; — that comment is just noise. A model&lt;br&gt;
reading the file already knows it fetches the user.&lt;/p&gt;

&lt;p&gt;But this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Why: Tamagui's defaultConfig pins every weight slot to 300 (thin), which makes&lt;/span&gt;
&lt;span class="c1"&gt;// &amp;lt;H1&amp;gt; headings render drastically lighter than `Text fontWeight=700` elsewhere —&lt;/span&gt;
&lt;span class="c1"&gt;// visually inconsistent. We override only the weight ramp via createFont.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;headingFont&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createFont&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;— this is gold for an AI tool. It encodes a &lt;em&gt;design decision&lt;/em&gt; that's not derivable from the&lt;br&gt;
code alone. If someone later asks Claude "should we drop this createFont override?", Claude&lt;br&gt;
reads the comment and pushes back: "no, removing this would regress the heading rendering".&lt;/p&gt;
&lt;h2&gt;
  
  
  8. The deploy script is in the repo
&lt;/h2&gt;

&lt;p&gt;Every OTF kit has a &lt;code&gt;scripts/deploy-railway.sh&lt;/code&gt; that owns the deploy. The hook in our&lt;br&gt;
&lt;code&gt;.claude/hooks/check-deploy-script.sh&lt;/code&gt; blocks raw &lt;code&gt;railway up&lt;/code&gt; so AI tools can't reinvent&lt;br&gt;
the deploy flow.&lt;/p&gt;

&lt;p&gt;The script:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Sources &lt;code&gt;.env&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Links to the right Railway project + service&lt;/li&gt;
&lt;li&gt;Runs &lt;code&gt;railway up --detach --ci&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Restores anything it changed via &lt;code&gt;trap&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;When Claude is asked to deploy, it runs the script. It doesn't construct its own &lt;code&gt;railway up&lt;/code&gt;&lt;br&gt;
invocation that might miss the env-source step or the &lt;code&gt;trap&lt;/code&gt;. Convention beats configuration.&lt;/p&gt;
&lt;h2&gt;
  
  
  9. &lt;code&gt;lessons.md&lt;/code&gt; saves you from rediscovering the same fix
&lt;/h2&gt;

&lt;p&gt;Every time we hit a non-trivial bug — Metro can't resolve a workspace package, dual-React&lt;br&gt;
crashes inside a webpack bundle, Tamagui's peerDeps don't auto-install — we append a lesson&lt;br&gt;
to &lt;code&gt;docs/lessons.md&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gu"&gt;## Symptom: `Unable to resolve "@otfdashkit/ui-native"` from a kit&lt;/span&gt;

&lt;span class="gs"&gt;**Cause**&lt;/span&gt;: Metro doesn't follow workspace symlinks across the monorepo by default
&lt;span class="gs"&gt;**Fix**&lt;/span&gt;: &lt;span class="sb"&gt;`npm install --install-links`&lt;/span&gt; in the kit's directory before &lt;span class="sb"&gt;`bun dev`&lt;/span&gt;
&lt;span class="gs"&gt;**Reference**&lt;/span&gt;: lessons.md ~line 375
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Our master &lt;code&gt;AGENTS.md&lt;/code&gt; has a hard rule: before reaching for a custom resolver / Metro config /&lt;br&gt;
plugin, &lt;strong&gt;grep &lt;code&gt;docs/lessons.md&lt;/code&gt; for the symptom&lt;/strong&gt;. If it's there, use the documented fix.&lt;br&gt;
Don't rebuild from scratch.&lt;/p&gt;

&lt;p&gt;This rule applies to AI agents too. When Claude hits "Unable to resolve" for the third time&lt;br&gt;
in three months, it grep's lessons.md, finds the fix, applies it, and doesn't rebuild a&lt;br&gt;
metro.config.js from scratch.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this gets us
&lt;/h2&gt;

&lt;p&gt;Watch a Cursor session in a kit set up this way. The user types "add a payments screen with&lt;br&gt;
a Stripe checkout button". Cursor:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Opens &lt;code&gt;.cursorrules&lt;/code&gt;, sees the "When you add a screen" pattern&lt;/li&gt;
&lt;li&gt;Reads &lt;code&gt;src/pages/home/dashboard.tsx&lt;/code&gt; to copy the structure&lt;/li&gt;
&lt;li&gt;Reads &lt;code&gt;src/hooks/useProjects.ts&lt;/code&gt; to copy the optimistic-update shape&lt;/li&gt;
&lt;li&gt;Reads &lt;code&gt;server/routes/projects.ts&lt;/code&gt; to copy the route shape&lt;/li&gt;
&lt;li&gt;Generates the new files, all naming-consistent with the rest of the codebase&lt;/li&gt;
&lt;li&gt;Suggests adding &lt;code&gt;STRIPE_PUBLISHABLE_KEY&lt;/code&gt; to env&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;No invented utilities. No hex colors. No new naming convention. The output looks like the&lt;br&gt;
existing codebase wrote it — because that's what was specified.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's coming
&lt;/h2&gt;

&lt;p&gt;Phase 6 of the OTF roadmap ships &lt;code&gt;@otfdashkit/ai&lt;/code&gt; — a CLI that takes one &lt;code&gt;otf.config.ts&lt;/code&gt; and&lt;br&gt;
generates &lt;code&gt;CLAUDE.md&lt;/code&gt;, &lt;code&gt;.cursorrules&lt;/code&gt;, &lt;code&gt;AGENTS.md&lt;/code&gt;, and &lt;code&gt;lovable.md&lt;/code&gt; from a single source.&lt;br&gt;
Until then, we hand-maintain.&lt;/p&gt;

&lt;p&gt;If you're starting a project from scratch, lifting these conventions wholesale will save you&lt;br&gt;
weeks of "why is the AI making things up" friction. If you want a working example, the&lt;br&gt;
&lt;a href="https://dev.to/docs/templates/saas-dashboard"&gt;SaaS Dashboard kit&lt;/a&gt; and the&lt;br&gt;
&lt;a href="https://dev.to/docs/templates/fitness-kit"&gt;Fitness &amp;amp; Wellness kit&lt;/a&gt; are the canonical implementations.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>softwareengineering</category>
      <category>tooling</category>
    </item>
    <item>
      <title>JetBrains open-sources Mellum2 to challenge third-party API limitations</title>
      <dc:creator>Dave Kurian</dc:creator>
      <pubDate>Tue, 02 Jun 2026 07:05:27 +0000</pubDate>
      <link>https://dev.to/davekurian/jetbrains-open-sources-mellum2-to-challenge-third-party-api-limitations-2mc9</link>
      <guid>https://dev.to/davekurian/jetbrains-open-sources-mellum2-to-challenge-third-party-api-limitations-2mc9</guid>
      <description>&lt;p&gt;JetBrains’ Mellum2 open source coding model is a real step-change: a 12B-parameter, on-premises AI infrastructure model, shipped open from day one. This isn’t a warmed-over code completion tool — Mellum2’s speed, scope, and native private-deployment break new ground for agentic AI. On March 25, 2025, JetBrains announced Mellum2 with honest ambitions: go where API-locked models like Claude Code never will. For teams serious about AI infrastructure, not just code suggestions, this changes the map.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mellum2 vs Mellum: how does the new model actually differ?
&lt;/h2&gt;

&lt;p&gt;Mellum2 is not just “Mellum, scaled up.” The difference is structural. Mellum (late 2024) was a proprietary 4B-parameter model, delivered as a code completion engine for JetBrains IDEs — and eventually open-sourced in April 2025. Mellum2 multiplies the capacity (12B parameters), but the leap is in mandate: from single-task autocomplete to a practical infrastructure brain built for multi-agent AI systems.&lt;/p&gt;

&lt;p&gt;Here’s what actually changes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Parameter scale:&lt;/strong&gt; Mellum2: &lt;code&gt;12B&lt;/code&gt; (with Mixture-of-Experts, see below). Original Mellum: &lt;code&gt;4B&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Capabilities:&lt;/strong&gt; Mellum did code completion, period. Mellum2 was designed to coordinate sub-agent tasks, compress context for retrieval-heavy pipelines, and route queries across models.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Open from launch:&lt;/strong&gt; Mellum2 shipped open-source “day one”, erasing the window between closed beta and broad adoption that limited “early Mellum.”&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Variant support:&lt;/strong&gt; Mellum2 ships base, “instruct,” and “thinking” models — the last capable of explicit reasoning steps, covering agentic requirements beyond simple codex tasks.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;From JetBrains’ own &lt;a href="https://thenewstack.io/jetbrains-mellum2-open-source-coding-model/" rel="noopener noreferrer"&gt;official announcement&lt;/a&gt;: "Mellum2 ... runs inference on infrastructure teams control themselves."&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Takeaway: Mellum2 is built for the agentic AI layer, not just for writing code faster — a mandate shift as much as a scale jump.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Mellum2 actually enables on-premises AI — where Claude Code cannot
&lt;/h2&gt;

&lt;p&gt;Most codegen AIs, including Anthropic’s Claude Code, demand third-party APIs. You send your codebase or context “to the cloud," process happens off-premises, and the outputs trickle back. For some orgs, this is fine; for regulated or privacy-minded infrastructure teams, it’s dead on arrival.&lt;/p&gt;

&lt;p&gt;Mellum2 is open source, designed to run &lt;em&gt;entirely on your hardware&lt;/em&gt; — no API calls, no vendor lock, no forced network hops. This enables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Private, air-gapped deployments:&lt;/strong&gt; Ship Mellum2 onto an internal cluster, leave the firewall closed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Guaranteed data residency:&lt;/strong&gt; Source never leaves your racks. No shared cloud cache, no cross-border risk.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Latency and control:&lt;/strong&gt; The Mixture-of-Experts setup means only 2.5B of the 12B parameters go active per-token, keeping inference snappy enough for chained orchestration in high-frequency agent workflows.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In infrastructure overlays — routing, retrieval pipelines, delegated (“sub-agent”) jobs — the round-trip time alone often kills any benefit with a cloud-only model. Mellum2 is tailored for these workloads, where “close to the metal” wins over generality.&lt;/p&gt;

&lt;p&gt;Security and compliance pressure, especially in finance, bio, and critical infrastructure, make this a must-have: Mellum2 lets you build agentic AI with zero third-party exposure.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Takeaway: Mellum2 is not just faster on-prem — it’s actually viable there, which API-locked models are not.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How to deploy and use Mellum2 now in real engineering stacks
&lt;/h2&gt;

&lt;p&gt;Ready to run it? Mellum2’s open-source stack and local mode mean you’re not waiting for a commercial host. Here’s your starter workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Get the model files:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
JetBrains releases Mellum2 (base, instruct, thinking) under an open license. You’ll need enough disk for a 12B model and RAM/GPU for your preferred throughput. (Real file names/links depend on the release, source link above.)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Run local inference:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Standard practice is using a serving engine like llama.cpp or vLLM, but adapt for Mellum2-specific quirks if needed. Example launch (assuming vLLM and CUDA):&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   vllm-server &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;--model&lt;/span&gt; /models/mellum2-instruct &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;--dtype&lt;/span&gt; float16 &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;--gpu-memory-utilization&lt;/span&gt; 0.9
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Adapt &lt;code&gt;--model&lt;/code&gt; path, dtype, and memory flags to your hardware.&lt;br&gt;&lt;br&gt;
   For an instruct-mode endpoint, ensure serving the right variant.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Integrate agentic workloads:&lt;/strong&gt;
For developers orchestrating sub-agents (e.g., task routing, context caching), plug Mellum2 at the coordination layer. Use it for:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Code completion and review&lt;/strong&gt; within your IDE
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Retrieval compression&lt;/strong&gt; for answering questions over large docs (indexing pipelines)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sub-agent management:&lt;/strong&gt; Have Mellum2 broker, break down, and sequence jobs in your own job-queue system.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here’s a simple Python client using OpenAI API compatibility (assume Mellum2 server running locally):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;   &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;openai&lt;/span&gt;
   &lt;span class="n"&gt;openai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;api_base&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;http://localhost:8000/v1&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
   &lt;span class="n"&gt;openai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;sk-local-&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

   &lt;span class="n"&gt;resp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;openai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;ChatCompletion&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
       &lt;span class="n"&gt;model&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;mellum2-instruct&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="n"&gt;messages&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
           &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;role&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;system&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;content&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;You are an expert code routing assistant.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
           &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;role&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;user&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;content&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Decompose the following task into sub-agent jobs: implement distributed cache with LRU and sharding.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
       &lt;span class="p"&gt;]&lt;/span&gt;
   &lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;resp&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;choices&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;message&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;content&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For JetBrains IDE integration, watch for pluggable language server protocol (LSP) or Mellum2-native plugin updates.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Takeaway: Mellum2 can run today in your own racks, with the workflow as close to “point and serve” as a modern AI stack allows.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;[[IMG: schematic of an on-prem server running Mellum2 side-by-side with code editors and an agent routing system]]&lt;/p&gt;

&lt;h2&gt;
  
  
  What does JetBrains mean by a "focal model" — and how does Mellum2 fit?
&lt;/h2&gt;

&lt;p&gt;JetBrains staff call Mellum2 a “focal model” — not a claim to out-benchmark frontier LLMs, but to nail one high-impact, high-frequency use case: software engineering orchestration. It’s not about broad generative smarts or world knowledge — it’s about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Speed and specialization:&lt;/strong&gt; Mixture-of-Experts means per-token inference uses only a working set of 2.5B active params. Real engineering stacks want wire speed and minimal context lag, not an extra few percent in synthetic “general coding” benchmarks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lean surface area:&lt;/strong&gt; Focal models accept narrower mandates — but optimize hard within those bounds, so your orchestration (sub-agents, retrieval, task routing) becomes reliable infrastructure, not novelty.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As JetBrains’ engineers put it: "This specialization ensures the model excels in software engineering environments while remaining lean and fast." Frontier experiments continue — meanwhile, “focal” keeps infra predictable.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Takeaway: Mellum2 is an infrastructure-bias model, built for tasks where latency and determinism matter more than general IQ.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The future: open source AI models as infrastructure control points
&lt;/h2&gt;

&lt;p&gt;Mellum2’s open-source release is part of a visible trend: heavyweight AI models open from first commit, not after-market. For emerging agentic AI, running open models on your own hardware starts becoming the norm, not just a fallback for the risk-averse.&lt;/p&gt;

&lt;p&gt;Industry is moving away from the “API-as-datacenter” pattern. It’s not just security rhetoric — control of source, weights, and inference enables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Auditable, modifiable logic:&lt;/strong&gt; Tweak, debug, or extend model behavior as needed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Community-driven variants:&lt;/strong&gt; Expect “instruct” and “thinking” derivatives to be tuned by integrators for very specific verticals, not just handed down from one vendor.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ecosystem independence:&lt;/strong&gt; Avoid getting trapped by upstream API changes, quota limits, or “region not supported.”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Where does OTF fit here? The value is in treating models and routing chains as a durable substrate &lt;em&gt;underneath&lt;/em&gt; the shifting landscape of models. Mellum2 may be central today, but with open models — and open orchestration frameworks — your workflow persists regardless of which model has the advantage next year.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Takeaway: Open-source models like Mellum2 put engineering teams back in control of their infrastructure layer, propelling a wider trend away from vendor lock.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;[[IMG: a code pipeline diagram, showing context retrieval, Mellum2 focal worker, and alternative local models in sequence]]&lt;/p&gt;

&lt;p&gt;Mellum2 open source coding model lands as something rare: a high-capacity, high-speed infrastructure model shipped open from the start. It’s not a mere code completion engine; it’s the first “focal model” to face agentic AI tasks head-on — routing, retrieval, orchestration — where API-bound tools like Claude Code cannot safely or practically go. Deployable on your hardware and modifiable by your own team, Mellum2 finally lets engineers prioritize privacy, speed, and specialization over lock-in and latency.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>news</category>
      <category>opensource</category>
    </item>
    <item>
      <title>JetBrains open-sources Mellum2 for private, high-speed AI coding infrastructure</title>
      <dc:creator>Dave Kurian</dc:creator>
      <pubDate>Tue, 02 Jun 2026 06:42:27 +0000</pubDate>
      <link>https://dev.to/davekurian/jetbrains-open-sources-mellum2-for-private-high-speed-ai-coding-infrastructure-1i3</link>
      <guid>https://dev.to/davekurian/jetbrains-open-sources-mellum2-for-private-high-speed-ai-coding-infrastructure-1i3</guid>
      <description>&lt;p&gt;Mellum2 open-source coding model: JetBrains’ fast AI alternative to Claude Code that runs anywhere&lt;/p&gt;

&lt;p&gt;JetBrains’ Mellum2 open-source coding model lands with the rare combination of both speed and genuine infrastructure freedom—a 12B-parameter Mixture-of-Experts designed for agentic orchestration where every token stays on your side of the firewall. In a space dominated by third-party API coding tools and restrictive cloud access, Mellum2 is the first mainstream step toward practical, on-premises agentic AI infrastructure. For AI engineers and teams who demand control, privacy, and tight data locality, Mellum2 enables use cases that are simply out of reach for Claude Code and similar offerings.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Mellum2? An overview of JetBrains’ open-source coding model
&lt;/h2&gt;

&lt;p&gt;Mellum2 is JetBrains’ freshly open-sourced, 12-billion-parameter code model built for infrastructure-level agentic AI. Announced in early June 2026, Mellum2 takes aim at a new class of AI engineering requirements: routing actions between sub-agents, managing retrieval contexts, and orchestrating code-based pipelines entirely within an enterprise’s control.&lt;/p&gt;

&lt;p&gt;The roots go back to Mellum—a 4B-parameter proprietary coding model JetBrains first fitted into its IDEs in late 2024, then open-sourced in April 2025. Mellum was single-purpose: pure code completion, optimized for a JetBrains-centric workflow. Mellum2 jumps categories. From day one, it is both open and specialized for the jobs that define real AI infrastructure: not just completing code, but coordinating agentic workflows and reasoning across multiple moving parts.&lt;/p&gt;

&lt;p&gt;Crucially, the shift isn’t just parameter count. Where Mellum was locked into a SaaS model and limited scope, Mellum2 is “open from the start,” as JetBrains put it in their own announcement. It launches with public weights, a permissive OSS license, and documentation built for self-serve deployment—making it a direct answer to self-hosted agentic AI ambitions, not just another cloud-bound product.&lt;/p&gt;

&lt;p&gt;Main data points:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;12B total parameters (Mixture-of-Experts, see below).&lt;/li&gt;
&lt;li&gt;Open-sourced in early June 2026 by JetBrains.&lt;/li&gt;
&lt;li&gt;Public repo, not limited to JetBrains IDEs.&lt;/li&gt;
&lt;li&gt;Focused on infrastructure tasks: agent routing, context compression, sub-agent orchestration.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If Mellum was prototype infrastructure, Mellum2 is built for real pipelines.&lt;/p&gt;

&lt;h2&gt;
  
  
  How does Mellum2 differ from Anthropic’s Claude Code?
&lt;/h2&gt;

&lt;p&gt;The dividing line is clear: Mellum2 runs wherever you control the stack. Claude Code and its kin are API-first, third-party cloud models. What does this mean in practice?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters and model design:&lt;/strong&gt; Mellum2 sports 12B parameters in a Mixture-of-Experts arrangement (active 2.5B per token), tuned for speed and high-frequency infrastructure tasks. While Anthropic doesn’t publish parameter counts for Claude Code, its design is optimized for cloud API access and general code understanding, not sub-agent orchestration.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Deployment model:&lt;/strong&gt; Mellum2 can be set up fully on-premises or on dedicated VPC infrastructure. There is no required internet-facing component or dependency on JetBrains itself after download. By contrast, Claude Code cannot be self-hosted and always passes your queries over third-party APIs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Privacy and data governance:&lt;/strong&gt; Mellum2 guarantees that all input code, context, and outputs remain under your infrastructure team’s control—crucial for industries with data residency or privacy requirements. Claude Code is, by design, a black box beyond API boundaries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scope of usage:&lt;/strong&gt; Where Claude Code is positioned as a context-rich coding assistant, Mellum2 targets the infrastructure “glue”—routing, context compression, and orchestrating the job of other agents and models, especially in sensitive, local environments.&lt;/p&gt;

&lt;p&gt;In short: Mellum2 is built to work wherever Claude Code isn’t allowed.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are the practical use cases for Mellum2 in AI development?
&lt;/h2&gt;

&lt;p&gt;Mellum2’s real strength is infrastructure flexibility. Its main use cases reflect this bias:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Model and sub-agent coordination:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Instead of brute-forcing everything through a general LLM, engineers wire up Mellum2 to manage the flow—splitting complex jobs between specialized agents, handling state, and routing context based on custom business logic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example: Using Mellum2 to broker tasks between retrieval agent and synthesis agent&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;routingPrompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
[task]
Type: information retrieval
Context: {query}
Actions: route to subagent A, then summarize via subagent B.
`&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mellum2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;routingPrompt&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;customContext&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Context compression in retrieval pipelines:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
With expensive retrieval pipelines, compacting context before it reaches the main model is crucial for both speed and token budget. Mellum2’s focus on rapid inference makes it suited for pre-filtering and summarization.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python run_mellum2.py &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--task&lt;/span&gt; compress_context &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--input&lt;/span&gt; data/chunked_context.json &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--output&lt;/span&gt; data/short_context.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Private on-premises inference:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Compliance, data residency, and regulatory constraints often bar cloud models entirely. Mellum2 fills the gap, running on private clusters and answering code prompts where API-based assistants are non-starters.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Multi-agent workflow management:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Orchestrate complex pipelines (e.g., code review, static analysis, deployment scripting) by letting Mellum2 act as the “glue” between tool outputs and downstream triggers—without ever hitting the public cloud.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enterprise impact:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
In short, Mellum2 lets enterprises finally run agentic AI tooling in environments where Claude Code and co. will never be certified.&lt;/p&gt;
&lt;h2&gt;
  
  
  How to deploy and use Mellum2 today? Step-by-step guide for developers
&lt;/h2&gt;

&lt;p&gt;Mellum2 is available from JetBrains’ official public repository. A typical deployment—local or cloud-based—can be up in under an hour, assuming adequate hardware for a 12B MoE model.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Requirements:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hardware capable of 12B parameter models (multiple A100s recommended for production; smaller cards work for dev).&lt;/li&gt;
&lt;li&gt;Python ≥3.10.&lt;/li&gt;
&lt;li&gt;PyTorch ≥2.1 or compatible.&lt;/li&gt;
&lt;li&gt;~32GB+ RAM, fast storage for weights.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;1. Download weights&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone 
&lt;span class="nb"&gt;cd &lt;/span&gt;mellum2
&lt;span class="c"&gt;# Download official weights (link in repo readme)&lt;/span&gt;
python scripts/download_weights.py &lt;span class="nt"&gt;--variant&lt;/span&gt; base
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Set up environment&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python3 &lt;span class="nt"&gt;-m&lt;/span&gt; venv venv
&lt;span class="nb"&gt;source &lt;/span&gt;venv/bin/activate
pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Run the model&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To launch Mellum2 on a single-GPU node for dev/experimentation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python run.py &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;--model_dir&lt;/span&gt; ./weights/mellum2-base &lt;span class="se"&gt;\&lt;/span&gt;
    &lt;span class="nt"&gt;--mode&lt;/span&gt; instruct
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both “instruct” and “thinking” variants are available. The “instruct” mode answers directly, whereas the “thinking” option produces a reasoning trace before an answer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Integrate with JetBrains IDEs (or your workflow)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JetBrains IDEs: Point the in-IDE AI assistant to your local Mellum2 endpoint using the built-in AI provider configuration UI.&lt;/li&gt;
&lt;li&gt;Custom tools: Expose Mellum2 as a REST endpoint or implement as a sub-agent in your workflow (see provided Python wrappers).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. Extend as needed&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Mellum2’s open repo enables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Custom post-training or fine-tuning for your codebase/domain.&lt;/li&gt;
&lt;li&gt;Experimentation with context pipelines and agent routing.&lt;/li&gt;
&lt;li&gt;Building adapters for other code and agent infrastructure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpbsepgueduk85oobq0dj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpbsepgueduk85oobq0dj.png" alt="a block diagram showing Mellum2 orchestrating sub-agents and retrieval pipelines, fully on" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are no phone-home, callout, or cloud dependencies by default. Once installed, Mellum2 is yours—no caveats.&lt;/p&gt;

&lt;h2&gt;
  
  
  What makes Mellum2’s architecture and performance stand out?
&lt;/h2&gt;

&lt;p&gt;Mellum2 isn’t just scaling up parameter count. Its Mixture-of-Experts (MoE) architecture means that while the weights total 12B parameters, only 2.5B are active per token. Each input is processed by a routed subset of 64 experts, rather than the full dense network.&lt;/p&gt;

&lt;p&gt;What does this actually yield?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Speed:&lt;/strong&gt; By limiting the number of active parameters, Mellum2 attains fast inference even on hardware that struggles with full-dense 12B models. It’s built for latency-sensitive infrastructure, not maximal model size.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Specialization:&lt;/strong&gt; JetBrains’ engineers call Mellum2 a “focal model”: lean, targeted for engineered high-frequency tasks (routing, retrieval, orchestration), not general conversation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Variants:&lt;/strong&gt; Two shipped variants:

&lt;ul&gt;
&lt;li&gt;“instruct” — answers directly, for fast agentic commands.&lt;/li&gt;
&lt;li&gt;“thinking” — explicit step-by-step reasoning trace, for multi-step agent flows.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Efficiency:&lt;/strong&gt; MoE routing makes it more viable to deploy Mellum2 on mid-range enterprise hardware than you’d expect for its parameter size.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;As JetBrains frames it: frontier models will keep pushing raw size and generality, but real AI products need smaller, sharper “focal models” to glue agentic systems together practically.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are the limitations and future prospects for Mellum2?
&lt;/h2&gt;

&lt;p&gt;Mellum2 is not trying to be a general-purpose coding assistant or conversation partner. Its “focal” specialty is a strength for infrastructure, but you can hit limits if you treat it like a ChatGPT replacement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Limitations:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Out-of-scope for creative suggestions or open-ended coding support.&lt;/li&gt;
&lt;li&gt;Not competitive with cloud LLMs for massive context or full-app codegen.&lt;/li&gt;
&lt;li&gt;Dependency on community for further post-training/integration (but repo is open from day one).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mellum2 is already in active use and JetBrains is inviting the open-source and research communities to contribute, fine-tune, and experiment on real workflows. The roadmap (per hints in the announcement) includes variants for more agents, context formats, and even tighter IDE integration.&lt;/p&gt;

&lt;p&gt;In the broader AI dev tooling landscape, Mellum2 signals a move: real, on-prem agentic AI can now be practical, not hype. For industries where owning your entire inference and orchestration stack is a must—not just an ideal—this is the first credible open offering.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxyllj0iztofvqls76tiz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxyllj0iztofvqls76tiz.png" alt="a schematic showing Mellum2 running within a locked-down enterprise network, unreachable b" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;The Mellum2 open-source coding model is a real advance: a lean, fast, locally routable agentic AI built for the messy, tactical infrastructure jobs that general coding assistants cannot touch. By sidestepping API dependencies and cloud restrictions, Mellum2 finally lets engineering teams run and evolve their own agentic AI infrastructure privately—enabling use cases from secure pipeline orchestration to flexible context retrieval that simply cannot be done on Claude Code. For those ready to move AI out of the public cloud and into real, auditable pipelines, Mellum2 is usable and extensible today.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>coding</category>
      <category>llm</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
