# Creating Interactive Agents & Apps with Vibe Coding

- Channel: [Los Angeles Regional Consortium](https://www.youtube.com/channel/UCZ1ctndrPotopXgFJ10az9Q)
- Published: 2026-05-06
- Source video: [Watch on YouTube](https://youtube.com/watch?v=kQ-k1F6b6mU)
- Read on ReadTube: https://www.read.tube/p/videos/kQ-k1F6b6mU
- Language: Original (source language)

## Summary

**Vibe Coding Tools for Educators**

The session showed educators how to build interactive apps and agents with AI tools like ChatGPT, Gemini, Copilot, and Claude without needing to code from scratch. The presenters explained the differences between chat, standalone apps, and agents, then demonstrated how to create, share, and place AI-built content into classroom systems like Canvas while minding accessibility and compliance limits.

The workshop introduced vibe coding as a practical way for educators to turn ideas into interactive learning tools. The presenters framed three main modes of AI use: chat for conversational help, apps for standalone interactive experiences, and agents for task-oriented automation. They emphasized that the first version is usually imperfect, so prompt refinement, iteration, and visual references are key to getting useful results.

The demonstrations walked through where to find these tools in ChatGPT, Gemini, Microsoft Copilot, and Claude, and how the interface differs across platforms. They also discussed institutional constraints such as FERPA-compliant versions, disabled student sharing features, and limited access to preview or publishing tools depending on school settings. A major theme was that educators should work within approved environments whenever possible, especially when AI tools may access email, files, or other institutional data.

The session also covered practical classroom uses such as quizzes, simulations, role-play activities, decision tools, knowledge checks, and labor-market alignment checkers. Presenters showed how to copy HTML output into Canvas, how to share links or host artifacts in different platforms, and how to ask the AI to generate accessible text-based versions of more visual activities.

- Chat is best for quick back-and-forth help and text responses.
- Apps are standalone interactive tools that students can use repeatedly.
- Agents are built for ongoing tasks and automation, such as email summaries or reports.
- Claude, Gemini, ChatGPT, and Copilot each support slightly different workflows and sharing options.
- Accessibility, data privacy, and institutional policy can affect what students and faculty can create or publish.
- Better prompts, images, and iterative feedback produce better app results.
- The workshop ended with resource links, troubleshooting guides, and an invitation to future AI trainings.

## Article

### Session goals and workshop overview

which represents 19 community colleges across the Los Angeles region. I also have the pleasure of co-leading the Lark AI task force with chair and assistant vice president of Lark, Dr. Narn McKean. Today's AI professional development session, *Creating Interactive Agents and Apps with Vibe Coding*, is made possible through the coordination and vision of the Lark AI task force.

Leading today's hands-on session are our educators technical director, Dr. Raina Walszinger, and managing director, Marcy Drummond, who will guide you through designing and building simple interactive apps and AI-powered agents. You'll learn how to turn your ideas into practical tools that enhance learning, increase engagement, and make complex concepts more accessible without needing to code. You'll find today's professional development session and more in the Lark AI learning library, and we will drop that link in the chat for you. So please turn your cameras on if you can and get ready for a fun, informative, hands-on session. And with that, I'll turn it over to educators to get today's professional development started.

> Thank you so much, Judy. I just want to make sure, hi Dr. McKeen if you had anything.

> Good morning.

> No, just good morning and happy Friday, everyone. Great to see you all.

> Fantastic. We're so excited about today. This was life-changing personally for me when vibe coding got introduced. So let's see if I can... Okay, I can share. Good, good, good. So vibe coding came around not in the very beginning with AI, but came along a little bit later, and boy did it change everything. And so today we're hoping that you leave with the ability to do your own work and make life fun. So, vibe coding and agents for the next hour and a half. We'll do some introductions and hello Marcy.

> Hi.

> So we'd like to get to know you before we get started because we really try to tailor all of our workshops to accommodate the varying backgrounds that people are coming with as well as your experience levels with AI. So if you type in the chat your name and your role, your department or subject area, and what your experience with AI has been so far, from never used to a few times to you use it regularly.

> And while you're doing that, just quick background, we've been working with Lark this year to do AI implementation workshop sessions, and this is a big one for us. My background is in bioengineering, and so I did have some coding, but I'm not a coder, and I had dreams of making games and apps most of my life and now it's possible, so I'm making them all the time as Marcy knows. And so I'm a part-time faculty teaching classes in AI and technology and excited to be here. You know what's exciting is I see some people are using Claude. Is this the first workshop where people have actually put in that they use Claude? Because we love Claude. I do. So maybe other people have used it in the past, but it's exciting to see that some people have experience using Claude already for coding. I think so. All right. All right, people from all over. Fantastic.

> Quick intro for you.

> Yes. It's exciting to thank you, Lark, for hosting this workshop. We're thrilled to be here. It's very exciting also to have people with so much experience with AI in today's session, which is great, so we can really dive in and start to show a lot of things as well as cover some of the basics. So I'm managing director of educators. I have a background in MIS from way back in the day when we used to use punch cards to run computers, and so to see how far it's come to the age of AI is really exciting. But I also spent most of my career in higher education, both at universities and mostly at community colleges, where I was the VP of academic affairs and workforce development at LA Trade Tech and then most recently at LA City College as the VP for innovation and economic development. Great. I see a lot of people here, lots of experience with coding. This is going to be great. So here's our objectives.

### Modes, platform access, and classroom setup

We’re going to teach you the different modes and what’s the difference in these three things. There could be confusion; it’s kind of some new terminology. We’re going to be using vibe coding prompts to create tools that you can use and students can use, and then show how to navigate that because there are some things turned off for students in these apps. We’ll show you exactly what those are and how to navigate those in the classroom.

We’ll also configure your own agent. Although we’re super cloud users, we’ll use Claude as well, but Copilot, Agent, Gemini, Gemini have a shield. We’ll show you where those are. Both of them do now for the FERPA-compliant versions that we have. Most of the colleges are rolling them out, either they have already or probably over the summer, up to the IT departments and individual campuses. And then we’ll show how to improve your prompt. That is really important in vibe coding: the first version is kind of an, you know, not going to be the end version, and the prompt’s a little bit different. We’ll show how to do this responsibly, stay safe within the education environment, and leave with tangible results that you can share and use in your work and for other things.

There’s a resource drive link that we have at every session, and it’s posted in the LARK library. There will be resource documents that go along with this. You’ll get the PowerPoint and you’ll get all of the resource documents that go along with this presentation.

The first thing is just getting tools ready. This is a snapshot from one of the ways I do it with a single sign-on. However you get into Gemini, Claude, ChatGPT, or Copilot, be ready to do that because we’re going to be signing in. You’re going to be signing in on apps that you use, and then we’ll show you how to use them, or how we use them, and you might share how you use them and we’ll learn from each other here today. This is just an example of doing a single sign-on through an institution.

So do you want to take over, Marcy?

Yes. So the Chancellor’s Office and many colleges, through the Chancellor’s Office or on their own, have made two tools widely available for everyone, and that is Google AI is one of them. And within Google AI you have access, and actually I hope this is up to date because we did this things are moving so fast that they’re putting things in and taking things out. I hadn’t checked this morning, but you have access to Gemini Live, Deep Research, Gemini Canvas, and Gems, as well as I think Notebook LM is in there. There are some other tools. So it changes all the time. If you think something’s not there, just go back and look on a daily basis and a tool may be there that you’re hoping they will provide access to.

The best thing about this, and Reena will say a little bit more about that, is that while you’re using it within your single sign-on, they are enabled so that they are a safe digital environment. So you don’t have to worry as much about FERPA as you do with external tools. Data won’t be used for training. It blocks inappropriate content, and it also has other compliances besides FERPA: HIPAA, and so forth.

Right. So yeah, we do have Notebook within that environment, and you have to be careful not to just go to Notebook but to do it through your institution if you want it to be used within your compliant Gemini edu. We’ll be showing that in a little bit. This is another way schools get in. They allow you in Google Workspace and then you get to Gemini Notebook there. But each school is doing it differently. And this is kind of what it looks like. We have everything in the edu version except for video, and sharing is turned off for students for doing coding. So they can share in class by doing screen sharing or screenshots or something like that, but they can’t publish any vibe coding from Gemini edu. And so, if they needed that, then they’d have to go to their own personal version to publish.

All right. So, Copilot. Oh, do you want—Yeah, go ahead.

Yeah. So, most of us have Copilot, or I think we all do. We’re used to using the apps Word and Excel, especially PowerPoint and OneDrive, and some of us don’t use Teams because we’re on Zoom all the time, but it’s a safe environment and it’s really integrated. And I can tell you in industry, a lot of industry is using this. I’d say probably majority, because you can do agents in here. We’re going to be doing agents today. You can make notebooks. You can make applications. You can actually use Claude now and ChatGPT within this environment as well. You can choose the model to do some of this stuff, and it has a secure shield, meaning it can access your OneDrive and your Outlook, your documents. What companies do with that is they’ll get a lot of data in their OneDrive, like financial data, analyze it, make a report, make graphs, send it to the CFO, and so they’re staying within that environment. What it won’t do is go out to another mail or external folders and then share data in and out of the environment. So same within institutions. If we’re doing program review, financial things, things on facilities, all of those types of things, we can do it within this environment and stay safe in there and have agents go and gather and pull weekly or even daily reports and send it to your email. So we’ll show you about that today.

So, this is what my Copilot looks like, the .edu version. It pretty much looks the same as my pro version, which is great. We have on the bottom all of the apps where that OneDrive and all that is located. And then we have agents right in the middle, which is a whole new area. We’re going to be building those shortly. So, if you haven’t done that yet, grab your tools and get them ready. I’ve signed into all mine, so you should sign into whatever you want to be using today to create both agents and vibe coding. And again, the Copilot and Gemini—I don’t know if you’ve got it yet, but the edu should be free for you. Claude, a lot of us on this workshop today seem to have it. You can use a free one. The one thing about Claude, it’s the best coder. I’m probably

### Choosing between chat, apps, and agents

Biased, but it’s great for doing a lot of things. It does run out of tokens more often, and we have a thing going on in the world called a compute shortage. So there’s not enough compute power out there to handle everything everybody wants to do all day, and that’s why that happens in ChatGPT. I’ll be using my pro account today, but whatever version you have, if you want to go on there, I’ll show you some stuff there.

> All right Marcy we’ll let you do this one.

> Just give me one quick second. type something on the screen.

> All right. So,

So they were asking about our stack of tools. I just put our AI tool quick start guide for using apps to build, or using AI to build apps and by coding, and also share.

> Yeah, this is also in the resource drive that we sent a link to. So, this is just our quick start guide on our stack,

Right. There are three basic ways to build apps. You can build them just simply in the chat window. This is good for quick questions, where you’re using an app where people are asking questions and getting the chat response. So it’s all text-based. It’s all back and forth between the chat. It you know, and students can somewhat use them on their own, but it has a lot of limitations, but we’ll show them to you because you can build these with free tools, which is great for many people who don’t have access to paid versions. And you can get pretty far in the chat window with developing apps, and we’ll show some examples of that.

The next way is you actually prompt an AI tool to build something as an interactive tool that stands alone. So the chat one only works if you’re in the AI tool and you’re going back and forth and back and forth in a chat mode. The apps actually are standalone, and you can share a link or you can download them, and you can use them as reusable learning activities for students. If you want AI to remember something, so once the student completes the interactive activity or whatever it is you built, it doesn’t save the interaction, and there’s no way to export the data without some additional hosting and things like that. So, that’s apps.

Then agents, you specifically program the agent to have a role and instructions. But it’s not good for one-time tasks because it does start to save the interactions that you have. But they’re good. We’re going to go into each more of these, but this is when if you want persistent consistent sort of reuse of an exercise or an interactive activity, then you would build an agent.

I do want to say something about agents that I’ve met with a lot of IT people in the last couple of weeks because I’m confused about why are the professor things different than the student things and why are some of the things turned off. So, every school’s going to be different. I’m finding out about agents and agentic activities on the school app. So, there will be some things turned off that might be surprising and different from one school to another. So, just so you know that and we can answer a lot of those questions. I’m starting to understand that a lot better with the IT departments.

> So, we have a question about what the difference is between an app and a bot.

All right. So, a bot is agentic. So, it’ll go out and like let’s say I wanted to go get my emails for the week and then see if I haven’t answered any, make some answers, let me review them and then hit send and it’ll go send them all. Or I might want to go, it can go order food. It can do things for you. So, an app is more like we’ll show you the apps, a whole bunch of, I make them every day. It could just be making something like a game or I’ll show you a little bit later a digital clock. And so yes, we’re going to be doing that shortly, Alice building immersive experiences. So building things in class can be for classes or apps. So just think of bots as doing something for you and that’s the part that the IT department will disallow a lot of times in your version. So, although we do have agents working in the Microsoft so I think it’s just turned off for students at the moment. All right.

So, and we’re going to so this is like the actual definitions of each of these and again you’ll have the slides so you’ll be able to review these but so a chat we’re all used to that you have a box and it was like the best thing I ever saw the first day of ChatGPT it’s like oh you don’t have to learn software a box you type in it and then it gives you an answer so it does say AI has no memory in past sessions but you can in your settings. And I always tell people to go in your settings and check and set them all up, especially my students. You can go in there and ask it to remember things that you’re doing so it doesn’t think you’re a new person every time you show up, which would be really annoying. But you can also ask it not to train on your data and it doesn’t train on your data automatically for the school provided software. So, there’s an analogy there about how the chat works but chat we’re most of us are using this every day for explaining things creating content creating curricular content tables all kinds of things like that.

So apps, this is what we’re going to be building today. So, here’s some examples. A quiz. I use an end of the module skill check for my students. You might be having apps that create infographics, games. There’s infinite things you can do, which is pretty awesome. I actually use it also to create musical ideas and things like that as a kind of partner. But so here’s an analogy: a vending machine. You build it and anybody else can use it anytime without being there. So, you’re going to something that you would publish and then other people could use it. Which has always been my dream to make something that people can also use and it’s really great. And so we’re going to be doing these types of prompts.

And then so if you’re building something and it’s doing the coding and back and then it gives you an answer which is either called an artifact or an app or something like that. This is where you’re building an app versus doing chat. Then agents. So agents are doing agentic

### What vibe coding can build

things going and doing things for you. So here’s an analogy: you’re hiring a specialist. You define the job, and they go to work. So agents may be doing editing. They may be doing social media post. They may be gathering emails. They may be making graphs for all your data in Excel. And so they work really well within an environment, either within the Microsoft environment, for example, within the Google environment, or they integrate, like for example Claude inside of either one of those. If I will show you today that integrations are growing like wildfire in there. I mean, every time I open Claude or even Copilot it says integrations. There’s like, I have to scroll down now. There’s like all these integrations with every app I ever used in industry, and you can integrate anything. And the reason why is it’s all about data. So if you’re using Salesforce in industry and you need to get to that data, that’s a connection. If you’re using Canva for education and you’re creating content, you can use it there. Adobe, for us, there’s a lot of things.

Agents are already there. There’s pre-built ones in Copilot that we’re going to use today, and we’ll also show you how to do custom ones. Gemini has agents. They also have GEMS, which is in our Google Gemini edu. And again, those two are book compliant. Do I leave anything out Marcy?

> Nope.

Okay. All right. Do you want to take this?

> Okay.

So we are going to start. I think everybody’s familiar with chat, so we’re not going to talk about chat today. We’re going to dive in and start to work on apps, and we’ll show you some examples of that.

Okay. So here’s where these things are. And I feel like maybe I should just show you on these different apps if that’s—

> I switch to that.

Yeah.

> I’m going to switch to my sharing my Chrome instead. Oh, the last thing I was doing is making an app. Shocking. Okay. Um, I’m making them all. Yeah, I learned today how to use Codeex and get everything to my GitHub automatically. That’s like a whole bunch of stuff I learned on a video.

So let’s start with—we’ll go through all four of them. Chat GBT, we have what’s called Canvas, to make it super confusing. So Canvas is the button down there, and that’s where we can do vibe coding. Also Codeex, for those of you who code, is another. So there’s two areas to do this in chat. The difference is in Canvas you just say what you want to do. “I want to make a game of something.” So I’ll just do that while we’re—I’m going to do a short one, hopefully, while I’m talking. So let’s make a buck based on puppies. Okay. Okay. So let it’s going to go ahead and code, and it’ll make—I didn’t ask it to do HTML, which is a simple website, so it’s doing React, which kind of refreshes the page faster, but it’s going to go and make this app, and it’s coding. So we’re doing an agent. And that’s just all I had to do is click on that Canvas button. And then Canvas, for most of these, means it’s in the vibe coding area.

So it made me a nice little puppy clock, and it actually works. I do this with students all the time just as an intro to vibe coding because it’s so kind of unintimidating and people do it based on their hobbies or interest, and it actually works and it knows where you are and what time it is, and it’s kind of a great little intro to doing this. So that’s in there.

What now’s the difference in that and Codeex? So Codeex is a much more complicated environment. You may not be wanting to use this, but I have mine hooked up to a place that’s hosting my apps, so everybody can use them, called—and I have it connected to GitHub. So there’s a repository in GitHub, and I make apps in Codeex. It’s kind of the same thing where I tell it what to do and it starts doing it, but now it’s going to

### Hosting, ownership, and IP questions

be hosted in my GitHub. So, that's kind of next level. I'll go into that if you want to, but I don't want to delve into that right now. Any questions so far? There's a lot of words, a lot of things.

> We have questions about IP. Who owns the IP?

Okay, so if you're doing an app, even if it's a school app, this is why I actually let me go into Gemini Edu just to check on that. So the whoever makes the app, even though you're vibing it, it's your it's, you know, you own it. But to sell it, that's a whole different process. Like if you're going to go to the Apple Store, you have to get it in the right format for Apple to have it and sell it, which is a whole another process. And it has to be approved, which a lot of times they're not. So it's not like you can just go make apps to sell them.

So what I do because I'm an educator is I don't do that. I make apps for classes, for students, for work, for training. And so I just have a link and then I share it inside of Canvas or inside of a workshop. So there's two different flavors whether you're trying to make money or not. So the IP in my case is just like everything else I do in Canvas. It's like the stuff I share. It's for education. We're not selling those products.

> So we got a question about hosting the apps. We're going to cover that later, right? How you share them and uh

Yeah. Is that was that question for ChatGPT?

> Yeah.

So in ChatGPT I host most of mine on GitHub, but all of these apps, if you have either teacher version it depends on your school or your own version, they'll give you a link and you have to publish it and then it's just a link you can share. So I've got a plethora. It's worth showing you how I do it. So, all of my stuff is like on the left side. Anything I've made is showing up in here. I've got a whole bunch of them that I saved for today. So, this is from ChatGPT. There's just a link to my GitHub. So, anybody that I share that with or goes on my GitHub can see this. I made an app this morning on how AI is changing job skills and hiring, and it gives you different risk categories. So that's just hosted on GitHub, but the other ones, like on Claude, we'll be getting there. They're just hosted on Claude. I used to host everything in GitHub, but then I found out they'll do it for you. So that's great.

So here's little Curiosity Engine. You can ask about anything and it'll give you an answer. And you can see there's just a link up here, HTML website. So Claude is hosting it. If I didn't want it to be in Claude, I can just take the HTML and host it in my GitHub. But most of the time, because it's for education, I'll just host it in the site that's paying for it already. So there it is, right there in Claude.

I've got Gemini. So I did make a clock earlier, and you'll see the link up here is right from Gemini. This is a little superhero clock. I just hit share and then it'll give me a link and I just copy the link. So then Google's hosting it. So again, it's not a top secret thing. So I just put it there in Google. I'm not selling it.

Now if I was selling it, I'd have to go take this code. I'd have to go change it to the Apple version or Android version or whatever. And that's a whole another set of instructions, but I'm not doing that as an educator. Did that answer that question a little bit?

> Yeah. And then later I'll show how you can download the HTML file and give it to the students rather than through a share link.

Awesome. So maybe I should show where each of these coding things are in each of these apps. That's probably a

### Building canvas apps in Gemini

#### Canvas and Gemini environments

In Gemini, if I just started from scratch, it is similar. This is my pro version, so the only difference is that I have videos, but it is only like three a day, so do not use it too much. But we have tools. And guess what? It is still called Canvas. So you just do that, and I can do the same thing here. Any of those apps you just saw, but this is really important on the right: which of these flavors you are going to use.

I barely ever use fast mode unless I just forget. I almost always use thinking mode, which will give you much better results. It will spend more time, it will take more tokens, a little bit more time, and give you some good results. Pro mode, if you need it to do a lot of research about something before you are doing an app, like if I said go research labor market around the United States for healthcare and the impact and the number of jobs going to be needed by state, it needs to do a lot of research for that. So I would go to Pro and let it run all day. But for most of it, thinking is good.

#### Talking to the app builder

And the same thing: you just give it, you talk to it like a regular person. Let me just think of an app, and sometimes you just can even just talk. So let's make a quick app to do a clock based on chemistry, make it colorful and helpful for learning about chemistry, and let it run.

I love talking to these. It is sometimes more natural for me. And it is doing HTML this time, and it will come up with a preview, and then I can share it. And the really, really great thing about these, once you do this, it is going through the whole periodic table. Once you do this, you get your code in HTML, and HTML paste right into Canvas. That is confusing because now we have two canvases. So it made a little, I do not know what it made. I guess it did not, it has to fix some errors. It did not finish making my clock.

But when I finish, I can take all of this HTML and just copy it here, copy contents, and go to my Canvas shell and paste the HTML in a module. So that whatever I end up with here, which could be anything you want, it could be something inside a discussion, it could be a test your knowledge quiz, it could be anything you think up for your content, it just goes right into our Canvas shells. You can also embed it into emails or any other place where embedding happens. So you can take that code and embed it. That is a good skill to have for using vibe coding.

### Working in Microsoft and Claude environments

So that’s where it is in Gemini. Then we hop over to Microsoft. Here’s my Microsoft. So we have agents, and we have Copilot work and web. Most of the time we’re going to be in this thing called **work**. We have a shield, meaning it’s data protected. So everything’s with this environment, and we can message Copilot to do coding or whatever we want. So it works a little differently.

We have some apps: we have **Designer**, and then we have **agents**. It doesn’t have something called **canvas**. You just start talking to it, and then you pick a model. So I can pick ChatGPT, all these different models, or Claude Opus. You might not have known those are there. And then you can actually just start doing a project right here in the box.

What it doesn’t have is a separate button that says you’re coding. You just tell it, “I want to code something,” and then it’ll start. I would think about whether you need to go to these menus, and Microsoft has a lot of buttons, so it’s hard to remember to go to work and then go to the models, pick a model. Do you want it to think deeper or go on autopilot? So, think deeper, and then you can prompt it there. So it’s a little different than the others.

And then Marcy’s favorite is Claude. Claude is, you probably demo this one faster than I can, but Claude has **Claude Code** in the plus button. It also has **skills** and **connectors**. I did a video yesterday—if you check out LinkedIn or my YouTube—on adding skills and connectors into Claude, because there was actually somebody here who had a question about adding accessibility skills in Claude.

It has styles for talking and writing, and so you can just pick code, and it actually kind of like Perplexity did, but now Claude does it. It has some example things you can pick in there, or you can just start typing and it’ll go. What the difference in Claude is, it creates something called an **artifact**, and an artifact is basically your output of these. So I do these a lot, and the nice thing about Claude is it hosts it for you as well. So I made one that—I think it was a demo that was in there anyways. Oh, there’s my curiosity engine.

But again, I can just go in here and publish it, and I get a link, and I can just share that link wherever I want to. So those are kind of... We did get a question about accessibility that I responded to in the chat, that these are not accessible, but that you can ask the AI.

### Examples of interactive app creation

tool while you're in there, which I always do right after I have it create the tool. I ask it in the chat window to create a textbased version for accessibility that's as equally effective. Now, the more sophisticated these apps get, that textbased version does not, you know, is going to get harder and harder to develop because there are so many ways students can interact with the tool. But it does an excellent job, and Reena's demonstrating right now. It does a f I mean, I'm blown away with the results that I get when I ask this question. Hannah. Yeah. And then ask you what, let's do do a word doc and it it'll just go and yeah there it's really good. It knows what it did. So so you want to ask it's it's probably smarter to ask that question about making that accessibility doc wherever you created it in the first place.

> So it'll be able to hand out and it'll it'll explain all of this. And I use those in my class because I do have visually impaired students the semester including and they actually if there it's not there they'll ask for it because they'll they'll say they can't see something or can't hear something or whatever. So these are really important in class. So it'll go through and make that. I'm not going to wait through that whole thing. But it's nice here that they do have a library just for your artifacts in Claude. So, and the pictures load up eventually, but, uh, it takes a minute. All right. Any questions on that?

So, that's the four main ones we're kind of working with today. Some of you, if you work with other ones, feel free to put them in the chat. Let us know what you're doing. I think we left off here. I think I kind of covered this stuff maybe there. Yeah. That's how to find all of the coding things in each of those. I think we're good there.

All right. So, we're going to be doing some You're going to be doing some stuff building interactive apps for whatever you're interested in. So, we have some Oh, go ahead.

> Yeah. In a minute, I'll upload the document that has all these cards in it. So, people can choose which one they may want to build. I'm responding to something in the chat.

Okay. All right. So, uh we come up with some examples that you're free to use. Marcy will put them in the chat in a minute. And there are simulations and role play. That's one of the kind of first things that people did with AI is creating role play. You see it a lot in industry doing like HR types of things or things between people and like their bosses or like their clients. There's a lot of that type of thing. There's a lot of like kind of resume or I'd say job job hunt practicing practices that use simulations and roleplay or just actually our partner Linda makes amazing roleplay for doing CPR and healthcare for her students and they love it. So here's four of them. The confused student. Instructors type an explanation and the app responds with student questions revealing gaps. And we have the platforms there to try. The Socrates mode tutor. I love that one because it gives you really great intellectual feedback on everything. The skeptical employer bot. So, a mock interview and it kind of as answers you back in a different way and then a workplace scenario simulator. So, those are four simulation apps that we're going to be building. Thanks, Marcy.

Okay, so let me see. Somebody typed in so I put the a link to the file that has if you can go through besides simulations can you go to the next slide?

Yeah.

So that's one group of apps that we've put in this guide. The next one is where you can ask it to transform different content. So you can choose one of your course materials and then ask build an app where students interact with that. And we have four examples of those type of apps. One is a decision simulator. Another one is spot the mistake. They pretend they're a client, a non-technical client, and they do explainer practice. And then there's another one on industry standards checker where you're uploading different standards for your field and then students are are interacting with that.

Yeah. Oh, sorry. I mean, makes it really interactive and kind of more fun for the students, but also really checks their knowledge, but it makes it, you know, makes it do more than just reading. And so, you know, they have to actually read and select things and and you can make them as fun or boring as you want. So, you know, if you want if you want it to be fun and colorful and things and there's interactions happening or even like exciting things happen when they get the right answer, that's up to you. You can make it however you want.

Then the next set of prompts we've provided is different tools around you know that can actually be used live in the classroom or to help with your own workflows. So we have a CTE lab partner, a trivia game, labor market alignment checker where you can upload your syllabi or your slows or any materials you have for your course and see if it aligns with labor market data and tools and things. And then we have this debate prep coach also as an example of an app you can build.

Yeah, the labor market is interesting because ONET is public. So you can actually pull if you have an agent if you want to get more sophisticated pull data live out of there and get up-to-date information on any any sock code coded field that you want. So which is really different than the way we did things in the past making static apps to do that. These can be live apps with live you know whole live thing on your screen to get all the latest job data. So you it's very very powerful what you can do there.

Okay. And then the last set of ones are you know your ideas or the best ideas. Obviously we've come up with some ones we think are probably apply at least one of them would apply to any one of you. But we've got four prompts also in that document that you can use to develop your own idea from finding a pain point like what what do students struggle with the most or what do you spend an inordinate amount of time on that you wish you would didn't have to simulating real world experiences and workplace conversations. We gave you a free build idea. And then, um, often times I, the last example is what we call like a meta prompt where you really kind of don't know what you want to do and you don't know how to prompt the AI tool. So, you ask the AI tool. You say, "Listen, I

### Sharing canvas apps and supporting accessibility

want to build an app. I want it to be somewhat about XYZ. Can you help me? Can you give me a prompt that I can give to you to build this app?" And that's usually how I start. I asked the tool to help me give it instructions so I can get the best results.

Right now we're going to ask you to open that document. Please let me know if anybody's having access problems opening it. We want you to experiment with using one of those prompts we gave you to start to build an app, and this will take a few minutes depending on which prompt you use.

> So I'm going to put the instructions in the chat.

I also wanted to address that thing from Wanda about accessibility with two versions. We agree. We try to make a lot of our content accessible. Although, if you're doing a game or something interactive or an infographic, it's not always possible to make it that way. Or if you're working in XR and 3D and you have something from industry, that's not going to be accessible. So we're in that area of okay, do we do everything in text or do we do the best that we can in our PowerPoints and things that we make in there, but some things that we have are not accessible. Our practice has been to add another document when we have to add another document in there.

While you're talking about accessibility, could you share the slide so we can use your examples for ideiation? Oh yeah, mean the whole slide deck? The whole slide deck. Yeah. So, the slide deck, let me give you a link to the slide deck. It's in the drive. Let me give you one specifically to the slide deck if that's what you're asking for. Let me go there. Oh, thanks, Marcy. Yeah. Oops. As my students say, thanks for making me do it because that's when they're learning stuff. So, we're hoping you're all making something right now to share with us.

Taking me to the wrong place. So, it'll take me a second here. Is anybody else having issues with the handout or getting a prompt going to build an app? Let me go to... I wasn't signed in as somebody who could share. Here's the link.

Okay. While you're doing that, I'll sign into my course Canvas to show what it looks like in there.

All right. And while people are still building their app, back to accessibility, I did say that there are two things that I also use because if you ask for one thing in the prompt, I'll be very specific and when I say, hey, I built this app now, can you create a textbased version that's accessible? I even put in the prompt, use accessible means using the WG wac standards. I'll put that in the prompt so it knows exactly what I'm looking for. And sometimes you'll get better results that way.

The other tip I have is in my AI tool like Claude, I created a skill where I uploaded the accessibility standards and I told it every time I ask it for a handout, refer to those accessibility standards. Claude saves that prompt in its memory and it knows every time I use the word accessible handout, it will go look for those skills and it will build it with those specifications. The other option that I've done like in Chad GBT is I have a document with the standards in it and when I'm asking it to create a handout complying with those standards, I will upload that document with that prompt. So, and say please refer to this, refer to the attached handout with the standards. Make sure the handout you're creating for me meets these standards.

I think we need to talk a little bit about sharing if there's no share available because I see there's some issues with that. Okay, but in the meantime, I'm gonna hop into my canvas. So, Alice shared I downloaded the file you shared, Alice. Were you able to open it or you downloaded it? Can you see what it looks like? It's a house. Yes. The key is let me make sure I can get it open. The key is you right click on it and you choose open with and you use Google Chrome. You use either Google Chrome or whatever your browser is. So, let me share my screen really quickly.

So, this is a good another way that you can share your app with other people. So, let me share my screen. I'm going to share this one. Okay. Are you seeing the app? Yeah.

What I did is I downloaded it. So, if you were doing this with others, you'd say download this file. Let me pull the file up here so you can see. Let me close it for a second. So all I did was, and this is instructions I give to students along with the app, is I right click on it and you do open with and you choose a browser. So I said open with Google Chrome and there it is. So, what you could do if is this something you want to put in like a Canvas shell or just a separate app? Uh Yeah. Yeah. This is something I'm well, I've been yes, it's something I want to include in my Canvas because I want them to have a more interactive experience conducting a health check.

Perfect. So, do you have access to the coding that the HTML or whatever it was coded in? Yeah. So, that's what she shared. She shared this file index. Yeah, the index file. The HTML index file.

So, let's go into Canvas and take a look then. Let me do that. This is the next...

I don't want to take everybody's time, but we were planning to do this. So, yeah, this is exactly the perfect lead in. So, I'm making I'm working on stuff for the fall. This see this is something that's not accessible, but it's all these words are below it. So, it's basically it's not accessible, but again, it's a summary of all the stuff below it. So, you can just put and that's made in Gemini. But at the end of my modules now, I have a new practice. Let's go to the end where I'm using HTML to do this. So, it's pretty great. And this I love these check your knowledge test things. And so, they can go in here and learn things. And this is about AI and personal finance, this module. So, they can practice what they learned. And so, how does this get in here? I vibe coded this in Claude. And all I have to do is edit in my Canvas module. And I click these two little things here that are HTML. And I paste that HTML right in there. Once I...

### Prompting, HTML, and visual assets

close this, I see if it looks good. And there it is. So you need that HTML to paste in. And what's changed is when I first started doing this, it was always broken. But between the AI companies and Canvas, it all just seems to work now. I don't have any hiccups usually just pasting HTML in there. And that's all I got to do is click the button and edit, paste, and then click it again and then check for accessibility issues at the bottom and then save it. That's it.

> So, can I ask a question? This is probably a dumb question, but um again trying I'm really this again is for the fall trying to build some immersive practice for my asynchronous class.

> Um but um so the better my prompt, the better the thing is going to be, right? The end product.

> Yes, for sure. And so I should be very specific because I I mean this this child in the health check looks decent. The others were like, "Oh my gosh, I couldn't even include them." Um and so this child walks out of the classroom if the teacher decides that they're they need to go home because they're sick or whatever it is. So how like I would just I'm trying to make it even better. So that's just through prompting, right?

> So, uh, yes and no. So, I'm a visual learner, as a lot of you that have been here before know. I teach digital media stuff and so I and the computer really understands pictures. So, you can make a picture. You can even take a picture of something on your phone and load it into that chat and say, "Hey, I want it to look like this." Or you can even draw it.

> okay.

> And that will help it do something more. But what's because you're transferring what's in your brain is probably something awesome onto your um onto your app. And so if you've got something in mind, um what I do is I go into an imager and I play there first. When I get something good, I add that into my chat and I say, "Hey, I'd like my students to look like this or walk like this." And um again on my YouTube you'll see um I did a whole video with these beautiful characters but that's all from doing making taking that time to make the images really good before I put it in app and started animating and all the other stuff.

> What do you use to make the image really good? Which tools are you using?

> So to be honest the new best one is chat GPT. They came out two weeks ago with a dynamite imager that's best on the market. my opinion, a lot of people's opinion. Um, if I'm doing something from um for a movie or something, then I I pay for midjourney, which is a art director view of some it's got a lot of background stuff. It's a whole different type of app. But for Chat GBT, it gets all the English right. Everything's in context. It does research before it creates an image. So if you're like create an image about um I made one the other actually I made a cartoon I shared with Marcy this morning about how EKGs work and it did all the research and I made a beautiful cartoon so if I find it somewhere in my desktop I'll share it but yeah that research and the image that will help you a lot and then give that put that in your chat and I do that with all my apps I make characters I make sound effects my own music and I'm like use this stuff and then go make the app cuz then really mine. It makes me a lot happy.

> I love that.

> Yeah.

> Yeah. The other thing you can do is before you ask it to build it, ask your AI agent, say, I want to build an interactive activity, but let's first discuss what it is I'm trying, you know, what it is I want you to create. And you can start to have a dialogue and and say, let's make a plan for it and get the plan right. And like Reena said, you could also upload images. Say, I want it to look like this and I want it to look like that. and get the plan for the build and then ask it to build it. And

### Iterating and refining your app

Then rarely do we ever get the app the way you want it on the very first try. So you'll have to iterate with it, which is what we are going to do next on our next slide. And we have an iteration guide. It will make errors, or it won't quite get it the way that you want it. So don't feel like you have to scrap the whole thing. You can start to have a conversation back and forth with your AI tool to refine it and get it the way that you want it.

Okay, great. Thank you. I want to share really quickly. I teach child development, health, safety, and nutrition. My students created, they got into three groups and created one of each, created a bot for each topic, and we used Play Lab. And while it almost killed me, it was such a cool thing. We finally finished last week. They're going to present at our research symposium. I asked them what was, I'm not going to do this next semester, it was too hard, you guys. And they were like, no, we loved this. We got to know every student in the class. We collaborated. We built something. And even though it almost killed me, I'm still thinking about whether or not I should do it, but it was super fun. So I just wanted to share that.

> That's great. Yeah, that's what our partner Linda is using in her health class as well as Play Lab. So while you were just saying that, I made a quick image and I asked it to do let's make a fun character for health app for sixth graders. She'll be my main character. So, something I mean you can prompt it to do anything, but then you can use that as is you can say do something like this. So, when you get once you get something you like, give that image to your app and then go from there.

Okay, thank you. That is all the info I need. I'm so happy to hear that. Thank you so much.

> Sure. Yeah, the visuals are super super important.

All right. Did anybody post anything in here? Any questions or did anybody want to share or just tell us about your experience? Ah, Kevin, that's you. Anybody I think let me reshoot. Yeah, we'd love it if somebody would share an app that they built while we were talking. Then we have a question for Louise. I think we answered it, but maybe not to your Let us know if we still need to answer it once where you paste the code. I think you know Reena showed that in Canvas, right?

> Yeah.

Did that answer your question or did you want to go?

Some people were working while we were talking, so they'd like to see that again.

Uh, canvas. Sure. Yeah. Okay. Let me find it on my plethora of all the screens on here. Okay. And this I think it's Luckily I'm still signing. Hold on. I'm just trying to get back to that class. I'm telling you because making classes is a lot more fun. used to be for me. Okay. So, go back to my finance module. Oh. Oh, okay. So, you want me to show how the HTML thing works?

> Yeah.

Okay. So, let's just do like So, what I have I have them in here, but let's just make a new page, and I'll make a page that's called bad coding. So, it's going to be in there. So, I just have this blank page. All I really have to do is edit. And most of us aren't used to using HTML, including me, because I wasn't a coder. So, people did this for years. But you just click this little button that's like the greater than less than sign and it goes into an HTML editor. So your HTML from all those apps that you make that are so cool, you don't need to share them there. You can just paste them right into here and then they will be displayed in Canvas. So, and that's what I did. I'm going to go back to that any of these modules and show you. So I did that on this class at the end of every module for a test your knowledge thing. Test your knowledge, like let's find one. Yeah. So it was here. So this is all this is if I clicked edit is code. I just pasted it from my app, which in this case was Claude right here. So, one of the things in your prompt you might want to say is make me an HTML app for and then continue with your prompt. And what I usually do then is I go make suggestions to make my prompt better before I actually go and run it. That helps a lot too. And then any visuals that you need. In this case, I didn't use visuals. It just did this for me. And it knows my it's gotten to know me. So it knows what colors I like and things like that. And I asked it to use in my settings. I asked it to use emojis. A lot of people don't like those, so I turn that off and I don't want them, but for this particular class, it's helpful for my students. Did that answer that question?

> Yeah. And I'm so I'm not fast typer, so I'll ask I'll answer some of these questions that we have in the chat. So Wanda wanted to know, is an app in Copilot different from an agent? Well, as you found out, we use the same terms to mean different things. So, like we use Canvas LMS and now Gemini uses canvas as a word in their app tool to mean this is where you'll find your output. In co-pilot, when they you see the word apps in co-pilot, it's talking about Microsoft apps like Excel, PowerPoint, Outlook. So if you're looking on this screen and you go down to apps, show them where apps is.

Way down.

> Okay. That's where you would access those Microsoft apps. Okay. To build an app, you'll show them where you build an app.

Yeah. So, I'm Should I do the agents?

> Uh, yeah.

Okay.

So I did one here. You basically build the apps either in the chat window like we've been doing or in this agent screen. So that's the difference. So what this is I built an app to make ask like upload a document and then check for accessibility. I built another one to make comic pages. But all you do is there's a whole bunch of agents in Microsoft and the way that it's easiest to learn is they've built a whole bunch of them and you can try you can check ones that they already build. So let's say workforce insights or there's there's some for writing coach that's a or career coach that's good. So, I can open this one that they already made. And basically, if I think,"

### Setting up Microsoft agents

#### Describing what the agent will do

There is a little part where you explain what this agent is going to do, and then what these little initial prompts are going to be. Then the user can ask questions in the agent, like, *what is the future of*, let’s say, word processing, because we are in the age, so whatever. And then it will go, and it is basically a shell that sits on top of Microsoft that has been told: give it answers about career, like don’t fly out and do other things. So it focuses it in on that. It still has all of Microsoft behind it, but now it is focusing in on just the career stuff. So it is going to give me answers based on my questions.

So that is that agent in industry. Especially the IT departments will have like 20 agents running, pulling emails, financials, communications, and all that, and being more efficient at their job. It is not really replacing their jobs, but they are doing more and providing more information.

#### Creating a new agent

If I do a new agent, then I just describe what I want to do. *Let’s make an agent to review my emails for the week and summarize. Send me a report to my email every Friday. Let’s say Friday at 3:00 p.m.* And then they have a configure thing. But I am going to submit that description first, and it will start building me an agent. So it is doing the coding in the background, and it is going to end up doing this thing.

Once I build it, in this case, it is just going to be an email in my inbox every Friday telling me all the stuff that I am supposed to be paying attention to in my email. And that agent just sits within your Microsoft environment.

So now, oh, it is pretty fast. So here it is. It knows the purpose, what the guidelines are. It is going to review my email, summarize them. And here is an example of what it is going to do. Okay, great. So I will go ahead and hit create and let it go and make my agent.

Again, this is different than the app because it is something that is going to do something for you. So let’s say in the past, 30 years ago, I had a secretary, which is true. They would go do things for me and then bring me things that are typed out, order. Now agents are taking over those types of jobs that are more repetitive, things that we had a long time ago that now are easy to do this way.

So I have got this summarizer that will dump things, and I can even just ask it about things. Now, why does this work? Because I am in Microsoft and so it is going to go to my

### GPTs, connectors, and secure agent workflows

OneDrive. It’s not going to fly out and look at my Gmail or some other stuff. So if you need another skill for to do that, you need a connector in the agent to connect to other things like your Google mail or your Apple mail or whatever. In this case, I’m using everything within Microsoft, which is in our environment. It keeps it FERPA compliant. Everything stays within this environment.

Probably I see a lot of questions or chats.

> Yeah, so we do have a lot of questions. Let’s go back up a little ways. We had a question about how you can share a chat GPT in chat GPT. Do you happen to have your chat GPT open?

> Yep, I can do that.

> I love GPTs. Good question.

And then we had some issues with people trying to load. We have issues with somebody who put it in Canvas and it’s asking them to do a... We’ll have to have them hopefully share their screen so maybe we can troubleshoot.

Okay. How I can. Okay, this should work. Let me just test it in the chat and I’ll share my screen. See if that worked from there. Okay, good.

So, first question on chat GPT or GPTs. GPTs are another way to make a little app, basically. It’s one of the first things that chat GBT did. Then they made the mistake of not letting you share everything. Then everyone else made it sharable like Gemini. So they fixed their stuff.

I love this thing. So I make... I don’t know if you want me to go into that, but the question was about sharing. So this is one that I made and I can share a link now. Just copy link. And this is a brand new function in chat GBT because, again, for some reason I thought maybe they thought they were going to monetize this or something, but they didn’t. So now they’re letting you have a link you can share it with anybody. So that’s new. It used to... I’m not 100% sure if I gave you that link and you had, and you didn’t have a paid account, if it’ll open. So if you have a free account you can test that and let me know. I can’t tell from here.

But GPTs have been around since the beginning. You can create new ones if—again, I have a Pro account so I’m not sure on the free one. And there used to be a plus button here. I don’t even see it anymore. Oh, there we go. Create. It’s the same thing as making an agent. You just name it, and then you say what it’s going to do. And I usually have ChatGPT open and I say, “Hey, I want... I talk to it. I want to make this thing to help me with calculus. Explain it to me so I learn it.” And then make me a great description, instructions, and all this stuff for my GPT. And I paste them in here. And then I just hit create. And then it goes into the chat GBT or the GPTs, and it’s all in there. It’s that easy.

Or you can do it here. Just talk to it right within the GPT area and tell it what you want to create and it’ll go fill all that out for you. I’ve made probably about 30 or 40 of them just for fun. And people use them. I mean, some of mine went viral, so it’s kind of fun. My GPTs.

So, I have an account here and I have a different account where I’ve got all of those GPTs. So the answer is they give you a link now to share them out, as well as all the other companies do that. It’s not new. Well, it wasn’t there before.

> Yeah.

> Well, yeah. I mean, it’s always been there, but you could only see it if you were in the GPT thing as a pro user.

Since we’re showing where you can configure and build agents, why don’t we show them in gems?

Okay. What you’re going to find is the template that you fill out. There’s two methods, and I’ll put... We have a whole document on this as well.

You can almost all of them now have a feature where you can in a chat window ask the AI to build the agent for you. That’s one option, so that you’re automating the build process. They also have the option where you configure it yourself, where you give it specific instructions. You tell it— you know, you say what you want the role of the agent to be, what exactly you want it to do, what sort of output you want it to give, what you want it to look like. You give very specific instructions. Oftentimes your institutions will shut off the automated build process. Like you won’t have access for an agent to automatically be built for you, and you have to use the configure option. That usually isn’t turned off. So if you want to build an agent, sometimes you have to configure it yourself. So I’m going to put that guide. It’s in the main drive box we gave to you, but I’ll put a link to that in the... to both of those.

So this stuff, gems, GPTs, Play Lab, and Nectar are very similar to each other. It’s basically you have a topic. You’re going to make a little app that’s going to have a function. Right now, this is a claimation explainer, and you’re going to fill out a bunch of boxes on what it

### Creating Gems and improving apps

Gems are really good because they work with all Gemini accounts, and you can connect them to other things within the Google environment if you have an API, meaning it’s a link to one of their things, but that charges you. You can connect it to Google Maps. So if you’re teaching geography, you can say, hey, tell me all about Paris, and it’ll bring up pictures of Paris, give you maps, and then something like that.

I have an API key, and I pay a couple dollars a month for people using things that I make in there. Right now, this is making an animation explainer. It’s going to make explain about EKGs because that’s what I asked it to do. It’s making a video using Gemini’s model called day3. It’s going to take another minute or so.

I can create an app the same way again. Oh, and it got stuck. Yay, Gemini. But if I want to make a new one, let me just do that. I’ll make a new gem, and it just, you know what, actually gives you some inspiration. But let’s do it here. Let’s make a gem about EKGs. I’m just going to start with that.

So, it’s using Opal. Looks like it used to give me a bunch of boxes, but it’s making, it’s doing research, and it’s going to ask me some questions along the way. So, instead of just static boxes, it’s interacting with you as kind of your helper. So, what do you want it to do? Let’s say analyze that. And it gives me prompt summaries. So, let’s see what we’re doing here.

Okay. Okay. So, I don’t want to do that. So, just a learning app about 10 main kg editions. Okay. So, that first one was like you upload something and it gives you an analysis, which is actually a really good thing to do in health. A lot of people are doing that. A lot of companies are doing that. You see that on your Apple Watch and all of that. But I actually just wanted a learning tool to give me different things and I see what they’re called. And so it’s going to go redo my app. When I’m done, I’ll have this EKG app that’s going to code up for me.

So it’s not hard to make them, but it’s a little bit harder to iterate because this one didn’t give me the output that I had in my head. My fault because I didn’t explain it very good, as you see up here with four words or whatever. So that’s coming along, and then you can share it. It shares just like Google Drive. So I can share it to anyone with a link just like Google.

### Sharing limits for Google Gems

works with everything else. Copy the link and share it. So this is a great one to use for classes and things, because it is just easy to share. And if students are doing these, they can do them, but I do not think it allows them to share without copying the code and moving it somewhere else. I think the share is turned off for them.

> Yeah, as Alan said in the comments, sharing Google gems can be tricky, and that might be the issue is the share feature may be turned off depending on who you're sharing it with by your institution.

Institutions are really a little gun-shy about these apps and agents because they, you know, well, you can, if you want to explain it, but they get concerned about FERPA compliance, what the app or the agent is accessing, both internally as well as, you know, could it be accessing something externally. So they're worried about privacy and data security, so they turn some things on and off that makes it difficult to either use them or share them.

> Right.

And Alice, yes, it's a shame, but many institutions don't give access to adjuncts, which I don't know why. That's something we should advocate for.

Well, also it might just be that they haven't rolled stuff out yet, but:

> Yeah. And it may be that you're not just an adjunct. It may be other faculty, even full-time faculty, may not have access. So it may not be an adjunct issue. It may just be something they've turned off for everybody.

So, like with my students, my school already rolled it out. So all the students have Gemini edu and co-pilot and Adobe. So, and Canva free. We use free Canva. So we got four places that already we can do in class together. And even the other free ones, because I teach AI, there's ChatGPT and Quora and everything else. We do not know how long they're going to be free because of the compute power issue, or any of the stuff. Maybe it's 20 bucks now. Maybe it's 300 a month next year. We really have no idea. But I know there's a problem with compute power. So we will see.

Now:

> Oh, go ahead. I just want to do a time check. We have 13 minutes left. If there was anything you wanted to show that you haven't had a chance to show, Reena, or if there's any questions we didn't cover that you were hoping we would cover, or if there's something you want to share that you built, we'd be happy to do that, too. So, we just have a few minutes left.

I do want to share one thing because people always ask me, and I've shown this before, but my own stack is this. I had Claude, you can see on top,

### Tracking AI tool costs

build a tracker because I can't remember even what I'm spending. These are my personal money, even though I'm just an adjunct. Nobody buys these for me. Claude, Chat, GGBT, Midjourney, Sunno. I didn't even put the co-pilot that we use, but I also have co-pilot for education, and I have Gemini for education, Canva for education. Those are provided by different institutions that I work for. And then I had it give me a little thing on the bottom like when I can save money. In fact, sometimes I turn things on for a month. I do that a lot. I know Marcy does it, too. And then I turn them back off. Like, let's say I need Superclaw for a month at $100 a month. Fine. And then I'll turn it back off and then I go back to 20 or even zero. My music one is going to go up higher at the end of the year unless I get some coupon. So, I actually keep track of my spend with a little app that I vibe coded.

> Do you have a link? Do you have the prompt handy that you use to create this that you could share?

Uh yeah, I'll find it.

> Okay, that's a good question.

Yeah, I might not I'm not sure how fast I can find it, but I'll...

> Okay, I'm always doing stuff in here.

Yeah, it wasn't difficult. Trust me, if it was clawed.

> It was probably something really.

It's probably one prompt and then I added the school stuff in there.

> Is it connecting to the other apps or displaying the cost?

I believe it's only displaying the cost only.

Yeah. Right.

Yeah. You let it know what apps you're using and it'll update, you know, when you run it, it'll update it. It'll find the latest pricing.

Yeah. So basically what I told it, without going to search somewhere in here, I told it what I use. I told it which ones I get free from schools. I told it what the cost was, and it looked up cost. And like that thing with Sunno, it knew it because I said, oh, I knew the dates because I went in my subscriptions and I said here's when I got it and I had a discount. So it knows the dates when my discounts end too. So I just told it that in the prompt.

Jessica says she can't find her preview button and I put in there, did you select the canvas tool? So did you click on the plus icon and choose canvas and you still aren't able to see a preview?

> Um let's is this in

Oh created the code. Okay. So can you share your window and show her how to flip from seeing the code to seeing the actual app?

Sure. So, I got to find something I did. Let's do this one. Okay. So, if it's in canvas mode, it may not be. There's a little button here with the code. And then...

Yeah, she's seeing the code. She wants to see the preview. There's the preview. So, you can actually see the app. Did that work for you?

Huh? She says she doesn't see the preview button.

Is it what version is it? Is it a free or paid or school?

Are you? Which Gemini are you using?

School version. Are you kidding me?

That could be it. Let me check my... So, sometimes some stuff is turned off. You might have to ask your IT department if share if preview is turned on. If it's not, it's going to make it a little harder because you got to take this, which is I don't know why preview would be turned off. I can share is turned off, but if that button is missing, I would ask about that because you'd have to go put this into a text document and open it on your personal computer.

You see share. That's crazy.

Yeah, that...

but not preview.

I don't know why that would be...

Yeah, I'm going to check my...

So, yeah, but you'd have to share it then open it on a browser. So you have an extra step you have to take.

Here's my edu one.

Yeah.

Let me go in here and go into Gemini. So this is... Oh, it's signed out of my great. Okay, there we go. Uh, so if let me just code see if I coded anything in here. So I think I did. That's a gem. So I'll do but I'll let me see if it does it...

and then I'll share the... People are having a hard time seeing the the uh...

I think I'll kind...

in the shared drive that we provided to them. So I'll I'll show that when you're done.

Okay. Oh, it just hicked up on Zoom and not unhooked up. So let me make something really fast and then...

Okay. While you do that, I'm going to share the drive so you people know what the resources are.

Uh where did I which screen am I using here? This one probably. Okay. So in the drive uh the name of this workshop that we've named it is creating interactive agents and apps. Are you guys seeing my drive? Okay.

Are you seeing the copy of the Google drive on your screen?

Did I share?

Yes.

Yes.

So it's creating it. Here's the PowerPoint. We share it as a PDF because it's too big to share. And then all the resources that we've covered that we uploaded are in here. There's a couple more. There's a responsible use cheat sheet. And you've brought up many factors like are they accessible and you know Furpa compliance that's in there. So things to consider that are really important if you're building and sharing apps. We also have a troubleshooting guide which you know once you've built the app if it's not running right or if you want to refine it that's in the troubleshooting guide. Everything else I think I've I loaded while we were talking in the in the in the chat. We have the last one, this AI agents guide that walks you step by step through many of the things that we did, including building your own agent. And it'll ask you to use some already made resources that we've put in this folder. If you work through that exercise, it'll actually link to these. So there's that's what's in that folder. I hope I answered the questions about people had about the files for this workshop and what things are named. Let me know if you have any more questions in the app. Okay. All right. So, I did a quick game just to make sure there. So, this is my edu version. You can see here on the right in this version there is code and preview and share. But you can see it only says copy contents, not it doesn't give me a share link like my pro version does. So I which is fine for me because for school I can copy my HTML and put it in with copy this code put it in

### Troubleshooting preview issues and brainstorming fixes

In my canvas, but it will not let me host it with a link, and that is going to be true probably for everybody. But there is still a preview button. So again, if your preview button is not there, that means yours turned off. That is problematic because you cannot see what you are creating, and you might have to ask about that. I do not know why preview would be turned off. I cannot — or maybe I just do not know.

> In the feedback form, people are having a hard time finding this Judy this workshop in the feedback form.

> Copilot could not code.

Okay, let me double check that.

Okay, C-pilot could not code like an agent in co-pilot. What you want to do is build an agent and let it build stuff for you.

Yeah. Luis, if you want, you can unmute it and talk us through what you are experiencing.

Yeah.

And we are happy to stay on for, you know, after if people have some things they want us to troubleshoot with them. And I will show you mine; it might be turned off, but mine is coding away in co-pilot, and you can see it doing stuff right here. I am creating it. I just said, "Let us make an app that is clock," just to do something quick, and it is doing all the code right there. And at the end I should get a preview. So if you are not seeing that, then there again maybe this create app is turned off, this function in your copilot, but it is not as slick as Claude or something with the preview and all that, and I have to paste this and go look at it somewhere, but it should still be doing the coding. So that is a whole lot of stuff.

The main thing I — the main message is this: you have a lot of things in your classes that you teach that now you can create different materials than you probably never could before. And so that is why, or on your job, you can make your life more efficient between emails, communications, getting editing suggestions, just so the — it is really the world is yours, and we can use our expert knowledge as educators to create amazing things. It is really just you thinking, and you can brainstorm with an AI. Turn on Claude or Chat GBT or any of them and talk through something that you are thinking about, or say, "Here is a module I am teaching. Give me suggestions on how it could be more interactive and fun for my students. What would make them learn more? What would make them remember more? What can they do?" So when you start asking those questions, then you are going to — you can use AI as your little buddy to give you ideas. And my students always do that. They are like, they call it chatty. They are very cute.

### Final tips and next steps

You’ll have those prompts. So, again, start typing your prompt, cut and paste it, and say, *make my prompt awesome*, and then go from there. So it’s, you know, you have a lot of help to make these things.

The limitations in the sharing are there in, in, um, for students, but us as educators have several ways to share these things. That’s my kind of final thoughts.

> Oh I’m sorry. Did I

> No, that was it.

> Okay. Well, thank you Reena and Marcy for sharing your expertise and your expert guidance, and for all of you for your participation. If you learned something today, please type yes in the chat.

And our next session will be May 8th, and that is tools for educators AI in retail hospitality and tourism careers. We also in the Lark AI learning library have our accessibility series. Our next training will be May 14th on that. So, please make sure to share and we hope to see you at future AI trainings.

Please remember this recording will be available next week as well as links to all the resources including the chat. So, be sure to visit back and we hope to see you again real soon. Have a wonderful weekend everyone.
