Ep1: Prompt to Production

Intro

[0:00] Hey folks, today we're going to be building a production project management application from prompt to deployment in about five minutes. Let's get started.

Writing the Prompt

[0:18] So I'm inside of the Synthetiq desktop application. This is a brand new workspace. I've nothing installed yet. So what I'm going to do is I'm going to click New Chat. And then I'm going to switch from Workspace to our App Writer agent and click New App. And then I'm going to paste in a prompt that I've prepared beforehand describing an app I want built.

I want to build a team-based project management app for managing a software product roadmap. I want it to be team-based so managers can add the users of their team, and each team can have their own tasks and projects. I've also added information about the different attributes I want tracked on each task. And I've also added that I want tasks to be tracked at the task level, but also have their own project level importance, since tasks will likely vary in importance depending on the project.

Additionally, I've also added some information about the views and the UX that I want the app to have.

Now, knowing that your initial prompt doesn't have to be perfect, because you're most likely going to iterate on the app after the agent's initial build, you can go ahead and submit it to the chat. At this point, the agent will start doing some initial planning and present a plan. We can see it's presented it here, and it will give an overview of what it's going to build, what services it will integrate, how it's going to do it, what the UX will be, and so on. You can review it, and once you're happy with it...

Reviewing the Plan and Building the App

[1:50] You're going to go ahead and click accept and proceed, which we will do here.

So at this point, the agent will exit plan mode and actually start building the app. Now, depending on the complexity of the app that you've specified, this may take some time. So we're going to go ahead and fast forward just out of the interest of time. So now at this point the agent has finished building the application and it's provided a summary of what it's built. And then here it will include any changes to the original plan. It will also include a link to the application, which we'll click here.

And we can see the application opens up right inside of the Synthetiq desktop application, right next to our chat. I can see it loading here, starting off with a blank slate. Now this app is team based, so we'll have to add our first test team. Great, there's our board view. I'm going to go ahead and close the chat view so I have more screen real estate. And I can see that the AI has created a board view, a categories view, a projects view, and a members view.

Awesome, I can see I am the manager of the team I've created.

So now let's go ahead and create some tasks just to test the whole system.

Creating and Testing Tasks

[3:06] I'll add a sample task, I'll assign it to myself.

[3:13] And there we go, the task is created. I'm gonna add another one, and I think I'll just add this one to a different category for some variation.

[3:28] Go ahead and assign this to myself again, since I'm the only user in the system. Great.

I can see that I can also pop out a details tab, which is something I specifically asked for in my prompt. I can add some additional metadata to the task, like tags and dependencies.

[3:51] Great. I can also drag and drop cards to different statuses, which is very common for a board-like layout.

Categories and Projects

[4:02] I can see that the different category breakdowns are populating correctly. I can even add and remove different categories. Now let's test the project functionality. We'll go ahead and create a test project.

[4:19] Awesome. Now we'll go add some tasks to this project and see how they populate.

[4:27] I can now see the project that I added is populated to the details panel.

[4:36] Importantly, I can see that each task now has a project specific priority, along with the task level prioritization, which is something we specifically asked for in our original prompt.

Okay, I can see that our tasks are now populating in our project, which is great news.

Project Progress and Pushing a Version

[4:58] Now let's go and let's actually mark some of these as completed so we can see if the project updates accordingly. So I'll just need to give a refresh, and there we go.

We can see that the project progress is updating correctly. Great. Now we want to get this app deployed in production to the web. To do that, we'll click the settings button in the top right and then navigate to the versions tab. Here, we'll click on the button that says push new version. Versions are snapshots in time of our app's functionality. Whenever we make changes to our app, we will want to push a new version.

Deploying to Production

[5:42] With that done, we'll now navigate to the deployments tab, and we get to choose a subdomain to deploy our app to. Here I'll just put in project management. I'll create the production app. And then you can see we can select the version from the drop-down, and then we'll click deploy, confirm we want to deploy this version, and that will kick off the process to deploy our application to the web. Once it's done, you'll see the URL populated at the top.

And we can click the visit button to launch our app, which will now open in the browser. I can click the login. Now if you notice, we never had to build any of the login or authentication functionality. That is all built into the framework that all Synthetiq apps are built on, so you don't have to re-implement the same things over and over. We can verify it has the same functionality, but also comes with a lot of additional functionality like this admin panel that allows you to manage access, users, their roles and permissions and scopes within the application, different login methods, connecting other third-party services, and much, much, much more. In future videos, we will dive into the details of each one of those panels as well as all of the other functionality built into every Synthetiq app.

So with that, we've shown how you can go from a single prompt in a couple clicks to a deployed production app on the web without having to think about any infrastructure, databases, authentication, and more. Now this is only scratching the surface. In future videos, we will continue to iterate on this app and add much more complex and powerful functionality, as well as explore all of the additional functionality on the Synthetiq platform that makes building, iterating, and deploying production apps with AI incredibly simple.

So with that, see you next time.