{"id":3952,"date":"2026-07-01T18:34:03","date_gmt":"2026-07-01T18:34:03","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3952"},"modified":"2026-07-01T18:34:03","modified_gmt":"2026-07-01T18:34:03","slug":"free-ai-model-ignite-ui","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/free-ai-model-ignite-ui","title":{"rendered":"Free AI Model for Ignite UI Code: 32-Test Benchmark"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We ran 32 identical tasks across a paid model (claude-sonnet-4-6) and a free model (big-pickle, available via <a href=\"https:\/\/openrouter.ai\" rel=\"noopener\">OpenRouter<\/a>) \u2014 Angular, Blazor, React, and Web Components. Both finished at 94% success rate. The free model didn&#8217;t get there because it secretly knows Ignite UI. It got there because MCP servers and skill files gave it exactly what it needed to know.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">TL;DR<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ignite UI MCP servers and skill files are what make free models viable<\/strong> \u2014 they ground the agent in accurate component APIs and prevent hallucination loops.<\/li>\n\n\n\n<li><strong>With that context in place, both models achieved 94% success<\/strong> (15\/16) on the same task.<\/li>\n\n\n\n<li><strong>big-pickle costs $0.00.<\/strong> Sonnet averages ~$1.44 per run.<\/li>\n\n\n\n<li><strong>big-pickle is faster<\/strong> in most configurations \u2014 4\u201313 min vs 7\u201322 min for Sonnet.<\/li>\n\n\n\n<li><strong>Web Components is the exception:<\/strong> big-pickle needs MCP enabled to pass reliably (2\/2 with MCP, 1\/2 without). Sonnet goes 4\/4 regardless.<\/li>\n\n\n\n<li><strong>Best overall config for free model:<\/strong> Ignite UI MCP servers + skills on for Web Components; skills on, no MCPs for Angular, Blazor, React.<\/li>\n\n\n\n<li><strong>The failure modes are different<\/strong> \u2014 Sonnet times out from scope creep; big-pickle stalls silently when it lacks icon catalogue context. Both are mitigable.<\/li>\n\n\n\n<li><strong>The economics only tilt further toward free over time:<\/strong> per-task token consumption is climbing (longer agentic runs, bigger contexts, live MCP lookups), and the MCP overhead that&#8217;s free on a free model is exactly what inflates a paid bill. Today&#8217;s ~$1.44\/run feels like a rounding error \u2014 at team scale, it isn&#8217;t.<\/li>\n<\/ul>\n\n\n\n<div style=\"border-left:4px solid #4a90e2; background:#f5f8ff; padding:14px 16px; margin:18px 0; border-radius:6px;\"><strong style=\"display:block; margin-bottom:6px;\">Note on model availability (June 2026):<\/strong> big-pickle was a cloaked\/stealth model served through OpenRouter at the time of testing (June 2026). Stealth endpoints are temporary, they get renamed, promoted to a named release, or withdrawn without notice, so the exact &#8220;big-pickle&#8221; we tested may not be available when you read this. That&#8217;s fine for our purposes: the finding here isn&#8217;t &#8220;use this specific model,&#8221; it&#8217;s that the right context tooling closes the gap between a free model and a paid one. Swap in whatever capable free model you have access to and the mechanism holds.\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-this-benchmark-exists\">Why this benchmark exists<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Getting good results from AI at low cost matters. But cost isn&#8217;t just about picking a free model: MCP servers and skill files inject context that consumes tokens, and more tokens mean higher cost on paid models. We wanted to measure whether that overhead actually pays off.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Testing AI tooling reliably is harder than it looks. Starting a fresh chat session does not fully reset the environment: previous interactions can influence model behavior in ways that are hard to isolate. The phenomenon is explored in more depth in <a href=\"https:\/\/www.infragistics.com\/blogs\/why-ai-results-improve-over-time-without-the-model-actually-learning\">this post on why AI results improve over time without the model actually learning<\/a>. To get around that, we built the <strong>Ignite UI Testbed<\/strong>: every run executes in a new, ephemeral container with a genuinely clean state, no carryover between tests, no bias from prior sessions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We ran the same task across two models \u2014 claude-sonnet-4-6 (paid) and big-pickle (free, via <a href=\"https:\/\/openrouter.ai\" rel=\"noopener\">OpenRouter<\/a>) \u2014 covering Angular, Blazor, React, and Web Components. The task: build a two-page authentication UI using <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui\">Ignite UI<\/a> components. The kind of thing a developer hands to an AI agent and expects to work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ignite UI has a specific, versioned component API. Without guidance, any model can generate attribute names or icon identifiers that don&#8217;t exist. We saw this with another free model that failed 4 out of 16 runs due to hallucinated API names. The real question was simpler: <em>can the Ignite UI AI tools bring a free model up to the standard of a paid one?<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each run varied two settings: whether <strong>MCP servers<\/strong> (live Ignite UI documentation servers) were on, and whether <strong><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui\/ignite-ui-ai-agent-skills\" data-type=\"link\" data-id=\"https:\/\/www.infragistics.com\/products\/ignite-ui\/ignite-ui-ai-agent-skills\">skill files<\/a><\/strong> (local instruction files covering component usage patterns) were injected. Four configurations per framework, 16 runs per model, 32 total.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-prompt-and-test-setup\">The prompt and test setup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every run used the same prompt: <em>build a two-page authentication UI with a full login form and a full register form, using Ignite UI components \u2014 inputs, checkboxes, radio buttons, switches, selects, multi-combo, buttons, and icons. The prompt required validation states, helper text, social login buttons, password toggle, remember-me, and responsive layout, and explicitly asked the agent not to use plain HTML controls when an Ignite UI component was available<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration matrix<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Four configurations were tested per framework per model:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Config<\/th><th>MCPs<\/th><th>Skills<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>A<\/td><td>on<\/td><td>on<\/td><td>Full context: live component docs + local skill files<\/td><\/tr><tr><td>B<\/td><td>on<\/td><td>off<\/td><td>Live docs only, no local skill injection<\/td><\/tr><tr><td>C<\/td><td>off<\/td><td>on<\/td><td>Local skill files only, no live MCP queries<\/td><\/tr><tr><td>D<\/td><td>off<\/td><td>off<\/td><td>Model knowledge only \u2014 no external context injected<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>MCP servers<\/strong> give the agent live access to Ignite UI documentation, valid attribute names, theming APIs, and \u2014 critically \u2014 the exact icons available in <code>@igniteui\/material-icons-extended<\/code>. Instead of guessing whether <code>person_add<\/code> is a valid icon name, the agent can look it up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Skill files<\/strong> are short instruction documents that tell the agent how to use Ignite UI in a specific framework: which patterns to follow, which imports to use, what to avoid. They don&#8217;t enumerate every possible value (that&#8217;s the MCP&#8217;s job), but they point the model in the right direction from the start.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Together, these two tools cover the gaps that trip up smaller models on niche component libraries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overall-results\">Overall results<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Model<\/th><th>Score<\/th><th>Cost<\/th><\/tr><\/thead><tbody><tr><td>claude-sonnet-4-6<\/td><td>15\/16 (94%)<\/td><td>~$1.44\/run avg<\/td><\/tr><tr><td>big-pickle<\/td><td>15\/16 (94%)<\/td><td>$0.00\/run<\/td><\/tr><tr><td><strong>Total runs<\/strong><\/td><td><strong>32<\/strong><\/td><td>4 frameworks \u00d7 4 configs \u00d7 2 models<\/td><\/tr><tr><td>Sonnet total cost<\/td><td>~$21.53<\/td><td>for 15 successful runs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Both models tied at 94%, but the more important story is <em>how<\/em> the free model got there. big-pickle&#8217;s only failure \u2014 a silent 21-minute hang on Web Components \u2014 happened in the one configuration with the least context: skills only, no MCP. Every run that had either MCP servers or skill files (or both) passed. Pull big-pickle&#8217;s one under-configured run and it goes 15\/15.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sonnet&#8217;s failure was different: a scope-creep timeout on React, caused by the agent exploring too many options rather than missing knowledge.<\/p>\n\n\n\n<div style=\"border-left:4px solid #4a90e2; background:#f5f8ff; padding:14px 16px; margin:18px 0; border-radius:6px;\">\nThe free model did not succeed because it knows Ignite UI well. It succeeded because MCP servers and skill files told it what it needed to know.<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"results-by-frameeork\">Results by framework<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Angular \u2014 both models perfect<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Model<\/th><th>MCPs<\/th><th>Skills<\/th><th>Result<\/th><th>Tokens<\/th><th>Duration<\/th><th>Cost<\/th><\/tr><\/thead><tbody><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>112,441<\/td><td>19m<\/td><td>~$1.45<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>85,753<\/td><td>22m<\/td><td>~$1.10<\/td><\/tr><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>102,140<\/td><td>17m<\/td><td>~$1.31<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>65,728<\/td><td>16m<\/td><td>~$0.84<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>51,400<\/td><td>10m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>96,000<\/td><td>13m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>76,600<\/td><td>10m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>32,800<\/td><td>8m<\/td><td>$0.00<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Angular went 8\/8 across both models \u2014 every configuration passed. What stands out is how much the skill file helps: big-pickle&#8217;s skills-on, no-MCP run finished in 8 minutes at 32,800 tokens, the most efficient run in the entire 32-run matrix. The skill file gave the agent enough Angular-specific orientation that it never needed to query an MCP server. Sonnet&#8217;s equivalent run cost $0.84 and took 16 minutes for the same outcome.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verdict for Angular:<\/strong> Use big-pickle with the Ignite UI skill file, MCPs off. The skill file alone is sufficient, and it produces the fastest, lowest-token result at zero cost.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills-1024x683.jpg\" alt=\"Angular \u2014 with Ignite UI MCP Servers and Skills. Both models produce clean, complete authentication forms. big-pickle (left) delivers a solid login and registration flow; Sonnet (right) produces similarly structured output. The quality gap is minimal when context tooling is in place.\" class=\"wp-image-3958\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills-1024x683.jpg 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills-300x200.jpg 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills-768x512.jpg 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills-480x320.jpg 480w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-with-Igniteui-mcps-skills.jpg 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>Angular \u2014 with Ignite UI MCP Servers and Skills. Both models produce clean, complete authentication forms. big-pickle (left) delivers a solid login and registration flow; Sonnet (right) produces similarly structured output. The quality gap is minimal when context tooling is in place.<\/em><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/angular-without-ai-tooling.jpg\" alt=\"Angular \u2014 without Ignite UI MCP Servers and Skills. Both models still pass Angular without context tooling, but Sonnet (right) produces a noticeably richer registration form with more fields and sections. big-pickle (left) outputs a simpler but functional result.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\" ><em>Angular \u2014 without Ignite UI MCP Servers and Skills. Both models still pass Angular without context tooling, but Sonnet (right) produces a noticeably richer registration form with more fields and sections. big-pickle (left) outputs a simpler but functional result.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Blazor \u2014 both models perfect, with a speed caveat<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Model<\/th><th>MCPs<\/th><th>Skills<\/th><th>Result<\/th><th>Tokens<\/th><th>Duration<\/th><th>Cost<\/th><\/tr><\/thead><tbody><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>150,734<\/td><td>8m<\/td><td>~$1.93<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>211,992<\/td><td>14m<\/td><td>~$2.73<\/td><\/tr><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>111,532<\/td><td>7m<\/td><td>~$1.43<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>77,226<\/td><td>7m<\/td><td>~$0.99<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>84,900<\/td><td>7m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>87,500<\/td><td>6m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>142,300<\/td><td>6m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>55,100<\/td><td>4m<\/td><td>$0.00<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Blazor shows the skill file&#8217;s value most clearly. Sonnet&#8217;s no-MCP + no-skills run burned 211,992 tokens (the highest in its matrix) because without any grounding the agent had to explore .NET-specific component attribute names through trial and error. Add a skill file and that drops to 77,226 tokens in 7 minutes. The skill file doesn&#8217;t just help free models; it makes the paid model materially cheaper too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">big-pickle&#8217;s best Blazor run \u2014 4 minutes with the skill file, no MCPs \u2014 was the fastest successful run in the entire 32-run matrix. Both models finish Blazor cleanly under 15 minutes when given proper context.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verdict for Blazor:<\/strong> big-pickle with the Ignite UI skill file, no MCPs. Four minutes, free, and the skill file stops the API-attribute guessing that drives slow, token-heavy runs in both models.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/blazor-with-ai-tooling.jpg\" alt=\"Blazor \u2014 with Ignite UI MCP Servers and Skills. With context tooling enabled, both models deliver well-structured Blazor auth forms. big-pickle (left) produces clean Login and Register pages with proper Ignite UI component usage including social login, interests multi-select, and notification switches. Sonnet (right) adds slightly more form depth but the practical difference is small.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>Blazor \u2014 with Ignite UI MCP Servers and Skills. With context tooling enabled, both models deliver well-structured Blazor auth forms. big-pickle (left) produces clean Login and Register pages with proper Ignite UI component usage including social login, interests multi-select, and notification switches. Sonnet (right) adds slightly more form depth but the practical difference is small.<\/em><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/blazor-without-ai-toolong.jpg\" alt=\"Blazor \u2014 without Ignite UI MCP Servers and Skills. Both models still pass without context tooling, but Sonnet's register form (far right) expands to a significantly longer, more detailed form \u2014 at the cost of 211,992 tokens. big-pickle (left) produces a shorter but still functional result. This is the configuration where Sonnet's token usage peaked sharply and where the skill file's value is most obvious: it cuts that cost to 55K tokens in 4 minutes.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>Blazor \u2014 without Ignite UI MCP Servers and Skills. Both models still pass without context tooling, but Sonnet&#8217;s register form (far right) expands to a significantly longer, more detailed form \u2014 at the cost of 211,992 tokens. big-pickle (left) produces a shorter but still functional result. This is the configuration where Sonnet&#8217;s token usage peaked sharply and where the skill file&#8217;s value is most obvious: it cuts that cost to 55K tokens in 4 minutes.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">React \u2014 the surprising inversion<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Model<\/th><th>MCPs<\/th><th>Skills<\/th><th>Result<\/th><th>Tokens<\/th><th>Duration<\/th><th>Cost<\/th><\/tr><\/thead><tbody><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>149,275<\/td><td>17m<\/td><td>~$1.92<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>96,859<\/td><td>17m<\/td><td>~$1.24<\/td><\/tr><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>120,262<\/td><td>17m<\/td><td>~$1.55<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>on<\/td><td>\u2717 timeout<\/td><td>\u2014<\/td><td>19m (900s agent time limit)<\/td><td>~$0<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>46,000<\/td><td>7m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>96,600<\/td><td>9m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>117,800<\/td><td>9m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>79,400<\/td><td>9m<\/td><td>$0.00<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">React has the most counterintuitive result in the dataset: the paid model failed here and the free model went 4\/4. Sonnet&#8217;s failure was not a knowledge gap: logs showed the agent read skill files correctly and scaffolded the right components. The problem was scope exploration without live MCP feedback to anchor decisions. React has more decision paths than Angular or Blazor, and Sonnet kept weighing alternatives until the 900-second budget ran out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">big-pickle completed all four React configurations cleanly, finishing the no-context run in 7 minutes at 46,000 tokens. Whether it made better decisions or just committed to the first reasonable path faster, we can&#8217;t say from the data alone. All four runs produced working output well within budget.<\/p>\n\n\n\n<div style=\"border-left:4px solid #4a90e2; background:#f5f8ff; padding:14px 16px; margin:18px 0; border-radius:6px;\">\n  <strong style=\"display:block; margin-bottom:6px;\">Note on Sonnet&#8217;s React failure:<\/strong> The specific combination that caused the timeout was skills-on + no MCPs. The MCP server provides live validation that anchors component choices and prevents the agent from exploring alternatives. Sonnet passed React in every configuration that included MCP context. If you are using Sonnet for React, treat the Ignite UI MCP server as required, not optional.<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verdict for React:<\/strong> big-pickle with either MCP or skill context is reliable and free. Sonnet requires the Ignite UI MCP server to stay on budget.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/react-with-ai-tooling.jpg\" alt=\"React \u2014 with Ignite UI MCP. big-pickle (left) produces a clean two-page authentication UI with social login buttons, validation helper text, and a comprehensive registration form. Sonnet (right) generates a richer landing page with marketing copy alongside the form. Both are valid interpretations of the prompt \u2014 the free model simply takes a more minimal, form-focused approach.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\">React \u2014 with Ignite UI MCP. big-pickle (left) produces a clean two-page authentication UI with social login buttons, validation helper text, and a comprehensive registration form. Sonnet (right) generates a richer landing page with marketing copy alongside the form. Both are valid interpretations of the prompt \u2014 the free model simply takes a more minimal, form-focused approach.<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/react-without-ai-tooling.jpg\" alt=\"React \u2014 without Ignite UI MCP Servers and Skills. Both models still pass without context tooling. big-pickle (left) produces a straightforward login and register flow with Google and GitHub social login. Sonnet (right) goes further \u2014 adding account type selection, LinkedIn login, and a more detailed registration form. The free model commits to a simpler path; the paid model explores more options, which is also what caused its timeout in the skills-on, no-MCP configuration.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>React \u2014 without Ignite UI MCP Servers and Skills. Both models still pass without context tooling. big-pickle (left) produces a straightforward login and register flow with Google and GitHub social login. Sonnet (right) goes further \u2014 adding account type selection, LinkedIn login, and a more detailed registration form. The free model commits to a simpler path; the paid model explores more options, which is also what caused its timeout in the skills-on, no-MCP configuration.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Web Components \u2014 free model works, but only with MCP enabled<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Model<\/th><th>MCPs<\/th><th>Skills<\/th><th>Result<\/th><th>Tokens<\/th><th>Duration<\/th><th>Cost<\/th><\/tr><\/thead><tbody><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>120,331<\/td><td>16m<\/td><td>~$1.55<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>88,442<\/td><td>20m<\/td><td>~$1.14<\/td><\/tr><tr><td>Sonnet<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>110,238<\/td><td>17m<\/td><td>~$1.42<\/td><\/tr><tr><td>Sonnet<\/td><td>none<\/td><td>on<\/td><td>\u2713 pass<\/td><td>72,539<\/td><td>18m<\/td><td>~$0.93<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>off<\/td><td>\u2713 pass<\/td><td>65,300<\/td><td>12m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>on<\/td><td>\u2713 pass<\/td><td>184,600<\/td><td>12m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>igniteui+theming<\/td><td>off<\/td><td>\u2713 pass<\/td><td>76,800<\/td><td>11m<\/td><td>$0.00<\/td><\/tr><tr><td>big-pickle<\/td><td>none<\/td><td>on<\/td><td>\u2717 error<\/td><td>\u2014 (0)<\/td><td>21m<\/td><td>$0.00<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Web Components is the one framework where context tooling isn&#8217;t optional for the free model. big-pickle&#8217;s one failure was a silent hang: 0 tokens in 21 minutes, no output, no error. The configuration was skills-on with no MCP. The likely cause is specific: Web Components relies heavily on icon names from <code>@igniteui\/material-icons-extended<\/code>, and the skill file doesn&#8217;t enumerate the full icon catalogue. Without an MCP server to look up valid names on demand, the agent hit an unanswerable lookup early and stalled.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Why the MCP server is required for Web Components:<\/strong><\/p>\n\n\n<p>Skills injected, but no MCPs<\/p>\n\n\n<pre class=\"wp-block-preformatted\">\u25b6 Context\n  \u2713 Component hints injected\n  \u2717 Icon list unavailable\n\n\u25b6 Dependency\n  @igniteui\/material-icons-extended\n  \u2514\u2500 Exact icon names required\n\n\u25b6 Failure\n  No MCP available to resolve icon names.\n\n\u25b6 Outcome\n  \u2717 Agent stalls\n  \u2717 0 tokens generated\n  \u2717 21 minutes wasted\n  \u2717 No output<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enable the Ignite UI MCP server and the picture changes: both big-pickle Web Components runs with MCP enabled passed. The MCP server resolved icon names on demand and kept the agent moving. The failure wasn&#8217;t a model capability problem. It was a missing tool problem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sonnet goes 4\/4 because it can navigate this gap without live tooling, falling back on broader training knowledge to make reasonable icon choices. That&#8217;s a real capability advantage, but it doesn&#8217;t mean the free model can&#8217;t handle Web Components. It means you need to give it the Ignite UI MCP server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verdict for Web Components:<\/strong> Enable the Ignite UI MCP server when using big-pickle \u2014 this is the one configuration where it&#8217;s genuinely required. With MCP on, big-pickle passed 2\/2. Sonnet is more forgiving if you&#8217;d rather not manage that dependency.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/webcomponents-with-ai-tooling.jpg\" alt=\"Web Components \u2014 with Ignite UI MCP Servers and Skills. With MCP enabled, big-pickle (left) produces a complete login and sign-up flow with proper icon usage, social login buttons, toggles, and a multi-field registration form. Sonnet (right) produces a similarly structured result with slightly more form depth. The quality gap is minimal \u2014 the MCP server is what gets big-pickle to this level.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>Web Components \u2014 with Ignite UI MCP Servers and Skills. With MCP enabled, big-pickle (left) produces a complete login and sign-up flow with proper icon usage, social login buttons, toggles, and a multi-field registration form. Sonnet (right) produces a similarly structured result with slightly more form depth. The quality gap is minimal \u2014 the MCP server is what gets big-pickle to this level.<\/em><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/06\/webcomponents-without-ai-tooling.jpg\" alt=\"Web Components \u2014 without Ignite UI MCP Servers and Skills. big-pickle (left) produces a login page and a sign-up form that work, but without the icon catalogue the agent avoids icon-dependent components entirely. Sonnet (right) navigates the gap using training knowledge, producing a more complete result including a 2FA section and notification preferences.\"\/><figcaption class=\"wp-element-caption\" style=\"text-align:center; font-size:14px;\"><em>Web Components \u2014 without Ignite UI MCP Servers and Skills. big-pickle (left) produces a login page and a sign-up form that work, but without the icon catalogue the agent avoids icon-dependent components entirely. Sonnet (right) navigates the gap using training knowledge, producing a more complete result including a 2FA section and notification preferences.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"what-the-numbers-tell-us-about-context-tooling\">What the numbers tell us about context tooling<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Skills alone handle most frameworks well<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For Angular, Blazor, and React, the skill file alone consistently produced the lowest token counts and fastest completion times for both models. big-pickle&#8217;s best Angular run (32,800 tokens, 8 minutes) and best Blazor run (55,100 tokens, 4 minutes) both used skills only. Skill files add context upfront without the back-and-forth of live MCP queries. For these frameworks, that&#8217;s enough.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">MCP servers are required when the skill file has gaps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Web Components exposed the limit of skill files: they orient the agent on usage patterns but don&#8217;t enumerate every valid icon name. The Ignite UI MCP server fills that gap with on-demand lookup of valid identifiers from <code>@igniteui\/material-icons-extended<\/code>. For big-pickle, having MCP available was the difference between passing and a silent 21-minute hang. MCP runs do use more tokens. For Sonnet that adds cost; for a free model it doesn&#8217;t matter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Context tooling helps both models, not just free ones<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Skill files and MCP servers aren&#8217;t a special fix for weaker models. Sonnet&#8217;s token count dropped sharply with context too: from 211,992 tokens (no context, Blazor) to 77,226 (skills on, no MCPs, Blazor). The free model benefits more visibly because it has less fallback knowledge, but the efficiency gains apply to both. Good tooling makes the paid model cheaper and the free model viable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"failure-modes-different-problems-same-solution\">Failure modes: different problems, same solution<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Both models failed once. Each failure traces back to missing context \u2014 and in each case, enabling the right Ignite UI tooling would have prevented it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sonnet \u2014 scope creep timeout (React)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2713 Partial output produced \u2014 the agent scaffolded components before timing out<\/li>\n\n\n\n<li>\u2713 Cause is diagnosable \u2014 logs show what the agent was doing<\/li>\n\n\n\n<li>\u2713 Clear mitigation \u2014 Ignite UI MCP server for React anchors component choices and prevents path exploration<\/li>\n\n\n\n<li>\u2717 900s agent time limit consumed \u2014 wall time including scaffold and overhead was 19m<\/li>\n\n\n\n<li>\u2717 Cost uncertainty \u2014 partial runs may still incur token cost<\/li>\n\n\n\n<li>\u00b7 Root cause: React has many decision paths; without live MCP validation the agent explored rather than committed<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>big-pickle \u2014 silent hang (Web Components)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2713 Zero cost on failure \u2014 0 tokens means 0 billing at any tier<\/li>\n\n\n\n<li>\u2713 Isolated to one config \u2014 WC + skills-only + no MCP<\/li>\n\n\n\n<li>\u2713 Clear mitigation \u2014 always use MCP with WC on big-pickle<\/li>\n\n\n\n<li>\u2717 0 output produced \u2014 no partial work to build on<\/li>\n\n\n\n<li>\u2717 21 minutes wasted \u2014 no early failure signal<\/li>\n\n\n\n<li>\u00b7 Failure pattern: unanswerable lookup (icon names) caused the agent to stall silently<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both failures trace to the same gap: the agent hit a lookup it couldn&#8217;t resolve without live Ignite UI context. If a run produces 0 tokens after 5 minutes, cancel and retry with MCP enabled. Still running at 15 minutes without a working build? Something is wrong with the configuration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a-note-on-what-pass-actually-means\">A note on what &#8220;pass&#8221; actually means<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A passing run produced a working, launchable app with correct Ignite UI imports, valid attribute names, and the right component set on both pages \u2014 no plain HTML controls, no hallucinated API names. Skill files and MCP servers exist specifically to prevent the latter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-cost-youre-not-feeling-yet\">The cost you&#8217;re not feeling yet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Right now, ~$1.44 per run reads like a rounding error. That&#8217;s the trap. Two curves are bending at once, and both point the same way.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Per-task token consumption is climbing faster than per-token price is falling.<\/strong> Frontier model prices have broadly trended down over the last two years. Total spend hasn&#8217;t followed, because agentic workflows consume far more tokens per task: longer autonomous runs, larger context windows, retries, and live documentation lookups. In this benchmark, enabling the MCP server pushed a single big-pickle Web Components run to 184,600 tokens \u2014 roughly 3x its leanest passing run (65,300). Now multiply rising per-task volume across every developer and every run on a team. The bill compounds in the direction you&#8217;re not watching.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The MCP overhead that&#8217;s free on a free model is exactly what inflates a paid bill.<\/strong> This is the sharp edge of our own data: <em>&#8220;MCP runs do use more tokens. For Sonnet that adds cost; for a free model it doesn&#8217;t matter.&#8221;<\/em> Web Components already shows that context tooling isn&#8217;t optional \u2014 it&#8217;s required for reliability. As that becomes true across more of the stack, the asymmetry widens: the more context you inject to make agents dependable, the more a per-token model charges you for reliability a free model gives away.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Meanwhile, the free side is improving, not standing still.<\/strong> <em>(This part is outlook, not measurement \u2014 read it as a bet, not a result.)<\/em> A stealth free model already matched a frontier paid model at 94% here. Its single failure was a missing tool, not a missing capability \u2014 the kind of gap that closes with better tooling today and better base models tomorrow. Free-tier and open models have been narrowing the frontier gap quarter over quarter, and nothing in this data suggests that reverses. The defensible read is that the paid premium buys less each cycle, not more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Put the three together and the move is clear: <strong>the durable investment is the <a href=\"https:\/\/www.infragistics.com\/ai-assisted-app-development\" data-type=\"link\" data-id=\"https:\/\/www.infragistics.com\/ai-assisted-app-development\">tooling layer<\/a>, not the model.<\/strong> MCP servers and skill files are model-agnostic. They let you ride the free-model curve as it improves, hold token cost at zero where it counts, and avoid locking spend into a paid model whose total bill compounds as agent usage scales. The model you pick today may be obsolete in a year. The context layer you build around it won&#8217;t be.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The honest answer to &#8220;can a free model generate production-quality Ignite UI code?&#8221; is: <strong>yes \u2014 if you give it the right context.<\/strong> big-pickle&#8217;s 94% success rate didn&#8217;t happen in spite of its limitations. It happened because Ignite UI MCP servers and skill files covered exactly the gaps that would otherwise cause failures: wrong attribute names, missing icon identifiers, framework-specific patterns the model hasn&#8217;t seen enough of.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For Angular, Blazor, and React, the skill file alone is enough to match a paid model \u2014 faster and for free. For Web Components, add the MCP server and you get the same result. The paid model is more forgiving when tooling is missing, but with tooling in place that rarely matters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And the direction of travel favors the free side. Per-task token consumption is rising while free models keep closing the capability gap \u2014 so the question shifts from &#8220;can a free model keep up today?&#8221; to &#8220;why would you pay a compounding token bill for a gap that&#8217;s shrinking?&#8221; Build the tooling layer once; it&#8217;s the part that holds its value while the models underneath it churn.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A 32-test benchmark pitting a paid AI model (claude-sonnet-4-6) against a free one (big-pickle) on the same Ignite UI authentication build across Angular, Blazor, React, and Web Components. Both tied at 94% &#8211; the free model got there because Ignite UI MCP servers and Agent Skills supplied the exact component APIs and icon names it lacked. Web Components is the one case where the MCP server is required, not optional.<\/p>\n","protected":false},"author":149,"featured_media":3992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8,9,10],"tags":[80,90,84,125,23,26,128,129,20,126,127,83,25,19],"class_list":["post-3952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-blazor","category-react","category-web-components","tag-agent-skills","tag-agent-skills-2","tag-ai","tag-ai-code-generation","tag-angular","tag-blazor","tag-claude-sonnet","tag-free-ai-models","tag-ignite-ui","tag-ignite-ui-mcp-server","tag-llm-benchmark","tag-mcp","tag-react","tag-web-components"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/149"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3952"}],"version-history":[{"count":22,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3952\/revisions"}],"predecessor-version":[{"id":3990,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3952\/revisions\/3990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3992"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}