Vibe Code a Service Desk App

Build a live service desk ticketing app using only natural language prompts.

Introduction

30 Second Summary

Every team needs a way to track problems and fix requests. Whether it is a broken printer, a software bug, or a password reset, a service desk app keeps everything organized in one place.

In this project, you will build a fully functional service desk ticketing app through vibe coding. You describe what you want in plain English to an AI tool called Bolt.new, and it builds the app for you.

What You'll Build

Picture opening a link, typing in a support ticket, and watching it appear on a live dashboard alongside other tickets, each color-coded by priority and trackable from open to resolved.

By the end of this project, you'll have:

A working ticket system where you submit support requests with a title, description, and priority level, then track each ticket from Open to In Progress to Resolved with color-coded badges.
Filter controls that narrow the dashboard to show only tickets matching a specific status or priority, so you can focus on what needs attention right now.
A live public URL where anyone with the link can visit and use your finished service desk app.
Secret Mission: Use Bolt's Select tool to visually target and restyle specific UI elements, and add a ticket detail view that shows full ticket information when clicked.

Do I need coding experience?

Nope. This project requires only a web browser. No coding experience, no code editor, and no local installs needed.

Before We Start

In this project, you are going to build a fully functional app by describing it in plain English, not by writing code. Before you start, take a moment to think about what you want your service desk app to do and who would use it.

Set Up Bolt.new and Plan Your App

Jumping straight into building an app without a plan leads to vague prompts, wasted tokens, and messy results. The AI does its best work when you give it clear direction upfront.

In this step, you will create your free Bolt.new account, learn the interface, and use Plan Mode to design exactly what your service desk app should do before you start building.

In this step, get ready to:

Create your free Bolt.new account.
Explore the interface and enable token display.
Use Plan Mode to design your service desk app.

Create your Bolt.new account

Bolt.new runs entirely in your browser. There is nothing to install. You just need a free account to get started.

Open your browser and go to bolt.new.
Click Get started to open the sign-up dialog.
Choose how you want to sign up: click Sign up with Google, Sign up with GitHub, or Sign up with email and password. No credit card is required.
Complete the brief onboarding survey when prompted.

What if I signed up with email?

If you chose email and password, Bolt sends a confirmation email. Open your inbox, click Confirm your email, then return to Bolt and sign in.

You land on the Bolt homepage with a large chatbox in the center. This is where you will type every prompt for the rest of the project.

Explore the interface and enable token display

Before you write your first prompt, it helps to know where the key controls live. Bolt uses tokens to measure how much work the AI does on each prompt. The free tier gives you 150,000 tokens per day, so tracking usage keeps you from running out mid-build.

Look at the chatbox in the center of the page. This is where you type prompts to tell Bolt what to build.
Notice the plus icon in the bottom-left corner of the chatbox. This opens extra tools like Enhance prompt.
Notice the Plan button in the bottom-right corner of the chatbox. You will use this shortly.
Notice the Select button next to Plan. This lets you click on a specific UI element to target it with a prompt.

Now turn on token display so you can see your remaining tokens as you work.

Click your profile icon at the top of the screen, then click Settings.
In the left menu under Account, click General.
Turn on Display token usage in chat.
Close the settings panel and return to the chatbox. Your remaining token balance now appears above the chatbox.

What are tokens?

Tokens are small units of text that the AI reads and generates. Every prompt you send and every line of code Bolt produces costs tokens. The free tier provides 300K tokens per day and 1M tokens per month. Focused, specific prompts use fewer tokens than broad, vague ones.

Don't see the token balance above the chatbox?

Make sure you toggled Display token usage in chat to on under Settings > Account > General. Close settings and refresh the page if needed.

Help me find the token display setting in Bolt.new

Use Plan Mode to design your service desk app

Plan Mode lets you describe what you want to build without Bolt generating any code yet. It uses fewer tokens than Build Mode because it only produces a plan, not a working app. This saves tokens and ensures Bolt understands your vision before it starts building.

In the bottom-right corner of the chatbox, click Plan. The button highlights blue when Plan Mode is active.

Why plan before building?

Without a plan, Bolt guesses what you want and may build something you do not need. That costs tokens to undo. Planning first gives Bolt clear direction so your first real build is much closer to what you want.

Type the following prompt into the chatbox:

I want to build a service desk ticketing app where users can submit support tickets with a title, description, and priority level. Tickets should have statuses like Open, In Progress, and Resolved. I want a dashboard that lists all tickets and lets me filter them by status and priority.

Press Enter or click the arrow to submit the prompt.

Bolt responds with a structured plan outlining the features it will build and how it will structure the app. Take a moment to read through it.

Review the plan. Confirm it mentions a ticket submission form, a ticket list or dashboard, status management, and filter controls.
If the plan is missing a clean design or navigation, refine it by typing another message. For example:

Also include a clean, professional design with a sidebar or header navigation.

Press Enter to submit the refinement.
Bolt updates the plan with your refinement.

What do you think the plan includes now? Before scrolling through Bolt's updated response, predict whether it covers all five features: ticket form, ticket list, status workflow, filtering, and professional design.

Read through the updated plan. You should see each of those five features covered. If anything is still missing, send another refinement prompt. When the plan looks complete, you are ready to build.

Quick action buttons

After Bolt generates a plan, it may show quick action buttons like Implement this plan, Show an example, or Refine this idea. Do not click Implement this plan yet. You will do that in the next step.

Plan Mode not working?

Make sure the Plan button is highlighted blue before you type your prompt. If it is not highlighted, click it once to activate Plan Mode. If Bolt starts generating code instead of a plan, you are in Build Mode.

Help me activate Plan Mode in Bolt.new

Your plan is locked in and Bolt knows exactly what to build. Next up, you will switch to Build Mode and watch Bolt turn that plan into a working app with a single prompt.

Write Your First Prompt and Generate the App

Your service desk app has a solid plan. Bolt.new knows what features to build, how to structure them, and what the design should look like.

Now it's time to turn that plan into a real, working app. One well-crafted prompt is all it takes to generate the initial version. It will be a starting point, not the finished product.

In this step, get ready to:

Switch to Build Mode and submit your first build prompt.
Test your app by submitting tickets in the Preview window.

Switch to Build Mode and submit your first prompt

Bolt is still in Plan Mode from the previous step. To start building, you need to switch back to Build Mode and tell Bolt to execute the plan.

Click Plan in the bottom-right corner of the chatbox to turn off Plan Mode.

The button is no longer highlighted blue. You are now in Build Mode.

Bolt may have generated a quick action button at the bottom of its last Plan Mode response. Look for Implement this plan.

✔️ I see the Implement this plan button

Click Implement this plan.

Bolt starts generating your app from the plan.

ⓧ I don't see it

Type this prompt into the chatbox:

Build this service desk app based on the plan we just created. Include a ticket submission form with fields for title, description, and priority (Low, Medium, High). Show submitted tickets in a list with their priority and status. Use a clean, modern design.

Click Build now to submit.

Bolt starts generating your app from the prompt.

The build takes approximately two to five minutes. You do not need to do anything while Bolt works.

What's happening during the build?

Bolt is reading your plan, choosing frameworks, and writing all the code for your service desk app. It runs everything inside your browser using WebContainers, so nothing is installed on your computer.

Build seems stuck or errored out?

If the build takes longer than five minutes or shows an error, refresh the page and try submitting your prompt again. Bolt saves your conversation, so you will not lose your plan.

You can also check your token balance above the chatbox. If your daily tokens are used up, you will need to wait until they reset the next day.

Help me debug my Bolt.new build

Test your app in the Preview window

Once the build finishes, the Preview window on the right side of the screen shows your running service desk app.

Before you test, take a look at the app. What do you expect will happen when you fill in the ticket form and click submit?

Fill in a title like Printer not working in the title field.
Add a description like The office printer on the 3rd floor is jamming every other print job.
Select a priority level from the dropdown.
Click the submit button.

Your new ticket appears in the ticket list below the form. The submission form works.

Submit two to three more test tickets with different titles and priorities.

Now look closely at your ticket list. You have a working ticket submission system, but some things are missing.

What should I notice?

Your app accepts tickets and displays them in a list. That is a solid foundation from a single prompt.

However, you will likely notice some gaps. All tickets probably show the same status with no way to change it. Priority levels might look identical with no color distinction. The overall design might feel generic.

This is completely normal. Your first prompt is always a starting point. The real skill in vibe coding is iterating with focused follow-up prompts to close these gaps one by one.

App not showing in the Preview?

Make sure the build finished successfully. If you see a spinning indicator, the build is still running. If the Preview is blank, try clicking the refresh icon inside the Preview window.

If the app looks completely different from what you expected (no form at all, or an unrelated layout), submit a follow-up prompt describing what you need. For example: "The app is missing the ticket submission form. Please add a form with title, description, and priority fields."

Help me fix my Bolt.new Preview

Your service desk app is alive. It accepts tickets and lists them, but there is no way to track a ticket's progress or tell priorities apart at a glance. Next up, you will iterate with focused prompts to add status management, color-coded priority badges, and a polished design.

Iterate with Focused Prompts to Add Features

Your service desk app accepts tickets and lists them, which is a solid first build. The problem is that every ticket looks the same, with no way to change a ticket's status or tell priority levels apart at a glance.

In vibe coding, your first prompt is always a starting point. In this step, you will add features one at a time using focused, single-feature prompts.

In this step, get ready to:

Add status change controls to each ticket.
Improve priority display with color-coded badges and professional styling.
Monitor your token usage to understand prompt efficiency.

Add status management with a focused prompt

Each prompt you send to Bolt.new should tackle one feature. This keeps the changes small, testable, and easy to troubleshoot if something goes wrong.

Add status controls to your tickets by typing this prompt in the chatbox:

Add the ability to change a ticket's status. Each ticket should have a dropdown or button to change its status between Open, In Progress, and Resolved. Show the current status as a colored badge on each ticket.

Press Enter or click the blue arrow icon to submit.

Bolt processes the prompt and updates your app. This takes a moment.

What just happened?

Bolt read your plain English description, figured out what code changes were needed, and added status controls to every ticket. You did not write a single line of code.

This is the core loop of vibe coding. You describe the behavior you want, and the AI handles the implementation.

In the Preview window, find one of your existing test tickets.
Change its status using the new dropdown or button.
Confirm the status badge updates to show the new status.

Don't see status controls on your tickets?

Make sure the build finished before testing. Look for Bolt's confirmation message in the chat.
If the controls appear but do not save the change when you select a new status, send a follow-up prompt telling Bolt to fix the status update functionality.
Why aren't the status controls working in my Bolt.new app?

Improve priority display and styling

The status workflow is in place. Now the priority levels need visual distinction so you can tell High and Low priority tickets apart at a glance.

Add color-coded priority badges and improve the design by typing this prompt in the chatbox:

Make the priority levels visually distinct. Use color-coded badges: red for High, yellow for Medium, green for Low. Also improve the overall design with a professional color scheme, clear spacing, and a header that says 'Service Desk'.

Press Enter or click the blue arrow icon to submit.
Wait for the build to complete.

Why one feature per prompt?

Bolt's own documentation recommends this approach: "Add individual components and features, one by one. Add in details in each component with small, specific prompts. Avoid overwhelming the LLM with too many instructions and requirements at once."

Small prompts are easier for the AI to execute correctly. They are also easier for you to test, because you know exactly what changed.

In the Preview, submit a new ticket with the priority set to High.
Confirm the ticket shows a red priority badge.
Submit another ticket with the priority set to Low.
Confirm that ticket shows a green badge.
Check that your app now has a Service Desk header and a cleaner layout.

Priority badges not showing colors?

If the badges appear but are all the same color, send a follow-up prompt telling Bolt to make High red, Medium yellow, and Low green.
If the design did not change at all, check the chat for an error message. Bolt sometimes needs a simpler, more specific prompt to process correctly.
My priority badges are not color-coded in Bolt.new. How do I fix this?

Check your token usage

Every prompt you submit uses tokens from your daily allowance. Keeping an eye on your token count helps you budget your free tier.

Look at the token usage displayed in the chat.
Compare the token count for your focused prompts against the initial build prompt from Step 2.

Why do focused prompts use fewer tokens?

Your initial build prompt created an entire app from scratch, which required Bolt to generate a lot of code at once. Each focused prompt only modifies a small piece of the existing app, so it consumes far fewer tokens.

Your free tier gives you 300K tokens per day. By iterating with small prompts, you get more features built within that daily budget.

Time for a final combined check. Before you test, predict what you expect to see. If you submit a new High priority ticket and then change an existing ticket's status to In Progress, what should each look like?

In the Preview, submit a new ticket with the priority set to High.
Change an existing ticket's status to In Progress.

The High priority ticket displays a red badge. The ticket you updated now shows In Progress as its status. Both features from your focused prompts are working together.

Your tickets now have color-coded priorities, status controls, and a polished design. Next up, you will add filtering so you can zero in on the tickets that need attention right now.

Add Filtering for a Real Dashboard Experience

Your service desk app now has color-coded priority badges and a full status workflow. Each upgrade came from a single focused prompt.

But picture a busy service desk with dozens of tickets. Scrolling through every ticket to find the urgent ones is slow and error-prone. Filter controls solve this by letting users show only the tickets that match a specific status or priority.

In this step, get ready to:

Prompt Bolt.new to add status and priority filter controls above the ticket list.
Test each filter to confirm the ticket list updates dynamically.

Prompt Bolt to add filter controls

Right now, every ticket sits in one long list with no way to narrow the view. You need filter controls so users can focus on what matters.

Ask Bolt to add filter controls by typing this prompt in the chatbox:

Add filter controls above the ticket list. Let users filter by status (All, Open, In Progress, Resolved) and by priority (All, Low, Medium, High). When a filter is selected, only matching tickets should show in the list.

Press Enter or click the blue arrow icon to submit.

What does this prompt ask Bolt to do?

This prompt asks Bolt to create two sets of filter options above your ticket list. One set filters by ticket status. The other filters by priority level.

The "All" option in each group resets the filter so every ticket is visible again. This gives users a quick way to toggle between a focused view and the full list.

Wait for Bolt to finish building the update. This is a single feature addition, so it should be faster than your initial build.
Check the Preview window. You should see filter controls for both status and priority above the ticket list.

Don't see filter controls?

Make sure the build has finished. The blue arrow icon reappears in the chatbox when Bolt is done.
If filters are missing or look broken, send a follow-up prompt asking Bolt to fix them. For example: "The filter controls are not appearing above the ticket list. Please add status and priority filter buttons."
Why didn't Bolt add filter controls to my service desk app?

Test the filters with your test tickets

Filters only prove themselves when they change what you see. Let's run through each option to make sure the ticket list responds correctly.

In the Preview, check that you have test tickets with a mix of statuses and priorities.
If all your tickets share the same status, submit a couple more tickets and change some statuses so you have a spread of Open, In Progress, and Resolved.

Before you click a filter, count how many of your test tickets have the status Open. How many tickets do you expect to see after clicking that filter?

Click the Open status filter option.

The ticket list updates to show only tickets with the Open status. All other tickets disappear from view.

Click All in the status filter to bring every ticket back.
Click the High priority filter and confirm only high-priority tickets appear.
Click All in the priority filter to reset the view.

Can you combine filters?

Depending on how Bolt built the feature, you may be able to filter by status and priority at the same time. Try selecting Open status and High priority together.

If the list narrows to only tickets matching both, combined filtering works. If it does not, that is perfectly fine for this project.

Your filters should now respond correctly to each option, showing only the matching tickets and hiding everything else.

Filters not updating the list?

Try refreshing the Preview by clicking the refresh icon in the Preview window.
If a specific filter shows zero tickets, make sure you actually have test tickets that match. Submit a new ticket with that priority or status and try the filter again.
My filter controls are not updating the ticket list. How do I troubleshoot this?

Your service desk app is now a real dashboard. Next up, you'll publish it to a live URL so anyone can visit it.

Publish Your App to the Web

Your service desk app now has everything a real support tool needs. Ticket submission, color-coded priorities, status tracking, and filters that let you focus on what matters.

Right now though, the app only lives inside Bolt's Preview window. Publishing turns it into a real website with a public URL that anyone with the link can visit.

In this step, get ready to:

Publish your service desk app to a live URL.
Test the live version and copy the public URL to share.

Publish your project

Your app has been running in Bolt's Preview, which is a private sandbox only you can see. Bolt.new includes free hosting on a .bolt.host domain, so publishing takes just two clicks.

Click the Publish button in Bolt.
Confirm by clicking the second Publish button when prompted.
Wait a moment while Bolt deploys your app.

Why two Publish clicks?

The two-step publish is a safety net. The first click tells Bolt you want to go live. The second click confirms you are ready to make the app publicly accessible to anyone with the link.

Once publishing completes, Bolt displays a live URL on the .bolt.host domain. This is your app's public address.

Visit your live app

Before you click the link, take a guess. Do you think the live version will look and behave exactly like the Preview, or will something be different?

Click the live URL that Bolt provided to open your published app in a new browser tab.

Your service desk app loads at a live .bolt.host address. It looks and works exactly like the Preview, because Bolt deployed the same app you built.

Now test each feature on the live site to make sure everything came through.

Submit a test ticket with a title, description, and priority level. Confirm the ticket appears in the list with the correct color-coded priority badge.
Change one of the ticket's statuses to In Progress. Confirm the status badge updates.
Use the filter controls to show only Open tickets. Confirm the list updates to show only matching tickets.

Live app not loading?

Make sure the publish process completed fully. If no URL appeared, return to Bolt and click Publish again, then confirm with the second Publish button.

If the page loads but looks broken, try a hard refresh by pressing Ctrl+Shift+R.

Help me troubleshoot my published app

Copy the URL from your browser's address bar.

That URL is your service desk app, live on the internet, built entirely through natural language prompts. Anyone with the link can visit it.

Secret mission

Refine Your Design with the Select Tool and Add a Ticket Detail View

Your service desk app works, but can you make it shine? Use Bolt's Select tool to visually target and restyle specific UI elements without describing them from scratch. Then add a ticket detail view that shows full ticket information when a ticket is clicked, and republish the whole thing.

Clean Up Your Resources

This project runs entirely in the browser using Bolt.new's free tier, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

A Bolt.new account (free).
A published web app on a .bolt.host URL (free hosting included).
A service desk app project in your Bolt.new dashboard.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your published app live.

Your published app stays live on the .bolt.host URL at no cost.
You can continue iterating on your app anytime by returning to bolt.new and opening your project.
Your free tier resets daily with 300K tokens per day, so you can make changes whenever you want.

Pause - I'll come back to this later

You do not need to pause anything. The free tier resets daily, so you can come back and make changes whenever you want.

Your published app remains live at no cost while you are away.
Your project and all its history are saved in your Bolt.new dashboard.
When you return, open your project from the Projects page on the Bolt homepage to pick up where you left off.

Delete - I don't want to use this again

Remove your published site and project entirely. Follow these steps in order.

Unpublish your site: open your project in Bolt, click the Publish menu, click Unpublish, then click Unpublish again to confirm.
Delete the project chat: on the Bolt homepage, click Projects. Click the three dots menu under your service desk project. Click Delete, then click Delete again to confirm.
Delete the project in StackBlitz: log in to stackblitz.com (Bolt creates a linked StackBlitz account automatically). Click Collections, then click Bolt collection. Click the menu icon for your project and select Delete project.

That's a Wrap!

Nice work! You just built and published a fully functional service desk app, without writing a single line of code.

Everything you see in your live app came from plain English prompts and a simple workflow: plan, prompt, iterate, publish.

You've learned how to:

Build a service desk app with ticket submission, color-coded priority badges, status tracking, and dashboard filtering entirely through natural language prompts in Bolt.new.
Practice the vibe coding workflow: plan with Plan Mode, generate with a well-crafted first prompt, then iterate with focused single-feature prompts.
Publish your finished app to a live .bolt.host URL that anyone with the link can visit.
Completed an optional Secret Mission to push your vibe coding skills further.

Ready to quiz yourself?