The Web Dev Challenge
Mike and I asked ourselves - “how do we show devs that our new TypeScript framework for using LLMs in your components is awesome?”
For me, to see how good a devtool is, I want to see it in action. Show me the code. Show me what I can build. What works? What doesn’t work? Where are the rough edges?
I think a lot of developers think like that.
Which is exactly why we decided to sponsor an episode of Code TV’s web dev challenge where 3 teams were challenged to build the most important app of the day - breakfast.
What did they build?
Team Descaled with Brian and James built the sausage link shortner - a fun take on a link shortner that is all about breakfast, uses generative ui, is interactive, and even includes analytics (they did that all in 4 hours?!?)
Team Git ‘n Grits demoed a fun take on a food delivery app where the ui is assembled based on the user’s intent.
Team Coastal Coders built a breakfast themed recipe brain using hashrown.
Wait, what is hashbrown?
Oh, let me back up just in case. Hashbrown a TypeScript framework for using LLMs in your components.
You might be wondering “What can do I do with an LLM in my web app?”
Build agentic UIs that render real Angular or React components
Orchestrate multi‑agent flows with clean handoffs using typed state and structured outputs
Ground AI with tool calling that is built in the client of your web application - so it has access to app state, authentication, user context, and more
Run stateful, streaming chat that drives the app (navigation‑free, side‑effects included)
Use a safe in‑browser JS runtime for quick 🤯
How can I expose components to the model for generative UI?
Using an LLM in your React app is as simple as using a hook:
// 1. Create the UI chat hook
const chat = useUiChat({
// 2. Specify the collection of exposed components
components: [
// 3. Expose the Markdown component to the model
exposeComponent(Markdown, {
description: 'Show markdown to the user',
props: {
data: s.streaming.string('The markdown content'),
},
}),
],
});And for Angular, it’s just a resource:
// 1. Create the UI chat resource
chat = uiChatResource({
// 2. Specify the collection of exposed components
components: [
// 3. Expose the MarkdownComponent to th emodel
exposeComponent(MarkdownComponent, {
description: 'Show markdown to the user',
input: {
data: s.streaming.string('The markdown content'),
},
}),
],
});Watch the Show 🍿
It’s like The Great British Bake Off - but for web devs. I think you’ll like it.
Learn More
Check out hashbrown.dev to learn more, read the docs, scope out the api, and play with the sample apps.
Sides
Boris and Andrew from Vercel wrote a great piece on how to build MCPs - designing for the model and not for the developer.
The upcoming AI for the rest of us conf is coming up in early October and it looks to be a great conference. Mike just want to Angular Connect in London to speak, so maybe its my turn to go hang out in one of the greatest cities on the planet. 🤔
Annie gave me a good laugh with her blog post calling on all tutorial and docs authors to listen a bit closer. Writing tutorials and docs is hard work. Annie is keeping us all a bit more honest with this one, thanks Annie!
Workshops
Want to learn more about Hashbrown and building generative user interfaces? Join us for our online workshops kicking off in October. We cover AI fundamentals, using structured completions to simplify forms, building chatbots that stream user interfaces, and advanced generative UIs that leverage Hashbrown’s JavaScript Runtime.
We’ll be teaching a React version on October 13 and an Angular version on October 14. You can use the discount code THEGRAVY2025 to get 20% off your ticket. We’d love to have you there!