https://github.com/typefox/coding.waterkant.2025
Project for Coding.Waterkant 2025
https://github.com/typefox/coding.waterkant.2025
Last synced: 5 months ago
JSON representation
Project for Coding.Waterkant 2025
- Host: GitHub
- URL: https://github.com/typefox/coding.waterkant.2025
- Owner: TypeFox
- License: mit
- Created: 2025-07-03T22:50:32.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-14T06:25:09.000Z (9 months ago)
- Last Synced: 2025-07-18T14:53:46.597Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 129 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Semiformal Web Apps
This is a project contributed by TypeFox to Coding.Waterkant 2025.
While this project demonstrates AI-powered web app generation, its primary purpose is to introduce the [Semiformal](https://www.typefox.io/blog/boost-your-ai-apps-with-dsls/) approach for bidirectional human-AI interactions.
The project consists of a **Langium grammar** defining the Semiformal Web Apps (SWA) language, a **VSCode extension** for editing SWA files, and a **CLI** that uses AI to generate web apps based on SWA specifications.
## Prerequisites
* Install Node LTS (v22.17.0)
-
Install n (Node version manager)
- Install Node LTS:
n lts
* Install [Cursor IDE](https://www.cursor.com/) (recommended) or [VSCode](https://code.visualstudio.com/) (no AI support for creating new examples)
* Install [Docker](https://www.docker.com/) for running the example web apps
* Install [Ollama](https://ollama.ai/) for using AI models locally
- Download and install Ollama from https://ollama.ai/
- Run Ollama.app and allow to expose it to the network
- Pull the Qwen3 14B model:
ollama pull qwen3:14b
## Installation
1. Install dependencies (once):
```sh
npm i
```
2. Build the projects (when language or generator changes):
```sh
npm run clean && npm run build
```
## Usage
1. Open the project in Cursor/VSCode:
```sh
code .
```
2. Press `F5` to open a new IDE instance with the language extension loaded. The workspace will be the `example-web-apps/` folder.
3. Create your own `.env` file by copying `.env.template` and filling in your values.
```yaml
# Only showing selected files
example-web-apps/
├─ models/
│ └─ *.swa # Semiformal Web App models
├─ output/
│ └─ */ # Generated web apps
├─ .env.template # AI generator config template
└─ .env # Your personal copy of .env.template used by the generator
```
From there you can:
* Edit existing web app model files `models/*.swa` that describe a web app's structure
* Generate a new web app based on a .swa model (when using Ollama, run `ollama serve` in a terminal):
```sh
# The app is generated in `output//`
npm run generate
```
To create new types of web apps:
* Manually create a new .swa file in the `models/` folder
or ask Cursor Chat/GitHub Copilot to create one as a starting point for [vibe coding](https://en.wikipedia.org/wiki/Vibe_coding) 😉
* Then follow the steps above to generate the web app
Hint: The AI instructions for vibe coding .swa files are stored in the `.cursor/rules/` and `.github/` folders.
```yaml
# Only showing selected files
example-web-apps/
├─ .cursor/rules/
│ └─ semiform-rules.mdc # Cursor instructions for creating .swa files
└─ .github/
└─ copilot-instructions.md # Copilot instructions for creating .swa files
```
## Modifying the language or generator
To modify the language or generator, edit the source code in the `packages/` folder.
```yaml
# Only showing selected files
packages/
├─ generator-ai/ # AI generator for web apps
│ └─ src/prompt-templates/
│ ├─ backend-prompt.md # Backend prompt template
│ └─ frontend-prompt.md # Frontend prompt template
└─ semiformal-web-apps/ # IDE language support powered by Langium
└─ src/language/
└─ semiformal-web-apps.langium # Langium grammar for .swa files
```
Remember to rebuild after changing the source code:
```sh
npm run clean && npm run build
```
Note: AI instructions and prompts may need to be updated to use the new language.
## What's next?
Read our [blog post](https://www.typefox.io/blog/boost-your-ai-apps-with-dsls/) about Semiformal applications.
The web app generator is just one type of Semiformal application. Let us brainstorm together—which other possibilities can you imagine...?
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.