Web applications with Shiny and React and AI (Winston Chang, Posit) | posit::conf(2025)
Web applications with Shiny and React (and AI) Speaker(s): Winston Chang If you've ever wanted to have complete control over the UI for a Shiny application, this talk might be for you. In this talk I'll show how to integrate a back end written in Shiny (for R or Python) with a front end written in React.js. This lets you combine Shiny's reactivity with the flexibility of the React web development ecosystem. In the past, writing a front end in React was a large time investment, and would be reserved only for a serious project. However, with today's agentic AI coding tools, it can make sense to create a React front end even for smaller-scale applications. But even with AI involved, you will still need to know some React or be willing to learn about it. GitHub Repo - https://github.com/wch/shiny-react CLI tool - https://github.com/wch/create-shiny-react-app Anthropic Dashboard - https://github.com/wch/anthropic_dashboard posit::conf(2025) Subscribe to posit::conf updates: https://posit.co/about/subscription-management/
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
I'm talking about web applications with Shiny and React and AI. I promise it's that it's in parentheses there It actually is important in an indirect way for this stuff
So, you know Sort of by sort of wondering like why are you here listening to this talk? It's possible I guess you walked into the wrong room, but I have some theories first off. I everyone here probably certainly knows about Shiny and then probably most of you use Shiny Maybe you've heard about React and you're interested in learning more about it Okay, maybe you want more control over the UI in your Shiny applications
Maybe you want to use Shiny But there's other people who tell you that you can't because it won't integrate with your organization's website or Maybe you have a Shiny application that you want to that You know that you're done working on and you want to hand it off to like a web development team All right. So these are reasons that you might be interested in using React with Shiny
What is React?
Right now here's another question. What is the big deal with React if you've you know, if you've If you know anything about the web development world, then I'm sure you've heard a lot about React So it is one of the most popular web frameworks out there. If not the most popular one
It uses reactivity to make it easier to reason about the state of your application But for in when you're talking about React, that's the state within the web browser within the front end. Okay?
Now React it focuses on state and component logic the the visual styling is a separate issue It's a separate domain, but that also means that it can work with a large range of styling frameworks All right, and also there's there's a lot of React UI components out there just that that are just there you can you can grab them and Incorporate them in React applications and that can be very useful
Shiny overview and motivation
Right now let's talk about Shiny for a little bit. So everybody knows this Shiny is a web framework for R and Python And you don't need to to write HTML or CSS or JavaScript in order to create Shiny applications And that is a that is a great advantage of Shiny. You can just you just know R or Python you can create Shiny apps There's two parts to every to every application. There's the UI portion and the server portion, right? This is that's a very fundamental thing in the code that you write
The server part is a reactive programming framework Which we talked about a lot and again like like with React it That reactive programming framework helps you reason about the state of the application. So it doesn't get out of control Now the UI part of Shiny applications those components are designed to work well together and with a server part
But maybe some questions here so What if this Shiny app's UI was created separately from the server? What could you do if the UI was written in JavaScript written completely in JavaScript What if you want to use a different styling framework? What if you want to have use reactivity in the front end and reactivity in the back end? Right because Shiny for if you're just writing a regular Shiny app, you just have reactivity in the back end
And so that leads us to React to using React with Shiny
React basics: useState
So let me start off by showing you some basics about React. This is like the very very basic stuff with React So in React there's function called useState and this lets you create a reactive value So if I say useState and I give it this this is an empty string here it creates The state variable. I'll call it a reactive value Called Val here and then there's an it provides you with a function called setVal If you call setVal It will set Val to this string here. It's a hello
So if you access Val then it says its value is hello. That's not that seems pretty straightforward And since this is a string in JavaScript, you can do stuff like Val dot to uppercase and it'll it'll uppercase that that string
So here's a little Demonstration of that so I can type in some text. Hello And it's capitalizing it here So this is this is done with React And every time I type in the letter here it's calling setVal and Then this part here is accessing the value and because it's reactive this it just sort of happens automatically that changes Changes here result in changes here
All right, so that's that's the nice thing about programming React
Okay, another Useful thing to know about is that the values aren't fixed to a single UI element. So Here I have a state a reactive value. It's starting at zero. I've got a slider But this like number input here and another fancy number display down here and if I move this all those move together I can also change the value from the numbers here and this number input And then here's another fun thing. Is that if I move this up It's also connected to the the color of this box that it's in
All right, and so this is a diagram that sort of illustrates how this works there's all of these All of these UI elements are connected Through this this reactive value right here. So right now it's a hundred if I move this slider It changes something else and all these things they move together They're all they're all they all reflect what's happening here and some of them can can alter it
Introducing shiny-react
All right, so in React useState right state and it reads state entirely on the client now In this past year. I've been spending a lot of time writing React code and I've had this question like What if we could extend that state all the way to the server?
So I I found it frustrating that a lot of the times if I was doing stuff in React Like I'd have to like manually send a message to the server and that was I found that to be awkward and I Wanted a better way to do it so That led to creating shiny-react so here's some basics with that
With shiny-react there's a function called useShinyInput now this works just like useState Except you pass in this extra thing here. This is a string. This is an input ID So in this case, it's called text in and if I call setVal. Hello It'll do a couple things it'll I can ask if I access Val that'll be hello and also it will set an input value Which you can read it on the server side. So in R that's input dollar text And this is just like any other input value and in Python, it's input dot text in and you call it as a function
All right, so that's that's all you have to do On the server side if you want to use that You can consume that like you normally would an input
But if you want to send stuff back you can use you can just set an output value here So we'll call it output dollar text out And then I'm just uppercase in that input string and I'm using a function called renderJSON. I'll explain that in just a moment In Python, it's just the normal Python output there renderJSON lets you send More complicated data. So right now. It's just sending strings, but you can send like lists or Dictionaries well in Python named list in R and they'll be serialized to JSON and you can just consume it on the client side
And to read it on the client side you call useShinyOutput and you pass it this output ID And then that gets assigned this variable out there Alright, so so useShinyOutput reads Shiny output values and that is really the heart of shiny-react, that's that is most of it right there
useShinyOutput reads Shiny output values and that is really the heart of shiny-react, that's that is most of it right there
So Here is a shiny-react app. So if I say hello, it's capitalizing it like it did before but this time it's taking a round-trip All the way to the server that's running Shiny and then the server's capitalizing and sending it back to the client That's all happening reactively
You can also do some other useful stuff like have image outputs here So this is a plot that's generated on the server And this is there's some various inputs here. So this is the iris data set. Of course, you can change the filtering You can change the type of plot box plot and scatter plot and you can have regression lines that show up there So that's pretty standard Shiny stuff and it will work here using this image output React component
But another useful thing you can do Is that you can render the plot on the client side as well. So this is using observable plot It's sending the data using that renderJSON function It's sending the data to the client and then it's rendering here and that's nice because you can you know You can do this interactive graphics here because this is implemented in JavaScript and this is you know, this is reactive It's it's doing stuff on the server when I've changed this this switch here. It's it's sending a different set of data to the client to render
Oh, and this is something that you you know, you do need like R or Python to do to do this linear regression, I mean The previous things you probably didn't but here you do I mean, maybe you could do a linear regression in JavaScript, but I think it'd be a lot more difficult
All right, and once again the values aren't fixed to a single UI element so like a normal Shiny applications you know if you have a like a text input with some ID that's that's the only thing that can have that ID and that can Can write to that input value here we have All of these elements are connected to that same Input value and then when we change it, it's sending it to the Shiny server Right and this in this case, it's it's being called it's called X
All right So that's that can be handy to have multiple things In the in the client side that are all talking to each other with this value before it's sent to the server
Another useful thing you can do is you can collect multiple values and then send them send them together as a single input value So let's say, you know enter name Winston see what animals I like and how confident pretty confident. They're like all these animals and Right now so that hasn't sent anything to the server yet. That's all happening on the client. This is all these are useStates That's all React when I click submit here Then it's setting the Shiny input value and it's sending all it's one thing as it's JSON here So in R that will come in as a named list and in Python. That's a dictionary
Getting started with shiny-react
All right, so what do you need to build a shiny-react app well, of course you need Shiny for R or Python You need to have node.js installed in your computer So that might be an unfamiliar thing for for some of us here Right now you need to be familiar with the web development ecosystem or be willing to learn about it and You also need some knowledge of React or again a willingness to learn about it
All right now here's another question I'd be wondering is like why now why are you talking about shiny-react now? Watch me back up for a sec before you get that first bullet point. Well, this is like I said earlier this is something that I had sort of toyed around with earlier this year, but then I'd set it aside and but recently in the last Month or two we've had some users asking about using Shiny with React some users and customers So like I'm thinking about it again
and also somebody withdrew their talk two weeks ago, so so I I Sent a proposal to the committee and the conference committee and they accepted it. So I've been working a lot in the last two weeks on this and the talk so this conference definitely conference driven development
And also one that really relevant important thing is that the AI and AI tools are finally good enough to be very Helpful for writing this and they're actually very good at writing React code. So that is very helpful
And also one that really relevant important thing is that the AI and AI tools are finally good enough to be very Helpful for writing this and they're actually very good at writing React code. So that is very helpful
Okay, now if you want to create a shiny-react app you can create from a template using this command here npx create-shiny-react-app and then you give it the name of the application you want to create or the directory npx will Download this from the NPM repository and then run it which there have been a lot of security incidents in the last week Related to that but for this particular thing this this I created this has no dependencies So it's just a JavaScript file that it runs
So you can run it and then it will create one from a template, so there's two templates There's a really basic one and there's one that's sort of scaffolded with a lot of tooling in there. So I'm gonna pick that one Available backends are Python. Let's pick R and Include this cloud MD and shiny-react MD for LLM assistance. I want to include that as well because I want their help
So I'm gonna run it and then it will create one from a template Because I want their help So after you do that You can just run this stuff here. I'm just gonna copy and paste it CD new app go that directory NPM install will install the JavaScript dependencies. This is where the nefarious stuff could come in. I Hope it doesn't That's unfortunate. That's the unfortunate reality of the world that we're in right now And then NPM run dev this will build the front-end JavaScript and then launch the Shiny app
Alright, so it's downloading that stuff Okay, and it's running it. Let's Copy and paste this URL Okay All right, and this is what you get this is a very very basic. Hello world app And then you can go in here. You can open up your editor and you know work on this and modify it All right. So that's how you get started
What's in the template
and There is there's a fair bit of configuration and tooling in there. So it's I really recommend using this All right, so what's included in the template so there's a basic shiny-react app what you saw shadcn UI components that name is awful But these are this is a very popular component Library for React. It's not really library, but Call it maybe a family of components. It's dealt with tailwind CSS There's editor and build configuration stuff in there and there's optional Reference files for AI coding agents one. That is just a general cloud MD file that's about the project and one that tells it how to use shiny-react because the LLMs don't know about that yet There's also an MCP server configuration of how to access the shadcn component registry
I'll talk about that a little bit more in a minute now You can change any of these things that you want. This is just what starts with the template
Using AI coding agents
Right now if we're using AI coding agents, like I said earlier LLMs are very very good at writing React code So there's I mean and there's a lot more code you have to write then with a normal Shiny UI So it's it's very nice to have an LM that can do those things or can do a lot of it for you You still have to get in there and like fix things And you have to understand things, but it can do a lot of bulk of the work for you
You should make sure using the latest model for Claude Code That'd be like sonnet 4 or opus 4. I was working with a colleague Doing the stuff and it was You choose it in Claude Code and it was producing some like just like weird bugs and it wasn't doing a good job And then we looked and it turned out he was using sonnet 3.7. So it was it's that's noticeably worse than 4 All right, ask it to make a plan before writing the code That's important because otherwise they can sort of make a mess out of things And work incrementally don't don't ask it to like one shot entire application
Now if you have an existing Shiny app, you can ask it to convert to shiny-react that can be That can be that can work well, I mean I haven't tried it too many times But when I have it's done a decent job at it, but you again you're you are gonna have to get in there and modify things yourself
Demo examples
Let's take a look at some examples so this is a So this is a Dashboard for our Anthropic API usage. This is synthetic data. This is not real data and You can see I mean it did the bulk the LLM did the bulk of the coding for this so, you know You can change the date range I can sort in the table here and that will affect the plots. So it's it's pretty nice
And again, this is this something that the LLM did most of the work I had to get in there and fix stuff some of the hard stuff But LLM did most of the work And I know some people have objections to that But this wouldn't have existed without the LLM because this is not that important of a project But you know instead of taking like a week or whatever to do this. Well, it took like less than a day I gave it I gave it the Anthropic API documentation so that I would know How to access the API and I told it to read these these markdown files and then you know, write me this application
All right, I'm gonna skip the next one the next time I have in the interest of time
Yeah, there's a little theming here I'll come back to this so the shadcn UI this is a It's like sort of a component library kind of and the reason that that It uses it in the template is because these LLMs are trained to use it So if you if you've ever used like the Anthropic artifacts Featured where it writes a web app for you in the chat thing. It uses these shadcn Yeah, so shadcn UI components and it's very good at doing that. So that is So, you know, that's why I decided to lean into it for that template
And then with this theming thing this uses those those components as well. The LLM wrote this thing for me, too So it's kind of fun. You can choose different Different themes It's kind of a fun one. All right, we'll just go on so the state of shiny-react
State of shiny-react and next steps
So it's brand new. Like I said, this was This would not have existed at the in this state if it not had not been for somebody dropping out of this talk slot So it's very very new. It's experimental and API might change but there's also is not much to it a Lot of you know, there's there's a lot of complexity in front-end stuff, but that's all somebody else's problem This is this is shiny-react is mostly just about communicating from the front end to the back end
There's things that still need to happen like better automatic reconnection and state restoration I think we have an idea of how we can do those things and Also some better error notifications. There's a lot of like little things like that That still need to happen for this
All right, and here's some useful resources shiny-react repositories these slides here And Yeah some other Repositories so and these slides you might have guessed this this is actually a shiny-react app this whole thing So that's why I was able to interact with it in that way Okay. Thanks
So, I think we have time for one question and the question is is there a reason you prefer reactive vanilla JS or other JavaScript frameworks Not really I just started using it as very popular and it seems the LLM's are good at writing React code So those are those are my reasons
