Key Takeaways
- Callnovo open-sourced a fullstack vibe-coding template that builds production web apps from natural language prompts — it includes 20 specialized skills and 3 expert agents for Claude Code, covering everything from database design to security audits to deployment.
- We built it because we needed to move fast internally — and AI-guided development let us ship tools in days that used to take weeks — including the custom management layer we built on top of Bitdefender’s API, client onboarding dashboards, and operational reporting tools.
- This isn’t a side project — it’s how a 2,500+ agent BPO company stays competitive — when your operations managers need a new dashboard by Friday, you either build it or buy something that doesn’t quite fit. We chose to build.
- We open-sourced it because the AI development workflow itself is the innovation, not the template — the value is in how teams structure their AI coding workflows, and we think more companies should adopt this approach.
A BPO Company That Ships Code
Let’s address the obvious question: why is a customer service outsourcing company releasing developer tools on GitHub?
Because we’re not just a customer service company. Callnovo operates 2,500+ agents across the Philippines, Colombia, Bolivia, and several other countries. We built HeroDash — our own omnichannel contact center platform. We built a custom endpoint security management layer on top of Bitdefender’s API. We build internal dashboards, client reporting tools, quality assurance automation, and integration middleware. Every week, there’s something new that needs to exist and doesn’t.
The question was never whether we’d write code. The question was how to write it faster without sacrificing quality.
What the Template Actually Is
The Fullstack Vibe-Coding Template is a project scaffold designed for Claude Code — Anthropic’s AI coding agent. Instead of starting from a blank repository and manually configuring every layer of a web application, you clone the template, describe what you want to build in plain language, and Claude handles the architecture, UI, APIs, database schema, and testing.
That sounds like magic. It isn’t. The magic is in the 20 skills and 3 expert agents bundled into the template’s .claude/skills/ directory.
The Skills
Each skill is a structured prompt that encodes best practices for a specific domain. When Claude encounters a task that falls under a skill’s domain, it applies those practices automatically.
Core development: database schema design, backend API standards, testing (Vitest + Playwright), version control, code review protocols.
Quality assurance: security audits, performance optimization, accessibility compliance (WCAG), dependency management.
User experience: UI design systems (Tailwind + shadcn/ui), internationalization (i18n), data visualization.
Orchestration: A task analysis agent that recommends which skills to apply. A continuous improvement system that captures patterns from your work as new reusable skills.
The Stack
The template runs on a modern fullstack foundation:
- Next.js 14 with React 18 and TypeScript
- Tailwind CSS with shadcn/ui for component design
- Drizzle ORM — SQLite in development, MySQL in production
- Vitest for unit tests, Playwright for E2E
- Built-in CI/CD configuration
How We Actually Use It
Here’s the part that matters for understanding Callnovo as a company: this template isn’t a marketing exercise. It’s an extraction of how our engineering team actually works.
The Problem We Were Solving
When you run customer service operations across six countries, you generate a constant stream of operational needs that off-the-shelf software can’t address:
- An operations manager in Bolivia needs a dashboard that shows agent attendance, call quality scores, and client-specific SLAs on one screen — and he needs it connected to five different messaging platforms.
- A client onboarding team needs a workflow tool that tracks which endpoints have Bitdefender installed, which agents have completed training, and which accounts are ready for live traffic.
- A CSM needs to pull reporting data from HeroDash and format it into a client-facing weekly summary — automatically.
None of these are products you can buy. They’re the operational glue between your platforms, your processes, and your people. And in a fast-moving BPO environment, the window to build them is measured in days, not quarters.
Identify Operational Gap
An operations manager, CSM, or client flags a workflow bottleneck or missing capability that existing tools can’t address.Describe Requirements
Our engineering team describes the desired functionality in natural language — what data it needs, who uses it, what decisions it supports.AI-Guided Development
Using our vibe-coding workflow, Claude generates the application — database schema, API routes, UI components, tests — with built-in quality checks.Review, Deploy, Iterate
Human engineers review the output, run the test suite, deploy to production, and iterate based on user feedback. Total cycle: days, not weeks.What This Looks Like in Practice
Our Bitdefender management webapp is a good example. We needed site-isolated endpoint security management across six countries. No off-the-shelf product handles this well for a single organization managing distributed sites. So we built a custom webapp on top of Bitdefender’s GravityZone API — site-scoped dashboards, automated compliance checks, patch enforcement, and incident response workflows.
The same pattern applies across our operations:
Client integration tools. When a client’s systems don’t have native integrations with our platforms, we build middleware. Amazon Seller Central connections, Shopify order data pipelines, CRM sync tools — all built internally, all tailored to specific client needs.
QA and reporting automation. Our AI-powered voice QA system in HeroDash analyzes calls in real-time and flags quality issues. When an operations manager discovers a false positive — like a Spanish call with three speakers being misidentified as an angry customer — the appeal workflow is an internal tool we built to handle exactly that edge case.
Operational dashboards. Every operations manager has different needs. Some manage 30-agent accounts with deep metrics. Some manage 40 accounts with shared agents who need a different view entirely. Off-the-shelf BI tools don’t understand BPO operations. Ours do, because we built them.
Why Open Source It
We’re not trying to become a developer tools company. We open-sourced the template for three reasons:
1. The workflow is more valuable than the code. The template itself is a scaffold — Next.js, Tailwind, Drizzle. Nothing proprietary. What’s valuable is the pattern: structuring AI development workflows with domain-specific skills that encode your organization’s best practices. We want more companies — especially non-tech companies like BPOs — to adopt this approach.
2. It forces us to maintain quality. Open-sourcing code means other developers will read it. That accountability keeps our internal practices sharp. If our security review skill isn’t good enough for public consumption, it isn’t good enough for internal use either.
3. It signals what kind of company we are. When a prospective client asks about our technology capabilities, we can point to a public repository with 20 production-quality development skills. That’s more convincing than a slide deck.
What’s in It for You
If you’re a developer or a small team building internal tools, the template gives you a head start. Clone it, describe what you need, and let Claude handle the boilerplate while you focus on business logic.
If you’re evaluating Callnovo as a BPO partner, this template is evidence of something more fundamental: we invest in engineering capability because our operations depend on it. The same team that built this template builds the tools that manage your agents, monitor your quality metrics, and integrate with your systems.
Customer service isn’t a low-tech business. Not at our scale. And the companies that treat it as one are the companies whose clients eventually find us.
Try It
The template is available at github.com/callnovo-lab/fullstack-vibe-coding-template under the MIT license. Clone it, install Claude Code, and describe what you want to build.
Two commands to know:
/just-do-it— Analyzes your recent changes and runs all relevant quality checks automatically./improve-skills— Captures patterns from your completed work as new reusable skills for future projects.
We’re continuing to evolve the template as our internal workflows improve. Contributions are welcome.
