Update v8.10 Release Notes

Author: mythz

MyApp/_pages/releases/v8_10.md

@@ -49,7 +49,7 @@ The static analysis feedback also directs models to identify and correct any err
 
 ### Zero-Ambiguity Integration
 
-AI models thrive on consistency. ServiceStack eliminates guesswork with a single pattern for all API calls:
+AI models thrive on consistency. ServiceStack removes guesswork with a single pattern for all API calls:
 - One generic `JsonServiceClient` for all APIs
 - Consistent methods used to send all requests
 - Consistent Typed Request DTO → Response DTO flow
@@ -74,6 +74,7 @@ These components are ideal for rapidly building backend management interfaces, f
 
 We're introducing three production-ready React templates, each optimized for different use cases:
 
+
 <react-template 
   name="react-vite" 
   description="A lightweight foundation built with React + Vite + TypeScript + Tailwind CSS—the ideal blank slate starting point for AI-generated UIs."></react-template>
@@ -89,7 +90,7 @@ We're introducing three production-ready React templates, each optimized for dif
 
 ## Comprehensive React Component Library
 
-All three templates leverage our new [React Component Gallery](https://react.servicestack.net)—a high-fidelity port of our proven [Vue Component Library](/vue/) and [Blazor Component Library](https://blazor.servicestack.net). This comprehensive collection provides everything needed to build highly productive, modern and responsive web applications.
+All three templates leverage our new [React Component Gallery](https://react.servicestack.net)—a high-fidelity port of our proven [Vue Component Library](https://docs.servicestack.net/vue/) and [Blazor Component Library](https://blazor.servicestack.net). This comprehensive collection provides everything needed to build highly productive, modern and responsive web applications.
 
 <div class="not-prose">
     <a href="https://react.servicestack.net" class="block shadow-lg hover:shadow-xl">
@@ -107,6 +108,180 @@ Switch to Dark Mode to see how all components looks in Dark Mode:
 
 ServiceStack's first-class React support positions your applications at the forefront of AI-assisted development. With declarative APIs, complete type safety, and minimal boilerplate, you can leverage AI code generation with confidence while maintaining the quality and maintainability your production systems demand.
 
+## TypeScript Data Models
+
+As AI Models are not as adept at generating C# APIs or Migrations yet, they excel at generating TypeScript code, which our 
+[TypeScript Data Models](https://docs.servicestack.net/autoquery/okai-models) feature can take advantage of by generating all the C# AutoQuery CRUD APIs and DB Migrations needing to support it.
+
+With just a TypeScript Definition:
+
+- [Bookings.d.ts](https://github.com/NetCoreTemplates/react-vite/blob/main/MyApp.ServiceModel/Bookings.d.ts)
+
+We can generate all the AutoQuery CRUD APIs and DB Migrations needed to enable a CRUD UI with:
+
+:::copy
+npx okai Bookings.d.ts
+:::
+
+This is enough to generate a complete CRUD UI to manage Bookings 
+in your React App with the [React AutoQueryGrid Component](https://react.servicestack.net/gallery/autoquerygrid).
+or with ServiceStack's built-in [Locode UI](https://docs.servicestack.net/locode/):
+
+:::{.wideshot}
+[![](/img/pages/react/bookings-locode.webp)](https://docs.servicestack.net/locode/)
+:::
+
+### Cheat Sheet
+
+We'll quickly cover the common dev workflow for this feature. 
+
+To create a new Table use `init <Table>`, e.g:
+
+:::copy
+npx okai init Transaction
+:::
+
+This will generate an empty `MyApp.ServiceModel/<Table>.d.ts` file along with stub AutoQuery APIs and DB Migration implementations. 
+
+#### Regenerate AutoQuery APIs and DB Migrations
+
+After modifying the TypeScript Data Model to include the desired fields, you can re-run the `okai` tool to generate the AutoQuery APIs and DB Migrations 
+(which can be run anywhere within your Solution):
+
+:::copy
+npx okai Transaction.d.ts
+:::
+
+After you're happy with your Data Model you can run DB Migrations to run the DB Migration and create your RDBMS Table:
+
+:::copy
+npm run migrate
+:::
+
+#### Making changes after first migration
+
+If you want to make further changes to your Data Model, you can re-run the `okai` tool to update the AutoQuery APIs and DB Migrations, then run the `rerun:last` npm script to drop and re-run the last migration:
+
+:::copy
+npm run rerun:last
+:::
+
+#### Removing a Data Model and all generated code
+
+If you changed your mind and want to get rid of the RDBMS Table you can revert the last migration:
+
+:::copy
+npm run revert:last
+:::
+
+Which will drop the table and then you can get rid of the AutoQuery APIs, DB Migrations and TypeScript Data model with:
+
+:::copy
+npx okai rm Transaction.d.ts
+:::
+
+## AI-First Example
+
+There are a number of options for starting with an AI generated Application, with all the Instant AI App Generators like 
+[Google's App Studio](https://aistudio.google.com/apps) able to provide a great starting point. Although currently Professional Developers tend to use 
+[Cursor](https://cursor.com/), [Claude Code](https://www.claude.com/product/claude-code) or 
+[Codex](https://openai.com/codex/) as their day-to-day tools of choice. 
+
+### Use GitHub Copilot when creating a new Repository
+
+If you're using [GitHub Copilot](https://copilot.github.com/) you can also use it to generate a new App 
+[from the Vite React template ](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates):
+
+[![](/img/pages/react/react-new-repo.webp)](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates)
+
+For the example, I've started with a useful App that I've never created before, a Budget Planner App, using the prompt:
+
+### Budget Planner Prompt
+
+```
+- React 19, TypeScript, TailwindCSS v4
+- Persistence in IndexedDB/localStorage
+- Recharts
+- Vitest with React Testing Library
+
+## Features
+Dashboard
+- Overview of total income, expenses, and remaining budget
+- Monthly summary chart (line graph)
+- Expense categories (pie chart)
+
+Transactions
+- Add/Edit/Delete income or expenses
+- Date filtering/sorting
+
+Budgets
+- Set monthly budget goals per category
+- Progress bars for spending vs. budget
+
+Reports
+- View past months
+- Export
+```
+
+The generated source code for the App was uploaded to: [github.com/mythz/budgets.apps.cafe](https://github.com/mythz/budgets.apps.cafe)
+
+### Budgent Planner App
+
+After a few minutes Copilot creates a PR with what we asked for, even things that we didn't specify in the prompt but could be inferred from the Project Template like **Dark Mode** support where it made use of the existing `<DarkModeToggle />`.
+
+<screenshots-gallery :images="{
+  'Dashboard': '/img/pages/react/budget/dashboard.webp',
+  'Dashboard - Dark Mode': '/img/pages/react/budget/dashboard-dark.webp',
+  'Transactions List - Dark Mode': '/img/pages/react/budget/transactions-list-dark.webp',
+  'Transactions - Add Expense': '/img/pages/react/budget/transactions-expense.webp',
+  'Transactions - Add Expense - Dark Mode': '/img/pages/react/budget/transactions-expense-dark.webp',
+  'Transactions - Add Income - Dark Mode': '/img/pages/react/budget/transactions-income-dark.webp',
+  'Budgets - Dark Mode': '/img/pages/react/budget/budgets-dark.webp',
+  'Reports': '/img/pages/react/budget/reports.webp',
+  'Reports - Dark Mode': '/img/pages/react/budget/reports-dark.webp',
+}"></screenshots-gallery>
+
+### Prompt AI to add new Features
+
+AI Assistance doesn't end after the initial implementation as AI Models and tools are more than capable to
+create 100% of the React UI now, including new features, fixes and other improvements. For this example I used
+Claude Code to Implement Category Auto-Tagging with this prompt:
+
+    Implement Category Auto-Tagging
+
+    Allow specifying tags when creating a new transaction.
+    When users add a transaction, try to predict the tag from the Description, e.g:
+
+    Input: “Starbucks latte” → Suggests category: Food & Drinks
+    Input: “Uber to work” → Suggests category: Transport
+
+    Implementation:
+
+    Maintain a small local list of common keywords + categories.
+    Pre-fill category in the transaction form as the user types in the Description.
+
+Which resulted in [this commit](https://github.com/mythz/budgets.apps.cafe/commit/e45a17b8dfd2b5983971554ced3e52ded6fa050e) which sees the feature available in the UI:
+
+:::{.shadow}
+![](/img/pages/react/budget/expense-tags-dark.webp)
+:::
+
+Along with different seed data, tailored for Income and Expenses:
+ - [categoryAutoTag.ts](https://github.com/mythz/budgets.apps.cafe/blob/main/MyApp.Client/src/lib/categoryAutoTag.ts)
+ 
+And 19 passing tests to verify a working implementation:
+ 
+ - [categoryAutoTag.test.ts](https://github.com/mythz/budgets.apps.cafe/blob/main/MyApp.Client/src/lib/categoryAutoTag.test.ts)
+
+Combined with Vite's instant hot-reload, this creates a remarkably fluid development experience where
+we get to watch our prompts materialize into working features in real-time.
+
+All this to say that this new development model exists today, and given its significant productivity gains, it's 
+very likely to become the future of software development, especially for UIs. Since developers are no longer
+the primary authors of code, our UI choices swing from Developer preferences to UI technologies that AI models
+excel at.
+
+So whilst we have a preference for Vue given it's more readable syntax and progressive enhancement capabalities, and whilst .NET ecosystem has a strong bias towards Blazor, we're even more excited for the future of React and are committed to providing the best possible support for it.
 
 ## AI Chat upgraded to latest llms.py