Skip to content

Commit 071d310

Browse files
mythzmythz
committed
Add new blog posts
1 parent e14c0af commit 071d310

File tree

7 files changed

+367
-0
lines changed

7 files changed

+367
-0
lines changed

MyApp/_posts/2025-02-04_text-to-blazor.md renamed to MyApp/_posts/2025-02-11_text-to-blazor.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,15 @@ npm run rerun:last
114114

115115
Alternatively you can nuke the App's database (e.g. `App_Data/app.db`) and recreate it from scratch with `npm run migrate`.
116116

117+
## Instant CRUD UI
118+
119+
After running the DB migrations, you can hit the ground running and start using the Admin UI to manage the new
120+
Data Model RDBMS Tables:
121+
122+
<video autoplay="autoplay" loop="loop" controls>
123+
<source src="https://media.servicestack.com/videos/autoquerygrid-new.mp4" type="video/mp4">
124+
</video>
125+
117126
## TypeScript Schema
118127

119128
In addition to being a great DSL for defining Data Models, using TypeScript also lets us define a schema
@@ -439,6 +448,30 @@ public class Todo
439448
}
440449
```
441450

451+
## Audited Data Models
452+
453+
Another productivity feature of AutoQuery CRUD is its effortless support for maintaining audit history of
454+
important tables which can be enabled by inheriting from the `AuditBase` base class, e.g:
455+
456+
```ts
457+
export class Booking extends AuditBase {
458+
...
459+
}
460+
```
461+
462+
Which will include the necessary `CreatedBy`, `CreatedDate`, `ModifiedBy`, `ModifiedDate`, `DeletedBy` and `DeletedDate`
463+
properties in the Booking Table and also generating the necessary [Audit Behaviors](https://docs.servicestack.net/autoquery/crud#apply-generic-crud-behaviors)
464+
on the AutoQuery APIs to maintain the audit history for each CRUD operation.
465+
466+
### AutoQuery CRUD Audit Log
467+
468+
As the **blazor-admin** and **blazor-vue** templates are configured to use the [AutoQuery CRUD Executable Audit Log](https://docs.servicestack.net/autoquery/audit-log)
469+
[Configure.AutoQuery.cs](https://github.com/NetCoreTemplates/blazor-admin/blob/main/MyApp/Configure.AutoQuery.cs)
470+
the Audit Behaviors will also maintain an Audit Trail of all CRUD operations which can be
471+
[viewed in Locode](https://docs.servicestack.net/locode/auditing).
472+
473+
[![](http://docs.servicestack.net/img/pages/locode/audit-history-update.png)](https://docs.servicestack.net/locode/auditing)
474+
442475
### Custom APIs
443476

444477
When you need more fine-grained control over the generated APIs, you can "takeover" the generation of

‎MyApp/_posts/2025-02-12_okai-models.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: New okai tool for Rapid App Development
3+
summary: Explore the new okai tool and workflow for rapidly developing Blazor Vue Crud Apps with AI and TypeScript Data Models
4+
tags: [okai,ai,autoquery,blazor,vue]
5+
author: Demis Bellot
6+
image: https://images.unsplash.com/photo-1613206485381-b028e578e791?crop=entropy&fit=crop&h=1000&w=2000
7+
---
8+
9+
## AI powered Rapid App Development Workflow
10+
11+
The new `okai` npm tool works similar to the online [Text to Blazor App](/posts/text-to-blazor) generator
12+
except it's a local tool that can add additional functionality to an existing project:
13+
14+
<ascii-cinema src="/img/posts/okai-models/okai-prompt-jobs.cast"
15+
loop="true" poster="npt:00:20" theme="dracula" rows="24" />
16+
17+
The syntax for adding a new feature to your Web App is `npx okai <prompt>`, e.g:
18+
19+
:::sh
20+
npx okai "The type of App you would like to create"
21+
:::
22+
23+
Where it will generate the Data Models, AutoQuery CRUD APIs, DB Migrations and Admin UI for the
24+
selected feature which you'll see after selecting the LLM Data Models you want to use, e.g:
25+
26+
```sh
27+
Selected 'deepseek-r1:70b' data models
28+
29+
Saved: /home/mythz/src/MyApp/MyApp.ServiceModel/Jobs.d.ts
30+
Saved: /home/mythz/src/MyApp/MyApp.ServiceModel/Jobs.cs
31+
Saved: /home/mythz/src/MyApp/wwwroot/admin/sections/Jobs.mjs
32+
Saved: /home/mythz/src/MyApp/wwwroot/admin/sections/index.mjs
33+
Saved: /home/mythz/src/MyApp/Migrations/Migration1001.cs
34+
35+
Run 'dotnet run --AppTasks=migrate' to apply new migration and create tables
36+
37+
To regenerate classes, update 'Jobs.d.ts' then run:
38+
$ okai Jobs.d.ts
39+
```
40+
41+
Where okai will generate everything needed to support the feature in your App, including:
42+
43+
- `MyApp.ServiceModel/Jobs.d.ts` - TypeScript Data Models
44+
- `MyApp.ServiceModel/Jobs.cs` - AutoQuery CRUD APIs and Data Models
45+
- `wwwroot/admin/sections/Jobs.mjs` - Admin UI Section
46+
- requires `blazor-admin` or `blazor-vue` template
47+
- `MyApp/Migrations/Migration1001.cs` - DB Migrations
48+
- requires project with [OrmLite DB Migrations](https://docs.servicestack.net/ormlite/db-migrations)
49+
50+
Then to apply the migration and create the tables you can run:
51+
52+
:::sh
53+
npm run migrate
54+
:::
55+
56+
## Declarative AI powered Features
57+
58+
The approach okai uses is very different from most AI tools which instead of using AI to generate an
59+
entire App or source code for a feature it's only used to generate the initial Data Models within
60+
a TypeScript Declaration file which we've found is best format supported by AI models that's also the
61+
best typed DSL for defining data models with minimal syntax that's easy for humans to read and write.
62+
63+
This is possible for ServiceStack Apps since a significant portion of an App's functionality can be
64+
[declaratively applied](https://docs.servicestack.net/locode/declarative) including all
65+
[AutoQuery CRUD APIs](https://docs.servicestack.net/autoquery/crud) which can be implemented just
66+
using typed Request DTOs to define the shape of the API AutoQuery should implement.
67+
68+
From the Data Models, the rest of the feature is generated using declarative code-first APIs depending
69+
on the template used.
70+
71+
### Generated Admin UI
72+
73+
To have okai generate an Admin UI you'll need to use it within a new Blazor Admin project or
74+
Blazor Vue ([blazor-vue](https://blazor-vue.web-templates.io)) project:
75+
76+
:::sh
77+
x new blazor-admin Acme
78+
:::
79+
80+
Which both support a "Modular no-touch" Admin UI which will appear under a new group in the Admin Sidebar:
81+
82+
![](/img/posts/text-to-blazor/okai-blazor-admin.webp)
83+
84+
## Customize Data Models
85+
86+
The data models defined in the TypeScript Declaration file e.g. `Jobs.d.ts` is what drives the
87+
generation of the Data Models, APIs, DB Migrations and Admin UIs.
88+
89+
This can be further customized by editing the TypeScript Declaration file and re-running the `okai` tool
90+
with the name of the TypeScript Declaration file, e.g. `Jobs.d.ts`:
91+
92+
:::sh
93+
npx okai Jobs.d.ts
94+
:::
95+
96+
Which will re-generate the Data Models, APIs, DB Migrations and Admin UIs based on the updated Data Models.
97+
98+
![](/img/posts/text-to-blazor/okai-Employees.webp)
99+
100+
:::tip
101+
You only need to specify the `Jobs.d.ts` TypeScript filename (i.e. not the filepath) from
102+
anywhere within your .NET solution
103+
:::
104+
105+
### Live Code Generation
106+
107+
If you'd prefer to see the generated code in real-time you can add the `--watch` flag to watch the
108+
TypeScript Declaration file for changes and automatically re-generate the generated files on Save:
109+
110+
:::sh
111+
npx okai Jobs.d.ts --watch
112+
:::
113+
114+
<video autoplay="autoplay" loop="loop" controls>
115+
<source src="https://media.servicestack.com/videos/okai-watch.mp4" type="video/mp4">
116+
</video>

‎MyApp/_posts/2025-02-18_okai-chat.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: FREE Access to the worlds most popular AI Models
3+
summary: No API Keys, no Signups, just free access to the worlds most popular AI Large Language Models
4+
tags: [okai,ai,gpt]
5+
author: Demis Bellot
6+
image: https://images.unsplash.com/photo-1629131530695-30684ecb2366?crop=entropy&fit=crop&h=1000&w=2000
7+
---
8+
9+
As part of the development of [okai](/posts/okai-models) for generating [Blazor CRUD Apps from a text prompt](/posts/text-to-blazor)
10+
using your preferred AI Models, we've also made available a generic **chat** prompt that can be used as a
11+
convenient way to conduct personal research against many of the worlds most popular Large Language Models - for Free!
12+
13+
No API Keys, no Signups, no installs, no cost, you can just start immediately using the `npx okai chat` script to ask LLMs
14+
for assistance:
15+
16+
:::sh
17+
npx okai chat "command to copy a folder with rsync?"
18+
:::
19+
20+
This will use the default model (currently codestral:22b) to answer your question.
21+
22+
### Select Preferred Model
23+
24+
You can also use your preferred model with the `-m <model>` flag with either the model **name** or its **alias**, e.g you can use
25+
[Microsoft's PHI-4 14B](https://techcommunity.microsoft.com/blog/aiplatformblog/introducing-phi-4-microsoft%E2%80%99s-newest-small-language-model-specializing-in-comple/4357090)
26+
model with:
27+
28+
:::sh
29+
npx okai -m phi-4 chat "command to copy folder with rsync?"
30+
:::
31+
32+
### List Available Models
33+
34+
We're actively adding more great performing and leading experimental models as they're released.
35+
You can view the list of available models with `ls models`:
36+
37+
:::sh
38+
npx okai ls models
39+
:::
40+
41+
Which at this time will return the following list of available models along with instructions for how to use them:
42+
43+
```txt
44+
USAGE (5 models max):
45+
a) OKAI_MODELS=codestral,llama3.3,flash
46+
b) okai -models codestral,llama3.3,flash <prompt>
47+
c) okai -m flash chat <prompt>
48+
49+
FREE MODELS:
50+
claude-3-haiku (alias hakiu)
51+
codestral:22b (alias codestral)
52+
deepseek-r1:70b
53+
deepseek-v3:671b (alias deepseek)
54+
gemini-flash-1.5
55+
gemini-flash-1.5-8b (alias flash-8b)
56+
gemini-flash-2.0 (alias flash)
57+
gemini-flash-thinking-2.0 (alias flash-thinking)
58+
gemma2:9b (alias gemma)
59+
gpt-3.5-turbo (alias gpt-3.5)
60+
gpt-4o-mini
61+
llama3.1:70b (alias llama3.1)
62+
llama3.3:70b (alias llama3.3)
63+
llama3:8b (alias llama3)
64+
mistral-nemo:12b (alias mistral-nemo)
65+
mistral-small:24b (alias mistral-small)
66+
mistral:7b (alias mistral)
67+
mixtral:8x22b
68+
mixtral:8x7b (alias mixtral)
69+
nova-lite
70+
nova-micro
71+
phi-4:14b (alias phi,phi-4)
72+
qwen-plus
73+
qwen-turbo
74+
qwen2.5-coder:32b (alias qwen2.5-coder)
75+
qwen2.5:72b (alias qwen2.5)
76+
qwq:32b (alias qwq)
77+
qwq:72b
78+
79+
PREMIUM MODELS: *
80+
claude-3-5-haiku
81+
claude-3-5-sonnet
82+
claude-3-sonnet
83+
deepseek-r1:671b (alias deepseek-r1)
84+
gemini-pro-1.5 (alias gemini-pro)
85+
gpt-4
86+
gpt-4-turbo
87+
gpt-4o
88+
mistral-large:123b
89+
nova-pro
90+
o1-mini
91+
o1-preview
92+
o3-mini
93+
qwen-max
94+
95+
* requires valid license:
96+
a) SERVICESTACK_LICENSE=<key>
97+
b) SERVICESTACK_CERTIFICATE=<LC-XXX>
98+
c) okai -models <premium,models> -license <license> <prompt>
99+
```
100+
101+
Where you'll be able to use any of the great performing inexpensive models listed under `FREE MODELS` for Free.
102+
Whilst ServiceStack customers with an active commercial license can also use any of the more expensive
103+
and better performing models listed under `PREMIUM MODELS` by either:
104+
105+
a) Setting the `SERVICESTACK_LICENSE` Environment Variable with your License Key
106+
b) Setting the `SERVICESTACK_CERTIFICATE` Variable with your License Certificate
107+
c) Inline using the `-license` flag with either the License Key or Certificate
108+
109+
### FREE for Personal Research
110+
111+
To be able to maintain this as a free service we're limiting usage as a tool that developers can use for personal
112+
assistance and research by limiting usage to **60 requests /hour** which should be more than enough for most
113+
personal usage whilst deterring usage in automated tools.
114+
115+
Rate limiting is implemented by adopting a sliding [Token Bucket algorithm](https://en.wikipedia.org/wiki/Token_bucket)
116+
that will replenish 1 additional request every 60 seconds.

‎MyApp/_posts/2025-02-19_crud-app-from-existing-db.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: Generate CRUD APIs and Admin UIs from existing DB
3+
summary: Use the metadata from an existing RDBMS to generate AutoQuery CRUD APIs and Admin UIs for managing your data.
4+
tags: [okai,db,autoquery,api,admin-ui]
5+
author: Demis Bellot
6+
image: https://images.unsplash.com/photo-1484662020986-75935d2ebc66?crop=entropy&fit=crop&h=1000&w=2000
7+
---
8+
9+
A core piece of functionality in the [Text to Blazor CRUD App](/posts/text-to-blazor) feature is distilling an AI Prompt
10+
into TypeScript classes that can be [further customized](https://localhost:5002/posts/text-to-blazor#customize-data-models)
11+
to generate AutoQuery CRUD APIs and Admin UIs for managing the underlying RDBMS tables.
12+
13+
## TypeScript Data Models
14+
15+
Using TypeScript to define models is a flexible and effortless way to define your data models as it offers a DSL-like
16+
format with minimal boilerplate that's human-friendly to read and write that can also leverage TypeScript's
17+
powerful TypeScript Type System to provide a rich authoring experience with strong typing and intellisense
18+
that's validated against the referenced [api.d.ts](https://okai.servicestack.com/api.d.ts) schema
19+
containing all the C# Types, interfaces, and attributes used in defining APIs, DTOs and Data Models.
20+
21+
### Blueprint for Code Generation
22+
23+
The TypeScript Data Models then serve as the blueprint for generating everything needed to support the feature
24+
in your App, including the AutoQuery CRUD APIs, Admin UIs and DB Migrations should you prefer to re-create it from scratch.
25+
26+
### RDBMS Metadata AppTask
27+
28+
The first step in generating TypeScript Data Models is to capture the metadata from the existing RDBMS tables which
29+
we can do with the `App.json` [AppTask](https://docs.servicestack.net/app-tasks) below which uses your App's configured
30+
RDBMS connection to generate the Table Definitions for all tables in the specified RDBMS connection and schema
31+
to the file of your choice (e.g `App_Data/App.json`):
32+
33+
```csharp
34+
AppTasks.Register("App.json", args =>
35+
appHost.VirtualFiles.WriteFile("App_Data/App.json",ClientConfig.ToSystemJson(
36+
migrator.DbFactory.GetTables(namedConnection:null, schema:null))));
37+
```
38+
39+
This task can then be run from the command line with:
40+
41+
:::sh
42+
dotnet run --AppTasks=App.json
43+
:::
44+
45+
Which will generate the `App_Data/App.json` file containing the metadata for all tables in the RDBMS.
46+
47+
### Different Connection or DB Schema
48+
49+
If you prefer to generate the metadata for a different connection or schema, you can create a new AppTask
50+
with your preferred `namedConnection` and/or `schema`, e.g:
51+
52+
```csharp
53+
AppTasks.Register("Sales.json", args =>
54+
appHost.VirtualFiles.WriteFile("Sales.json", ClientConfig.ToSystemJson(
55+
migrator.DbFactory.GetTables(namedConnection:"reports",schema:"sales"))));
56+
```
57+
58+
### Generate TypeScript Data Models
59+
60+
The next step is to generate TypeScript Data Models from the captured metadata which can be done with the `okai` tool
61+
by running the `convert` command with the path to the `App.json` JSON table definitions which will generate the
62+
TypeScript Data Models to stdout which can be redirected to a file in your **ServiceModel** project, e.g:
63+
64+
:::sh
65+
npx okai convert App_Data/App.json > ../MyApp.ServiceModel/App.d.ts
66+
:::
67+
68+
## Generate CRUD APIs and Admin UIs
69+
70+
The data models defined in the `App.d.ts` TypeScript Declaration file is what drives the
71+
generation of the Data Models, APIs, DB Migrations and Admin UIs.
72+
73+
### Customize Data Models
74+
75+
This can be further customized by editing the TypeScript Declaration file and re-running the `okai` tool
76+
with just the filename, e.g:
77+
78+
:::sh
79+
npx okai App.d.ts
80+
:::
81+
82+
Which will re-generate the Data Models, APIs, DB Migrations and Admin UIs based on the updated Data Models.
83+
84+
![](/img/posts/okai-models/npx-okai-App.png)
85+
86+
:::tip
87+
You only need to specify the `App.d.ts` TypeScript filename (i.e. not the filepath) from
88+
anywhere within your .NET solution
89+
:::
90+
91+
### Live Code Generation
92+
93+
If you'd prefer to see the generated code in real-time you can add the `--watch` flag to watch the
94+
TypeScript Declaration file for changes and automatically re-generate the generated files on Save:
95+
96+
:::sh
97+
npx okai App.d.ts --watch
98+
:::
99+
100+
<video autoplay="autoplay" loop="loop" controls>
101+
<source src="https://media.servicestack.com/videos/okai-watch.mp4" type="video/mp4">
102+
</video>

‎MyApp/wwwroot/img/posts/okai-models/npx-okai-App.png‎

237 KB
Loading

MyApp/wwwroot/img/posts/okai/okai-prompt-jobs.cast renamed to MyApp/wwwroot/img/posts/okai-models/okai-prompt-jobs.cast

File renamed without changes.

MyApp/wwwroot/posts/okai.mjs renamed to MyApp/wwwroot/posts/okai-models.mjs

File renamed without changes.

0 commit comments

Comments
 (0)