@fronti/core 1.0.0 → 1.0.3
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 +142 -0
- package/dist/runtime.js +9 -9
- package/package.json +39 -36
- package/runtime/host.bat +2 -0
- package/runtime/host.js +4 -0
- package/runtime/host.sh +3 -0
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# Fronti - Visual Layer for Claude Code
|
|
2
|
+
|
|
3
|
+
Fronti brings Claude Code's powerful agent capabilities into your browser. Point it at any localhost project, select the element you want to change, describe what you need, and Claude updates your codebase instantly.
|
|
4
|
+
|
|
5
|
+
- Visual interface for Claude Code running on your localhost
|
|
6
|
+
- Works with React, Next.js, Vue, Tailwind, Astro, Svelte, and any web stack
|
|
7
|
+
- Handles UI changes, refactors, API integrations, logic updates, and test generation
|
|
8
|
+
- Perfect for rapid prototyping and production refinements
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/@fronti/core)
|
|
11
|
+
[](https://chromewebstore.google.com/detail/visual-editor-ai/jojjbmgmggenijlkhjeaiodfoggjcjgj)
|
|
12
|
+
[](https://github.com/waspdev95/fronti/stargazers)
|
|
13
|
+
[](https://opensource.org/licenses/MIT)
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
1. Install the Chrome extension
|
|
20
|
+
[Fronti Chrome Extension](https://chromewebstore.google.com/detail/visual-editor-ai/jojjbmgmggenijlkhjeaiodfoggjcjgj)
|
|
21
|
+
|
|
22
|
+
2. Install Fronti Core
|
|
23
|
+
`npm install -g @fronti/core`
|
|
24
|
+
|
|
25
|
+
3. Install Claude Code CLI
|
|
26
|
+
`npm install -g @anthropic-ai/claude-code`
|
|
27
|
+
|
|
28
|
+
4. Start your project
|
|
29
|
+
- Open your project in your editor
|
|
30
|
+
- Start your local development server (e.g., `npm run dev` → `http://localhost:3000`)
|
|
31
|
+
|
|
32
|
+
5. Edit visually
|
|
33
|
+
- Launch the Chrome extension, select an element, describe the change, and let Claude apply it to your codebase
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## What you can do
|
|
38
|
+
|
|
39
|
+
- Redesign components, restyle layouts, and update content directly from your browser
|
|
40
|
+
- Refactor logic, connect APIs, adjust data flows, and generate tests using Claude's agent capabilities
|
|
41
|
+
- Create new sections and reusable components with production-ready code
|
|
42
|
+
- Apply batch improvements like accessibility fixes, theme updates, or design token changes across your entire project
|
|
43
|
+
- See changes instantly with your existing dev server and hot reload
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Why Fronti?
|
|
48
|
+
|
|
49
|
+
Get the speed of hosted AI tools with complete control over your codebase.
|
|
50
|
+
|
|
51
|
+
| Feature | Hosted AI Builders | Fronti |
|
|
52
|
+
| --- | --- | --- |
|
|
53
|
+
| Works with your existing codebase | No | Yes |
|
|
54
|
+
| Code stays on your machine | No | Yes |
|
|
55
|
+
| Visual click-to-edit interface | Limited | Yes |
|
|
56
|
+
| Full agent capabilities | No | Yes |
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## How it works
|
|
61
|
+
|
|
62
|
+
- The Chrome extension provides a visual interface over your localhost dev server
|
|
63
|
+
- The `@fronti/core` package connects your browser to Claude Code CLI
|
|
64
|
+
- Claude executes changes locally in your codebase
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## Built for web development
|
|
69
|
+
|
|
70
|
+
- Turn visual feedback into code changes in minutes
|
|
71
|
+
- Works with any framework or design system
|
|
72
|
+
- Everything runs locally on your machine
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Requirements
|
|
77
|
+
|
|
78
|
+
- Node.js 18 or newer
|
|
79
|
+
- Claude Code CLI (`npm install -g @anthropic-ai/claude-code`)
|
|
80
|
+
- Fronti Core (`npm install -g @fronti/core`)
|
|
81
|
+
- Fronti Chrome Extension
|
|
82
|
+
- Chromium-based browser (Chrome, Edge, Arc, etc.)
|
|
83
|
+
- Local dev server running your project
|
|
84
|
+
|
|
85
|
+
All Claude requests run through Claude Code CLI, which requires an active Anthropic subscription.
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Development
|
|
90
|
+
|
|
91
|
+
Build each extension independently when working from source.
|
|
92
|
+
|
|
93
|
+
### Chrome extension
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
cd chrome-extension
|
|
97
|
+
npm install
|
|
98
|
+
npm run build
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Load the unpacked extension from `chrome-extension/dist` in Chrome.
|
|
102
|
+
|
|
103
|
+
### VS Code extension
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
cd vsc-extension
|
|
107
|
+
npm install
|
|
108
|
+
npm run compile
|
|
109
|
+
npm run package # Outputs visual-editor-ai-<version>.vsix in vsc-extension/
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Install the generated `.vsix` in VS Code (Extensions panel -> ... -> Install from VSIX).
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Contributing
|
|
117
|
+
|
|
118
|
+
Contributions are welcome:
|
|
119
|
+
|
|
120
|
+
1. Fork this repository.
|
|
121
|
+
2. Create a feature branch (`git checkout -b feature/my-improvement`).
|
|
122
|
+
3. Commit your changes (`git commit -m "Describe your change"`).
|
|
123
|
+
4. Push the branch and open a pull request.
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## License
|
|
128
|
+
|
|
129
|
+
Fronti is distributed under the [MIT License](LICENSE).
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Support
|
|
134
|
+
|
|
135
|
+
If Fronti helps your workflow, please star the repo and share feedback.
|
|
136
|
+
|
|
137
|
+
- [Report bugs](https://github.com/waspdev95/fronti/issues)
|
|
138
|
+
- [Start a discussion](https://github.com/waspdev95/fronti/discussions)
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
<p align="center">Made with care for developers.</p>
|
package/dist/runtime.js
CHANGED
|
@@ -36,17 +36,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.ensureRuntimeFiles = ensureRuntimeFiles;
|
|
37
37
|
const fs = __importStar(require("fs"));
|
|
38
38
|
const path = __importStar(require("path"));
|
|
39
|
-
const HOST_JS_CONTENT = `#!/usr/bin/env node
|
|
40
|
-
const { runNativeHost } = require('@fronti/native-host');
|
|
41
|
-
|
|
42
|
-
runNativeHost();
|
|
39
|
+
const HOST_JS_CONTENT = `#!/usr/bin/env node
|
|
40
|
+
const { runNativeHost } = require('@fronti/native-host');
|
|
41
|
+
|
|
42
|
+
runNativeHost();
|
|
43
43
|
`;
|
|
44
|
-
const HOST_BAT_CONTENT = `@echo off
|
|
45
|
-
node "%~dp0host.js" %*
|
|
44
|
+
const HOST_BAT_CONTENT = `@echo off
|
|
45
|
+
node "%~dp0host.js" %*
|
|
46
46
|
`;
|
|
47
|
-
const HOST_SH_CONTENT = `#!/usr/bin/env bash
|
|
48
|
-
DIR="$(cd "$(dirname "\${BASH_SOURCE[0]}")" && pwd)"
|
|
49
|
-
node "\${DIR}/host.js"
|
|
47
|
+
const HOST_SH_CONTENT = `#!/usr/bin/env bash
|
|
48
|
+
DIR="$(cd "$(dirname "\${BASH_SOURCE[0]}")" && pwd)"
|
|
49
|
+
node "\${DIR}/host.js"
|
|
50
50
|
`;
|
|
51
51
|
function ensureRuntimeFiles(targetDir, platform) {
|
|
52
52
|
if (!fs.existsSync(targetDir)) {
|
package/package.json
CHANGED
|
@@ -1,36 +1,39 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@fronti/core",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
5
|
-
"type": "commonjs",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"bin": {
|
|
8
|
-
"fronti-core": "dist/cli.js"
|
|
9
|
-
},
|
|
10
|
-
"files": [
|
|
11
|
-
"dist"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@fronti/core",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "Visual-first AI coding agent for local codebases. Select elements in browser, describe changes, agent applies edits.",
|
|
5
|
+
"type": "commonjs",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"bin": {
|
|
8
|
+
"fronti-core": "dist/cli.js"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist",
|
|
12
|
+
"runtime/host.bat",
|
|
13
|
+
"runtime/host.js",
|
|
14
|
+
"runtime/host.sh"
|
|
15
|
+
],
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "tsc -p ./tsconfig.json",
|
|
18
|
+
"clean": "rimraf dist",
|
|
19
|
+
"prepare": "npm run build",
|
|
20
|
+
"postinstall": "node ./dist/cli.js auto-install || true"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"fronti",
|
|
24
|
+
"native-messaging",
|
|
25
|
+
"claude",
|
|
26
|
+
"chrome"
|
|
27
|
+
],
|
|
28
|
+
"author": "Fronti",
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"yargs": "^17.7.2"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@types/node": "^20.16.11",
|
|
35
|
+
"@types/yargs": "^17.0.33",
|
|
36
|
+
"rimraf": "^5.0.10",
|
|
37
|
+
"typescript": "^5.6.3"
|
|
38
|
+
}
|
|
39
|
+
}
|
package/runtime/host.bat
ADDED
package/runtime/host.js
ADDED
package/runtime/host.sh
ADDED