Загрузка видео...

Не удалось загрузить видео

На главную

We’re open sourcing ArrowJS 1.0: the first UI framework for coding agents. Imagine React/Vue, but with no compiler, build process, or JSX transformer. It’s just TS/JS so LLMs are already *great* at it. AND run generated code securely w/ sandbox pkg. ➡️

241,151 просмотров • 7 месяцев назад •via X (Twitter)

Комментарии: 54

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

The sandbox works by parsing the TS AST for our html calls, then replacing the reactive portions with identifiers. It then spins up a new JS environment inside WASM using QuickJS and links the internal virtual DOM to the external references, events occurring externally are safely transmitted to the internal representation where full JavaScript and arrow runs. DOM changes are restricted to these “owned” html blocks and are send back via message. This means llm generated JS is never exposed to the window, cookies, DOM etc - only to the DOM nodes it defined. Those are then mounted inside a web component with shadow DOM enabled (by default) to allow style isolation, if you want it, if you don’t it can disable the shadow DOM. Any questions?

Фото профиля designer
designer7 месяцев назад

first? maybe tenth

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

Interesting. Please refer me to the other 9

Фото профиля Matt Wood
Matt Wood7 месяцев назад

@chriswallace • • • •

Фото профиля designer
designer7 месяцев назад

@jpschroeder thanks Matt, so at least fifth @jpschroeder

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

These are all exactly what Arrow tries to solve, none of them a new UI framework. Thats not a dis, they are all valuable in their own ways: - json-render: pre-defined catalog, rendered by other frameworks. arrow is a ui framework itself. - a2ui: pre-defined ui components. - open-json-ui: closer, but also pre-defined - ag-ui: not at all a ui framework its a ui interaction protocol Arrow, is unique. Its truly its own ui framework, similar to React or Vue, but shares no DNA. It is intentionally just typescript so agents dont need further learning, and it has its own security model from running real TS in a safe way while patching the DOM.

Фото профиля Matt Wood
Matt Wood7 месяцев назад

@chriswallace I really like your sandbox idea! Though, I don't think using React/Vue inherently imply forcing the models to learn anything they don't already know. I'm excited to try it out

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

@chriswallace Oh i agree, it already knows those really well. But if I introduced a new framework with a custom DSL it *would* be a problem. The "native ts" nature of arrow is the only reason it works so well day one.

Фото профиля FileCity
FileCity7 месяцев назад

@jpschroeder Great job on ArrowJS 1.0! Made you a full narrated FileCity tour + visual map of the reactive UI framework for coding agents:

Фото профиля brian flynn
brian flynn7 месяцев назад

@NewsworthyCLI

Фото профиля Simdi Jinkins
Simdi Jinkins7 месяцев назад

Why not

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

Just go read the docs

Фото профиля Владимир Шамшеев ❤️🇺🇦
Владимир Шамшеев ❤️🇺🇦7 месяцев назад

@nintharc ${Component()} instead of Lit’ <${Component} /> is cool btw (mixing $ with other characters is an unreadable mess, although in the age of AI it doesn't really matter)

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

@nintharc TypeScript alllllll the way down.

Фото профиля Jaydan Urwin
Jaydan Urwin7 месяцев назад

Very cool! I got away from HTML template literals though because agents are better at writing JSX. Nested backticks mean they have to have to be aware of other parts of the file since the back ticks can break the template. With JSX it doesn't have to be nearly as careful.

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

Try this. It works great

Фото профиля Nick e/code
Nick e/code7 месяцев назад

Just the other day I thought of Formkit, and how good positioned you are for what's happening. Cool!

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

more to come on that front too!

Фото профиля Arjen
Arjen7 месяцев назад

In the big 26…

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

oops! we'll get that forwarding

Фото профиля Dev Agrawal
Dev Agrawal7 месяцев назад

does this need an entirely new framework? you could do this with @solid_js

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

@solid_js Sure, but why? I love my little arrow, I love no build, I love how this sandbox worked, so I made it and published it.

Фото профиля Dev Agrawal
Dev Agrawal7 месяцев назад

@solid_js just checking, completely valid to build a custom framework if you want

Фото профиля John Ennis
John Ennis7 месяцев назад

Awesome, I cannot wait to combine this with the @stitchbygoogle SDK!

Фото профиля WAGMİ 100x💎
WAGMİ 100x💎7 месяцев назад

wondering how arrowjs handles code injection threats with the sandbox set up. with no compiler or build process, are common safeguards still in place?

Фото профиля Andrei Hasna
Andrei Hasna7 месяцев назад

pretty badass

Фото профиля symbols
symbols7 месяцев назад

Very cool

Фото профиля robot 2.0
robot 2.07 месяцев назад

@jasonkneen interesting

Фото профиля David Boskovic
David Boskovic7 месяцев назад

literally was going to build this - we must get to a zero build future thanks man

Фото профиля Satya Fariz
Satya Fariz7 месяцев назад

what problems does it solve?

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

1. It's a novel no-build ui framework. You can literally run it off a CDN. 2. The sandbox provides a security model for running ai-generated code directly in the browser while patching the *actual* DOM. 3. Its totally native TypeScript so LLMs dont need to be trained on it.

Фото профиля Saïd Aitmbarek
Saïd Aitmbarek7 месяцев назад

Looks quite elegant I implemented a more basic UI/UX for my new agentic platform Will prototype Arrow instead

Фото профиля Omar Ezzat
Omar Ezzat7 месяцев назад

This might become the most used ui framework There is infinite software demand

Фото профиля Paxaral
Paxaral7 месяцев назад

Really cool. Question: *can* you support JSX, opt-in, for cleaner syntax? I like that it doesn't require it, but I'm not opposed to *having* it. Many SSR frameworks support returning jsx natively anyways nowadays.

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

I suppose you could, but it sorta defeats the purpose.

Фото профиля Carlos Alberto
Carlos Alberto7 месяцев назад

I have no clue why everyone uses react. The bloat is unbearable. Thanks for your service.

Фото профиля The frustrated programmer
The frustrated programmer7 месяцев назад

One quick suggestion - try to add open lang ( support along side JSON so that the framework becomes robust and won't break interms of partial responses and will actually reduce the toke cost as well (also increase speed)

Фото профиля Asadbek Omonboyev
Asadbek Omonboyev7 месяцев назад

Coool, I'll try it out

Фото профиля Jukka
Jukka7 месяцев назад

@jasonkneen Finally!

Фото профиля Jon K. Wheeler
Jon K. Wheeler7 месяцев назад

Love that you've kept this project going over the years!

Фото профиля CHRIS DOLINSKI
CHRIS DOLINSKI7 месяцев назад

Awesome job, been meaning to get to this. Will use yours structured data-to-ui Added a UI tab that generates UI with arrow to @apinowfun endpoints Can see an example here:

Фото профиля ikan laut
ikan laut7 месяцев назад

this is so amazing

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

Thanks!

Фото профиля Reve
Reve7 месяцев назад

Does i1.0 perform better than 1.0 alpha9

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

Muuuuuuuuuuuch better. Full mem pool recycling. Roughly equal to Vue 3 perf. Will post to framework benchmark soon

Фото профиля Reve
Reve7 месяцев назад

🚀

Фото профиля OneManSaas
OneManSaas7 месяцев назад

The LLM-friendly angle is brilliant. Been watching our corporate dev teams struggle with build toolchains for months - agents that can just write vanilla JS/TS without webpack nightmares could actually ship features instead of fighting configs.

Фото профиля AiDevCraft
AiDevCraft7 месяцев назад

The QuickJS WASM sandbox with AST-level isolation is the part that makes this production-viable, not just a demo. Running agent-generated UI without trusting the code is the hard problem everyone else punts on.

Фото профиля Sameer
Sameer7 месяцев назад

I legit thought it was related to the arrow, the svg LLM 😂

Фото профиля Amitay Keisar
Amitay Keisar7 месяцев назад

@grok why should I use that over React?

Фото профиля Fayaz Ahmed
Fayaz Ahmed7 месяцев назад

Interesting, testing it out now

Фото профиля Neto Camarano | AI Agents & AI Automation
Neto Camarano | AI Agents & AI Automation7 месяцев назад

@vercel_dev just launch Similar use case?

Фото профиля Obed
Obed7 месяцев назад

I know @RyanCarniato would find this interesting

Фото профиля Justin Schroeder
Justin Schroeder7 месяцев назад

@RyanCarniato I agree!

Похожие видео

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is *on* the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes *without* modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️

Justin Schroeder

11,705 просмотров • 6 месяцев назад