Using AI-assisted development to build reusable Power BI custom visuals
A prototype worth building on
A business planner at one of our larger clients used AI “vibe coding” to prototype a dashboard against the Fabric semantic models our team owns. The result was a visually polished HTML file that looked exactly the way the stakeholder wanted, but could not be safely operationalized. The data was embedded directly in the file, there was no supported way to refresh it and there was no plan for security, ownership or maintenance.
Rather than discard the stakeholder’s design or force a downgraded native rebuild that he did not want, I used AI paired programming to rebuild the design as a Power BI custom visual: a packaged, governed component that renders inside Fabric and Power BI.
The custom visual reproduces the prototype’s look and feel almost exactly, while inheriting Power BI’s security, refresh capabilities and governance. And because it is a packaged visual rather than a one-off file, it can be reused across other reports.
Instead of shipping a file with data baked inside it, we will ship code that renders data supplied by the semantic model at view time. This single change resolves the security, refresh and maintenance problems at once, without sacrificing the unique design.
This is a summary of the technique I used, its business value, candidate use cases and a high-level how-to to get you started.
Weighing the options: raw HTML vs. native rebuild
The prototype
The business planner connected to our Fabric semantic models during development and, with AI assistance, produced an HTML dashboard styled precisely to his vision. He asked us to host the HTML file so it could be shared with other members of the organization.
Why the raw HTML could not be hosted
- Security: The data was stored inside the HTML file as a static snapshot, bypassing the security defined on our semantic models (row-level security, workspace permissions and sensitivity labels). Anyone with the file had the data.
- Refresh: There was no supported mechanism to keep the embedded data current.
- Maintenance: The file was a one-off artifact with no versioning, ownership or lifecycle plan.
Why a native rebuild alone was not accepted
We offered to build a functionally equivalent dashboard in Power BI. That approach is secure, refreshable and governed, but native Power BI visuals could not match the prototype’s design, and the stakeholder wanted to preserve the look he had achieved and showcase what he had done with AI-assisted development. We needed an option that kept both the design and the governance.
The custom visual to keep the design and governance
I built a custom Power BI visual using VS Code, pbiviz, and AI paired programming tools (GitHub Copilot and the Claude Code extension). Working iteratively with the AI, I translated the prototype’s HTML, CSS and JavaScript design into a TypeScript-based Power BI visual.
The outcome is a custom visual that looks almost identical to the original prototype. It can be dropped into the report the stakeholder wanted, and because it is a packaged, reusable component, it can also be used in other reports where the same style is appropriate. The visual binds to fields from the semantic model through its data roles, so it renders live, governed data rather than a frozen copy.
Build your own custom visual, step by step
The following is a high-level recipe for the team. Microsoft’s documentation (linked in the References) covers each step in detail.
Prerequisites
- Visual Studio Code.
- Node.js (current LTS), which provides the npm package manager.
- An AI coding assistant in VS Code – for example, GitHub Copilot (with Copilot Chat in Agent mode) and/or the Claude Code extension. Premium models such as the Claude Sonnet family are well suited to the TypeScript work.
- Access to a Power BI / Fabric workspace where you can enable developer mode and connect to the relevant semantic model.
One-time environment setup
- Install Node.js (LTS), then confirm it is available from a terminal.
- Install the Power BI visuals tooling globally: npm i -g powerbi-visuals-tools
- Enable developer mode in the Power BI service developer settings (or in Power BI Desktop under Options → Report settings). This makes the special “Developer” visual available in the Visualizations pane.
Build the visual
- Scaffold a new visual project, then open the new folder in VS Code: pbiviz new MyCustomVisual
- Start the local dev server so the visual hosts live while you build: pbiviz start
- In a Power BI report connected to your semantic model, add the Developer visual to the canvas and drop in the fields you want. It connects back to the running dev server and refreshes as you change the code.
- Define how the visual receives data in capabilities.json (its data roles and data-view mapping), and render in src/visual.ts. This is where the semantic-model fields flow into your layout.
- Drive the build with the AI assistant in Agent mode. Paste or describe the prototype’s HTML/CSS, then iterate with prompts – for example, asking it to reproduce a specific layout, add formatting-pane options or wire up cross-filtering. Review and test each change; AI-generated code still needs a human in the loop.
Package and deploy
- Fill in the visual’s metadata (display name, author, support URL, icon) in pbiviz.json.
- Build the distributable package: pbiviz package
- This produces a .pbiviz file in the project’s /dist/ folder. Import it into a report, or have an admin deploy it organization-wide via the tenant’s organizational visuals settings. For broad or external use, it can be submitted to Microsoft AppSource for certification.
Side by side: the prototype and finished visual
This is a section from the prototyped HTML file
.
This is the custom Power BI visual built using AI paired programming in VS Code
The values differ because the two examples pull from separate datasets, but the design and layout closely match the original.
Where else this approach can pay off
The same technique generalizes well beyond this one dashboard. Practical applications include:
- Branded KPI components: Executive scorecards and KPI cards that enforce corporate branding and design standards across reports.
- Specialized chart types: Radial gauges, sankey or flow diagrams, timelines, bullet charts and small-multiple layouts that are awkward or unavailable in native visuals.
- Prototype-to-production: A repeatable path for turning a stakeholder’s HTML or design mock-up into a governed, production-ready visual – exactly the scenario described here.
- Domain-specific visuals: Process or plant-floor layouts, custom funnels, or other visuals tailored to a specific line of business.
- Reusable component library: A small internal library of approved custom visuals so teams reuse vetted components instead of rebuilding from scratch.
The bigger opportunity for your team
The opportunity is bigger than a single dashboard. AI-assisted development gives organizations a practical path to turn creative prototypes, business-led ideas and highly specialized reporting needs into secure, reusable Power BI assets. Instead of choosing between custom design and enterprise governance, teams can have both: visuals that match the user experience stakeholders want while still relying on trusted semantic models, governed refresh, role-based access and repeatable deployment practices.
For readers leading analytics, data platform, or business transformation efforts, this approach can help accelerate proof-of-concept work, preserve the intent of stakeholder-designed prototypes, reduce one-off report development and establish a reusable library of approved components. It also creates a bridge between business creativity and production-grade analytics engineering, allowing teams to move faster without weakening security, maintainability or user trust.
If your organization is exploring custom Power BI visuals, modernizing BI experiences or looking for practical ways to apply AI-assisted development to real analytics problems, Inviso can help. Our teams combine deep Microsoft data platform expertise, Fabric and Power BI implementation experience, AI and automation capabilities and creative design support to help assess the right opportunities, build secure prototypes, package production-ready visuals and create a roadmap for broader adoption.
Ready to explore what this could look like in your environment? Connect with Inviso to review your current reporting landscape, identify high-value visual use cases with the most impact and map a practical path from prototype to governed Power BI asset.
