synthos 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -29
- package/bin/synthos.js +2 -2
- package/default-pages/[application].html +94 -86
- package/default-pages/[markdown].html +270 -260
- package/default-pages/[sidebar].html +67 -42
- package/default-pages/[split-application].html +55 -70
- package/default-pages/json_tools.html +113 -130
- package/default-pages/solar_system.html +432 -0
- package/default-pages/space_invaders.html +617 -0
- package/default-scripts/windows-terminal.json +6 -6
- package/dist/service/createCompletePrompt.d.ts.map +1 -1
- package/dist/service/createCompletePrompt.js +6 -5
- package/dist/service/createCompletePrompt.js.map +1 -1
- package/package.json +1 -1
- package/required-pages/apis.html +361 -346
- package/required-pages/home.html +69 -26
- package/required-pages/pages.html +152 -134
- package/required-pages/scripts.html +349 -334
- package/required-pages/settings.html +184 -157
- package/src/service/createCompletePrompt.ts +6 -5
- package/src/settings.ts +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# SynthOS: An AI Powered Interactive Shell Experience
|
|
2
2
|
|
|
3
|
-
[SynthOS](https://github.com/Stevenic/synthos) is an interactive shell experience powered by generative AI, featuring a user interface that is entirely AI-generated. Similar to a wiki, it organizes everything into pages, but with a twist: these pages are self-modifying and can transform into anything. Each page includes a chat panel and a content viewer. Entering a command into the chat panel prompts the configured Large Language Model (LLM) to completely rewrite the current page. The page can morph into anything—from providing answers to questions to becoming a tool that assists you with complex tasks.
|
|
3
|
+
[SynthOS](https://github.com/Stevenic/synthos) is an interactive shell experience powered by generative AI, featuring a user interface that is entirely AI-generated. Similar to a wiki, it organizes everything into pages, but with a twist: these pages are self-modifying and can transform into anything. Each page includes a chat panel and a content viewer. Entering a command into the chat panel prompts the configured Large Language Model (LLM) to completely rewrite the current page. The page can morph into anything—from providing answers to questions to becoming a tool that assists you with complex tasks. It supports the latest language models like Claude-Opus-4.5 and GPT-5.2.
|
|
4
4
|
|
|
5
5
|
SynthOS has access to tools in the form of APIs and scripts. Built-in APIs enable SynthOS to read and write objects to local storage or make additional generative AI calls. Scripts are user-defined extensions that allow SynthOS to perform local actions on your machine. You can add scripts that let SynthOS start a build, make a Git commit, or run a cURL command.
|
|
6
6
|
|
|
7
|
+
You can create anything you want from animations:
|
|
8
|
+
|
|
9
|
+
<img width="1901" height="988" alt="image" src="https://github.com/user-attachments/assets/8da6dedd-e568-48d3-b2ac-106a8ab50117" />
|
|
10
|
+
|
|
11
|
+
To games:
|
|
12
|
+
|
|
13
|
+
<img width="1888" height="979" alt="image" src="https://github.com/user-attachments/assets/496b0be0-39f5-4bbf-9a40-2d6877f8a6cc" />
|
|
14
|
+
|
|
15
|
+
To developer tools:
|
|
16
|
+
|
|
17
|
+
<img width="1891" height="987" alt="image" src="https://github.com/user-attachments/assets/951053f0-f025-45d3-8799-7bcd33942b80" />
|
|
18
|
+
|
|
19
|
+
SynthOS is like a wiki for apps. You can save the apps you create to your pages directory;
|
|
20
|
+
|
|
21
|
+
<img width="1888" height="976" alt="image" src="https://github.com/user-attachments/assets/5c727cf5-30de-4d08-80ee-54eed7b64d20" />
|
|
22
|
+
|
|
7
23
|
## Installing SynthOS
|
|
8
24
|
|
|
9
|
-
To get started using SynthOS you'll need to first install a recent version of [Node.js](https://nodejs.org/en/download/package-manager/current). I use version `
|
|
25
|
+
To get started using SynthOS you'll need to first install a recent version of [Node.js](https://nodejs.org/en/download/package-manager/current). I use version `22.20.0` but any version >20 should work.
|
|
10
26
|
|
|
11
27
|
Open a terminal window and run the following commands:
|
|
12
28
|
|
|
@@ -17,55 +33,60 @@ synthos start
|
|
|
17
33
|
|
|
18
34
|
This will install the CLI and start the SynthOS server running. This terminal window needs to stay open to keep the server running. You should see a message saying `SynthOS's server is running on http://localhost:4242`. You can open your browser to that link and you should land on the `settings` page.
|
|
19
35
|
|
|
36
|
+
## Configuring Your Model
|
|
37
|
+
|
|
38
|
+
When the server first runs it's going to show you a settings dialog. You'll need to pick the model you;d like to use and configure it with a developer key.
|
|
39
|
+
|
|
40
|
+
<img width="1885" height="975" alt="image" src="https://github.com/user-attachments/assets/34c662c2-3ea5-421d-bad2-4c98d13c72f3" />
|
|
41
|
+
|
|
42
|
+
For Opus (recomended) you'll want to sign up for a developer account at [Anthropics Developer Platform](https://platform.claude.com/login) You can then generate an API key [here](https://platform.claude.com/settings/keys). For GPT-5.2 you can sign up for an [OpenAI Developer account](https://auth.openai.com/create-account) and then generate an API key [here](https://platform.openai.com/api-keys)
|
|
20
43
|
|
|
21
44
|
## Using SynthOS
|
|
22
45
|
|
|
23
|
-
|
|
46
|
+
Once you've configured your model you will be then sent to the home page. You can then specify any thing you want to create and it will be rendered to the display port.
|
|
47
|
+
|
|
48
|
+
<img width="1882" height="980" alt="image" src="https://github.com/user-attachments/assets/57cb01c7-f060-4dfc-8100-de85d850b104" />
|
|
49
|
+
|
|
50
|
+
You can make as many changes as you want to the app and you have controlls above the chat box that let you save the app to the pages gallery, reset the view port, or navigate to the pages gallery:
|
|
51
|
+
|
|
52
|
+
<img width="542" height="155" alt="image" src="https://github.com/user-attachments/assets/34acf4a0-4dde-4a0f-b766-e5aec46a6496" />
|
|
24
53
|
|
|
25
|
-
|
|
54
|
+
Each saved page is as stand alone HTML page that can be found in a `.synthos` folder in the directory where you started the server, There are system pages which can't be deleted but you can save changes to them and SynthOS will use those over the defaults. If you wish to delete a page/app just delete it from your `.synthos` folder:
|
|
26
55
|
|
|
27
|
-
|
|
56
|
+
<img width="825" height="589" alt="image" src="https://github.com/user-attachments/assets/2e7c8432-24d2-4f49-a608-3207bf1c1cda" />
|
|
28
57
|
|
|
29
|
-
|
|
58
|
+
## Application Templates
|
|
30
59
|
|
|
31
|
-
|
|
60
|
+
There are a set of pre-built application templates that give you a good starting point.
|
|
32
61
|
|
|
33
|
-
|
|
62
|
+
The `[application]` template is great for creating tools:
|
|
34
63
|
|
|
64
|
+
<img width="1891" height="984" alt="image" src="https://github.com/user-attachments/assets/6216c1fc-e1f8-4db8-86d3-d6041cbbf841" />
|
|
35
65
|
|
|
36
|
-
|
|
66
|
+
The `[markdown]` template has a rich built-in markdown viewer:
|
|
37
67
|
|
|
38
|
-
|
|
68
|
+
<img width="1887" height="979" alt="image" src="https://github.com/user-attachments/assets/99828cac-bb95-4de5-85c6-d164b37c8505" />
|
|
39
69
|
|
|
40
|
-
|
|
70
|
+
The `[sidebar]` template allows for rich content that's not markdown based:
|
|
41
71
|
|
|
42
|
-
|
|
43
|
-
- **Pages** - Navigates you to the `pages` page where you can see a listing of all the current pages. You can navigate to a different page from either the `pages` page or by setting the `/{page_name}` directly in your browsers address bar.
|
|
44
|
-
- **Reset** - Restores the current page back to its last save point. The modifications to a page are cached in the servers memory until their either saved using **Save** or the server is restarted. Clicking **Reset** lets you manually roll back changes and, trust me, you will be clicking this a lot.
|
|
72
|
+
<img width="1876" height="976" alt="image" src="https://github.com/user-attachments/assets/0a9ae38b-354f-4709-b92a-b466458aa3ba" />
|
|
45
73
|
|
|
46
|
-
|
|
74
|
+
The `[split-application]` template has two panes with a movable splitter:
|
|
47
75
|
|
|
48
|
-
|
|
76
|
+
<img width="1882" height="975" alt="image" src="https://github.com/user-attachments/assets/770b17c5-e9c3-44d4-8015-5cf401efba26" />
|
|
49
77
|
|
|
50
|
-
|
|
78
|
+
## API Explorer
|
|
51
79
|
|
|
80
|
+
One of the more powerful capabilities of SynthOS is that it has built in APIs for things like storage that you're apps can use to persist data. You can use the API Explorer to test the API's out:
|
|
52
81
|
|
|
53
|
-
|
|
82
|
+
<img width="1882" height="973" alt="image" src="https://github.com/user-attachments/assets/6a1e2823-7313-429c-9b28-79c5687fdef7" />
|
|
54
83
|
|
|
55
|
-
|
|
84
|
+
## Script Editor
|
|
56
85
|
|
|
57
|
-
|
|
58
|
-
Sometimes the LLM will decide to make a change that breaks the entire page. This is when it's useful to know how to manually reset the page to its last save point. From the address bar append a `/reset` to the current address. So `https://localhost:4242/home/reset` will restore the home page back to its starting state.
|
|
86
|
+
You can also create custom scripts that your apps can invoke vi a scripts API:
|
|
59
87
|
|
|
88
|
+
<img width="1889" height="982" alt="image" src="https://github.com/user-attachments/assets/8047d3c3-e5d3-4be8-b403-88169610b3b2" />
|
|
60
89
|
|
|
61
|
-
**Save Often**\
|
|
62
|
-
This goes along with the reset tip. Most things you create are going to take a bit of iteration. You're going to ask the LLM to make a change and it's not going to do exactly what you want or worse break the whole page. Anytime you get something you like save it. Saving is cheap and you can have as many drafts as you want. Just use a naming scheme like `my_app_v2`.
|
|
63
90
|
|
|
64
|
-
**Walk the LLM to a Design Step-by-Step**\
|
|
65
|
-
We're asking the LLM to re-generate an entire page on every request. That's asking a lot. You'll get your best results if you have the model focus on one change at a time (start with layout) and then step your way to a final design, saving anytime you get a result you like.
|
|
66
91
|
|
|
67
|
-
**Leverage the [templates]**\
|
|
68
|
-
Use the provided templates as a starting point for structure or better yet, build your own templates! I'm still figuring this out but it seems like you want to start with defining the pages layout first because the LLM will naturally want to make any changes within the confines of the current layout. Once you get your layout the way you want add in visual elements like input boxes and such. Then once you get everything visually the way you want you can add in behavior like calling API's or saving to storage.
|
|
69
92
|
|
|
70
|
-
**Give the LLM Libraries to Use**\
|
|
71
|
-
If you have a specific JavaScript library you want to use, find the link on a CDN or the web and then tell the LLM to use that specific version and it will.
|
package/bin/synthos.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
var app = require('../dist/synthos-cli.js');
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
var app = require('../dist/synthos-cli.js');
|
|
3
3
|
app.run();
|
|
@@ -1,87 +1,95 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>SynthOS - {Application Title}</title>
|
|
7
|
-
<style>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
.chat-
|
|
13
|
-
.chat-
|
|
14
|
-
.chat-
|
|
15
|
-
.chat-message
|
|
16
|
-
.chat-message p
|
|
17
|
-
.
|
|
18
|
-
.
|
|
19
|
-
.link-group
|
|
20
|
-
|
|
21
|
-
.
|
|
22
|
-
|
|
23
|
-
.chat-
|
|
24
|
-
.chat-
|
|
25
|
-
.
|
|
26
|
-
.
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
.application-title { font-size:
|
|
34
|
-
.application-content { font-size:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
</div>
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>SynthOS - {Application Title}</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* Nebula Dusk Theme */
|
|
9
|
+
:root { --accent-primary: #667eea; --accent-secondary: #764ba2; --accent-tertiary: #f093fb; --accent-glow: rgba(138, 43, 226, 0.3); --border-color: rgba(138, 43, 226, 0.3); }
|
|
10
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
11
|
+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0a0a0f; color: #e0e0e0; height: 100vh; display: flex; }
|
|
12
|
+
.chat-panel { width: 30%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); box-shadow: 0 0 20px rgba(138, 43, 226, 0.3); padding: 5px; display: flex; flex-direction: column; border-right: 1px solid rgba(138, 43, 226, 0.3); }
|
|
13
|
+
.chat-header { font-size: 24px; padding: 10px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; text-align: center; border-radius: 10px 10px 0 0; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
|
|
14
|
+
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; margin-top: 10px; background: rgba(15, 15, 35, 0.8); border-radius: 10px; border: 1px solid rgba(138, 43, 226, 0.2); }
|
|
15
|
+
.chat-message { margin-bottom: 15px; padding: 10px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%); border-radius: 15px; box-shadow: 0 2px 10px rgba(138, 43, 226, 0.2); border: 1px solid rgba(138, 43, 226, 0.1); }
|
|
16
|
+
.chat-message p { margin-bottom: 5px; line-height: 1.4; }
|
|
17
|
+
.chat-message p strong { font-weight: 600; color: #a78bfa; }
|
|
18
|
+
.chat-message p code { background: rgba(138, 43, 226, 0.3); padding: 2px 4px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; color: #e0e0e0; }
|
|
19
|
+
.link-group { display: flex; justify-content: space-between; margin: 15px 0; }
|
|
20
|
+
.link-group a { font-size: 14px; color: #a78bfa; text-decoration: none; padding: 5px 10px; border-radius: 5px; transition: all 0.3s; }
|
|
21
|
+
.link-group a:hover { background: rgba(138, 43, 226, 0.3); text-shadow: 0 0 10px rgba(167, 139, 250, 0.5); }
|
|
22
|
+
form { display: flex; flex-direction: row; width: 100%; gap: 10px; }
|
|
23
|
+
.chat-input { padding: 12px; border: none; border-radius: 25px; flex-grow: 1; font-size: 14px; background: rgba(30, 30, 60, 0.8); color: #e0e0e0; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); border: 1px solid rgba(138, 43, 226, 0.3); }
|
|
24
|
+
.chat-input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 10px rgba(167, 139, 250, 0.3); }
|
|
25
|
+
.chat-submit { padding: 12px 20px; border: none; border-radius: 25px; font-size: 14px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
|
|
26
|
+
.chat-submit:hover { box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); transform: translateY(-2px); }
|
|
27
|
+
.viewer-panel { width: 90%; padding: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
|
|
28
|
+
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 15, 0.9); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
|
29
|
+
.spinner { border: 8px solid rgba(138, 43, 226, 0.2); border-top: 8px solid #a78bfa; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
|
|
30
|
+
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
31
|
+
|
|
32
|
+
/* Page Specific Styles - Updated with dialog colors */
|
|
33
|
+
.application-title { font-size: 22px; font-weight: 700; padding: 14px 30px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; text-align: center; border-radius: 12px 12px 0 0; width: 100%; max-width: 800px; box-shadow: 0 6px 25px var(--accent-glow); }
|
|
34
|
+
.application-content { font-size: 14px; color: rgba(224, 224, 224, 0.8); padding: 20px; flex-grow: 1; width: 100%; max-width: 800px; background: rgba(15, 15, 35, 0.8); border-radius: 0 0 12px 12px; border: 1px solid rgba(138, 43, 226, 0.2); border-top: none; }
|
|
35
|
+
|
|
36
|
+
/* Scrollbar Styles */
|
|
37
|
+
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
38
|
+
::-webkit-scrollbar-track { background: rgba(15, 15, 35, 0.6); border-radius: 10px; border: 1px solid var(--border-color); }
|
|
39
|
+
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); border-radius: 10px; border: 2px solid rgba(15, 15, 35, 0.6); box-shadow: 0 0 10px var(--accent-glow); }
|
|
40
|
+
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); box-shadow: 0 0 15px rgba(240, 147, 251, 0.5); }
|
|
41
|
+
::-webkit-scrollbar-corner { background: rgba(15, 15, 35, 0.6); }
|
|
42
|
+
* { scrollbar-width: thin; scrollbar-color: var(--accent-secondary) rgba(15, 15, 35, 0.6); }
|
|
43
|
+
</style>
|
|
44
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
|
|
45
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
|
|
46
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<div class="chat-panel">
|
|
50
|
+
<div class="chat-header">SynthOS</div>
|
|
51
|
+
<div class="chat-messages" id="chatMessages">
|
|
52
|
+
<div class="chat-message"><p><strong>SynthOS:</strong> what kind of application would you like?</p></div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="link-group">
|
|
55
|
+
<a href="#" id="saveLink">Save</a>
|
|
56
|
+
<a href="/pages" id="pagesLink">Pages</a>
|
|
57
|
+
<a href="#" id="resetLink">Reset</a>
|
|
58
|
+
</div>
|
|
59
|
+
<form action="/" method="POST" id="chatForm">
|
|
60
|
+
<input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
|
|
61
|
+
<button type="submit" class="chat-submit">Send</button>
|
|
62
|
+
</form>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="viewer-panel" id="viewerPanel">
|
|
65
|
+
<div class="application-title">{Application Title}</div>
|
|
66
|
+
<div class="application-content">{Application Content}</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div id="thoughts" style="display: none;">I've prompted the user for the type of application to create.</div>
|
|
69
|
+
<div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
|
|
70
|
+
<script>
|
|
71
|
+
// Basic chat functionality
|
|
72
|
+
document.getElementById("chatInput").focus();
|
|
73
|
+
document.getElementById("chatForm").addEventListener('submit', () => {
|
|
74
|
+
document.getElementById("loadingOverlay").style.display = 'flex';
|
|
75
|
+
document.getElementById("chatForm").action = window.location.pathname;
|
|
76
|
+
});
|
|
77
|
+
document.getElementById("saveLink").addEventListener("click", function() {
|
|
78
|
+
const pageName = prompt("Enter the name of the page to save as:");
|
|
79
|
+
if (pageName) {
|
|
80
|
+
window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
document.getElementById("resetLink").addEventListener("click", function() {
|
|
84
|
+
window.location.href = `${window.location.pathname}/reset`;
|
|
85
|
+
});
|
|
86
|
+
window.onload = function() {
|
|
87
|
+
const chatMessages = document.getElementById('chatMessages');
|
|
88
|
+
chatMessages.scrollTo({
|
|
89
|
+
top: chatMessages.scrollHeight,
|
|
90
|
+
behavior: 'smooth'
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
</script>
|
|
94
|
+
</body>
|
|
87
95
|
</html>
|