Vibe coding with the incident.io API

Many, many years ago, I was a computer science major at the University of Illinois, hoping someday I’d be able to write code for a living. I started my career in QA hoping to learn the ins and outs of software development. But it turns out I wasn’t very good at coding. I was just good enough to get a role as a sales engineer, where all I had to do was write code that could hold together for 30 minutes in a demo.

After a while as a sales engineer, I ended up in Marketing, where my coding aspirations seemed to have ended.

That is, until vibe coding became a thing. Now armed with my new best friend Claude Code, even a marketer like me can churn out somewhat useful apps.

So when we announced our build on incident.io competition, I knew I had to contribute something. I’ve been into building iOS apps lately in XCode, so an idea came to me:

How about I build an “incident command center” dashboard using the incident.io API?

A couple of hours and a few dozen prompts later, I had a working Apple TV app that turns incident data into a gorgeous command center display that could be used in a conference room or office.

The vibe coding approach: from idea to working app

Here's the thing about vibe coding—it's not about perfect architecture or production-ready code. It's about getting from "wouldn't it be cool if..." to "holy shit, this actually works" as fast as possible.

Here are the prompts I used to create the tvOS app.

  Initial Setup:
  - "Create a new tvOS SwiftUI app for displaying incident management data"
  - "Set up a basic SwiftUI project structure for Apple TV with focus-based navigation"

  Core Features:
  - "Create a dashboard that displays incidents from incident.io API in a grid layout"
  - "Build a war room style interface with high contrast colors and large fonts for TV viewing"
  - "Add real-time updates that refresh incident data every 30 seconds"
  - "Implement focus-based navigation optimized for Apple TV remote control"

  Data Integration:
  - "Create data models for incident.io API responses with proper JSON decoding"
  - "Build an API service to fetch incidents from incident.io with Bearer token authentication"
  - "Add mock data fallback when API calls fail"
  - "Sort incidents by priority, status urgency, and creation time"

  UI Components:
  - "Create incident tiles with status badges, severity indicators, and pulse animations"
  - "Build a detailed incident view with drill-down navigation"
  - "Add color-coded status indicators for different incident states"
  - "Implement proper spacing and typography for TV viewing distances"

  Polish & Testing:
  - "Create a comprehensive README with screenshots"
  - "Add a Wargames/NORAD terminal theme for the interface"
  - "Set up proper project documentation in CLAUDE.md"

The incident.io API is perfect for rapid prototyping

Claude Code figured out how to use our API in about 10 seconds. That's either a testament to AI capabilities or proof that we designed something pretty intuitive. Probably both.

Here's what made vibe coding with our API so smooth: The authentication is dead simple: One API token, drop it in a header, you're done.

struct APIClient {
    private let token = "your-api-token-here"
    
    private var headers: [String: String] {
        ["Authorization": "Bearer \(token)"]
    }
}

The endpoints are predictable: Want incidents? GET /v2/incidents. Want a specific incident? GET /v2/incidents/{id}. Claude didn't need to guess weird naming conventions.

The responses include everything you need: Each incident comes with status, severity, timestamps, and assignees.

struct Incident: Codable {
    let id: String
    let name: String
    let status: IncidentStatus
    let severity: Severity
    let created_at: Date
    let summary: String
    let incident_role_assignments: [RoleAssignment]
}

This is what good API design looks like: predictable, complete, and impossible to mess up.

Building the UI: when constraints spark creativity

Here's where vibe coding gets interesting. Claude Code had to figure out how to make incident data work on a TV screen with nothing but arrow keys and a select button.

My solution? Think like a video game designer. Everything becomes a card you can focus on:

struct IncidentCard: View {
    let incident: Incident
    @Environment(\.isFocused) var isFocused
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(incident.name)
                .font(.headline)
                .fontWeight(isFocused ? .bold : .medium)
            
            HStack {
                StatusBadge(status: incident.status)
                Spacer()
                Text(timeAgo(incident.created_at))
                    .foregroundColor(.secondary)
            }
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(isFocused ? Color.accentColor : Color.gray.opacity(0.2))
        )
        .scaleEffect(isFocused ? 1.05 : 1.0)
        .animation(.easeInOut(duration: 0.1), value: isFocused)
    }
}

Adding dual theme support

About halfway through the vibe coding session, I realized this needed two completely different personalities.

First, the incident.io branded theme. I told Claude Code to look at our brand guide and match our colors and fonts as best as possible. I think it got close!

Next, the Wargames theme: I’m a big fan of the movie Wargames (It got me into programming). Every time I think of a dashboard on a giant screen, I think of the NORAD scene from Wargames. So I had Claude code up a design for me: dark background, green text, that terminal aesthetic.

Why you should vibe code something with our API

Here's the honest truth: building weird stuff with APIs is the best way to learn how they work. Documentation tells you what endpoints exist. Vibe coding tells you whether they're useful.

This Apple TV app is at best a fun thing to throw up on a monitor in your office. But the process of building it revealed that our API is approachable enough for rapid prototyping, complete enough for real applications, and flexible enough for creative interpretations.

Your turn: What would you build if you spent a Friday afternoon with Claude Code and the incident.io API?

• A Slack bot that creates incidents from specific emoji reactions?
• A Chrome extension that overlays incident status on your monitoring dashboards?
• A CLI tool that lets you manage incidents from your terminal?
• A Discord integration for gaming teams who run their own services?

The vibe coding recipe

If you want to try this approach:

1. Pick something slightly ridiculous: If it sounds like a normal feature request, it's not weird enough to teach you anything interesting.
2. Give Claude the API docs: Let it figure out what's possible without preconceptions about how things "should" work.
3. Iterate fast: Don't worry about perfect code. You're exploring possibilities, not shipping to production.
4. Stop when it's cool: The goal is "this works," not "this is enterprise-ready."
5. Share what you learned: The weird edge cases you discover might help us build better APIs.

Want to try it?

The complete source code is on GitHub at https://github.com/twentworth12/incident-command-center. Fair warning: it's very much vibe code, not production software. But it works, and that's the point.

Ready to build something weird/cool/useful? Start a free trial of incident.io and see what Claude Code can help you create. Our API docs are at docs.incident.io, and honestly, Claude probably understands them better than we do at this point.