Build Coda AI views that hold up past the first prompt

I'm legitimately playing Flappy Bird on a Superhuman Doc. This is something you never could have done before in Coda or in Superhuman Docs. We're going to show you today. Hey, I want to try again. We're going to show you today everything about AI views, how to build them, best practices when you're building them, and limitations, things that they can't currently do. So stick along with us so we can see all those things. Got to get one more try.

All right, so AI views in Coda. Today we're going to look at what they are, how to build them, best practices as you build them, and then limitations. Let's start off with what they are and why they make building in Superhuman Docs so different and unique. First off, they are simply applications that are built on top of normal Coda table data. They allow you to sidestep the traditional boundaries of Coda in a lot of different ways. If I just want to simplify it to four things, they allow you to have different branding and UI. You can make it look completely your own or your own style. It makes difficult things easier. So if you're a new builder or user of Coda and you aren't a professional, it's going to make these difficult things a lot easier to do. It's going to make possible things worthwhile. Coda has always been an extremely flexible platform, and we've been able to do so much with it. But sometimes the end user experience wasn't really worth doing. And lastly, it's going to make new things possible.

All right. So we're going to look at a classic example of a seating chart. This is an example of something that you technically could have built in Coda, but the end experience wouldn't have been worthwhile, just not worth doing. But now with AI views, we can do it in Coda. So I have a list of people that I want to seat, the table they're going to be at, the seat they're going to be at, their company, and their title. If I go to my AI view, which I built with the prompt, I now have an interactive and draggable seating chart that reflects the table data. You'll see here I can take Priya, move them to different seats, seat five. I can take Tom, move him to table one. And you'll see that it does change the data. So let's go here and look at Alice. She doesn't have a table. And so we're going to seat her in one. So let's take Alice and put her at seat one, table one. If I go back to my actual table data, you'll see she's now at seat one, table one.

So that's your quick view of what they are. But now we're going to go look at how to actually build them. When you're building AI views inside of Coda and Superhuman Docs, it's as simple as a prompt and creating a new view of a table. So here I have a table of projects. I'm acting as a project manager and I need an interactive and fun timeline for my team to build. So all I'm going to do is take a prompt. This is one I pre-wrote earlier. Let's go ahead and copy that down. It's going to be a burger-themed Gantt chart. So we're going to press this little plus button here. It adds a view to an existing table, and we say AI view. When you do, you're going to be prompted with this screen right here. You're going to type in whatever prompt you want. There are ways to prompt this better and there are ways to prompt it worse. So stick around for best practices right after this.

We're going to go ahead and press send. And what you're going to see is it's going to open up this view on the right-hand side. It's going to work for quite some time and then it might interview you and ask you questions. And eventually it's going to build it. Typically it will take anywhere from one to five minutes to be able to build its view. So here we go. I'm going to say we need to ship projects. We need full Gantt power. Add an owner picker. And now it's going to start building.

All right. So during this, you can actually click out. You can actually go elsewhere. If I go to another page, for example, back to what are they, and then come back to how to build them, you'll see that it says open panel. So it is building in the background. So don't worry that your builds will get stopped. This is also the same way that you're going to edit your AI view anytime. So here I have one AI view I've already built. And when I want to edit it, I just come to this edit button and it opens up the panel here. Let's go back though and see ours built in real time.

All right. So our Burger Gantt gamification timeline has finally been built. There's so much going on here. It's probably a little overwhelming to see. But some of this is because we didn't follow a lot of best practices. So that's where we're going to go next. Move off how to build them, and let's go to some best practices.

So first off, let's just read through some of these. First off, your views in your table can read data live from other tables, but they can't edit them. I'm going to show you exactly what I mean with an example. Let me go back to what are they and back down to this task tracker. So you see here inside of this task tracker, each task row has a size. Effort: small, small, extra large, small, extra large, small. Why is there no medium? If I go to the actual live data, there are tasks that are in the medium band. You'll see medium, medium, medium, medium. But why aren't they showing? I have another table in my doc called effort permissions. And you'll see that I am Scott Weir and I'm not assigned to medium tasks. So I'm going to actually delete myself from here and assign myself to medium tasks. When I go back to my task tracker, let's go back to that. It should now show me medium tasks. So what you'll see here is that the live data is just tasks and I can edit those. But this application can actually point to other tables and reference that data live. You'll see here I have this permissions tab and it's telling me that Scott Weir can see medium and extra large, but nothing else. I can't actually change these, though. So that is the really important thing to know, that any data inside here cannot be changed by an app built on another view. So that's our first best practice.

Your next one is design. I go over a whole video on this, but you can actually hold a design system inside of your document. So here I have a design system. That's why everything looks similar and it's got colors and type and shape and depth and layout. Now, I am not a designer myself, so I actually didn't create this. All of the steps to build these are actually down here. Go into the description below and you can get this Coda doc and you'll be able to build your own design system. So that's how to make applications that feel on brand.

Next is asking for multiple changes at once. This is simple in that pressing edit can just take a while. Sometimes it takes up to eight minutes to make an AI view. Not always that long, but you don't want to wait minutes and minutes and minutes for each change. Tell it to make many changes at once and it will be able to do it.

Next up is don't build the views on the base table. This is really important. So you'll see here, what are they. On my task tracker, I have live data and I have this piece. This view was built on the base table and therefore I can't delete this now. So if all I wanted to expose to my users was the app, I can't hide this. If I try to delete it, it's actually going to delete the app itself because this is the base table. So when you build it, you want to create a new view of your table. So if I go here and do my marketing tasks, notice I'll create a view of it. And then what I can do is create a new view, create, and then I can actually delete this one. And now I've got a clean app with no access to the live data. So do not build your apps on your base tables.

Next up, you can actually build full page apps with full page tables. So again, this app has a lot of white space. Yeah, you can make it bigger, but you can do full page tables. So I'm going to show you here social media posts. This is a full page table and therefore I've made a full page app and a full page calendar here for myself. How you do that is when you create a table, you come down to a new page. And instead of creating a new page, you create a new table, which creates a table that is full page length. And because this is now taking up all of your screen real estate, you can come and create an AI view on top of it. And your AI view will be taking up the whole screen.

Next up, respect dark and light mode. If you put any design system into your AI view, it may not instantly respect dark and light modes, but it can if you tell it to. So you'll see here it's happening in the GIF, but we could just do it live. I've got my task tracker once again. I've asked my app to respect dark and light mode. It instantly changes as I change mine to dark. Really, really nice.

Let's go back to best practices. We've got a few more and then we've got limitations. These are really important to take into account or you're going to get a lot of stumbling blocks. So, don't want AI, you need to tell it. This is something a little weird about AI views, it always tries to add an AI feature. If you just say, build me a simple task tracker, it's going to do some AI features in it. I found them mostly to be useless. So explicitly tell it in your prompt, don't build any special AI features.

More fun tips you may not know about: sound effects and double click. Those are two small things. You can actually tell your application that when you press a button, it should create sound effects. You can also create double click actions. Like if I click this once, do this. If I double click it, do that. Fun tips.

Let's go to some limitations. These are just as important and then we'll wrap up with something good. All right. Let's go back to light mode because does anyone even like dark mode? I don't think so. No. All right. So first off, you can't edit canvas columns. So don't expect to be able to. The application builder will know and it will say, hey, do you want me to change this or create a copy of it? But don't expect your canvas columns to be edited. You can't create rich text editors, meaning being able to create things that are highlighted or headers. You can do basic things like bullets, number lists, bold and things like that. But colors, highlights, all those others, not so much. Can't edit other tables. We went over that. It can't create files. This is right now a security measure. Note that this is only what we have found and known from experience, and that as AI views are in beta, this can change at any moment. But as of right now, it can't create files and expose them or download them to you.

It can't press buttons. If you have buttons inside of a table that have custom logic in them that interacts with the rest of your document, it can't actually press those. It can't make API calls out to other services, though I do expect this to change at some point, that it would be able to use Packs, which are code plugins, to actually interact with your data in the outside world. It can't edit two-way sync tables. That's, you know, if you bring in your Salesforce or HubSpot data, you can't edit data through there through an AI view. Comments don't currently work. And this one is weird, but Command Z doesn't work as normal. I would say this is a really big one. I've had a couple issues with my AI views where I did something I didn't want to do and it deleted a row. I couldn't get it back. So you're going to have to tell your application specifically, please support Command Z.

That is AI views. Let me know if you have any questions in the comments below, or learn about design to grab that resource. Have a good one.