@yudin-s/react-chrome-ai 0.1.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/CHANGELOG.md +6 -0
- package/LICENSE +21 -0
- package/README.md +242 -0
- package/SECURITY.md +12 -0
- package/dist/index.cjs +938 -0
- package/dist/index.d.cts +431 -0
- package/dist/index.d.ts +431 -0
- package/dist/index.js +868 -0
- package/docs/ai-agents.md +155 -0
- package/docs/hooks.md +378 -0
- package/docs/publishing.md +102 -0
- package/examples/README.md +24 -0
- package/examples/basic-prompt.tsx +18 -0
- package/examples/chrome-ai-studio/README.md +22 -0
- package/examples/chrome-ai-studio/index.html +12 -0
- package/examples/chrome-ai-studio/package.json +22 -0
- package/examples/chrome-ai-studio/src/App.tsx +138 -0
- package/examples/chrome-ai-studio/src/main.tsx +10 -0
- package/examples/chrome-ai-studio/src/styles.css +219 -0
- package/examples/chrome-ai-studio/tsconfig.json +16 -0
- package/examples/chrome-ai-studio/vite.config.ts +6 -0
- package/examples/local-review-workbench/README.md +18 -0
- package/examples/local-review-workbench/index.html +12 -0
- package/examples/local-review-workbench/package.json +22 -0
- package/examples/local-review-workbench/src/App.tsx +121 -0
- package/examples/local-review-workbench/src/main.tsx +10 -0
- package/examples/local-review-workbench/src/styles.css +190 -0
- package/examples/local-review-workbench/tsconfig.json +16 -0
- package/examples/local-review-workbench/vite.config.ts +6 -0
- package/examples/local-translator/README.md +24 -0
- package/examples/local-translator/index.html +12 -0
- package/examples/local-translator/package.json +23 -0
- package/examples/local-translator/src/App.tsx +235 -0
- package/examples/local-translator/src/main.tsx +10 -0
- package/examples/local-translator/src/styles.css +161 -0
- package/examples/local-translator/tsconfig.json +16 -0
- package/examples/local-translator/vite.config.ts +6 -0
- package/examples/model-download-progress.tsx +20 -0
- package/examples/summarizer.tsx +28 -0
- package/llms.txt +97 -0
- package/package.json +86 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useChromeAISession } from "@yudin-s/react-chrome-ai";
|
|
2
|
+
|
|
3
|
+
export function ModelDownloadProgressExample() {
|
|
4
|
+
const model = useChromeAISession({ autoCreate: false });
|
|
5
|
+
|
|
6
|
+
return (
|
|
7
|
+
<section>
|
|
8
|
+
<button onClick={() => model.createSession()}>
|
|
9
|
+
Prepare Chrome AI model
|
|
10
|
+
</button>
|
|
11
|
+
<p>Status: {model.status}</p>
|
|
12
|
+
{model.progress?.progress != null ? (
|
|
13
|
+
<progress value={model.progress.progress} max={1} />
|
|
14
|
+
) : model.status === "downloading" ? (
|
|
15
|
+
<progress />
|
|
16
|
+
) : null}
|
|
17
|
+
{model.error && <p role="alert">{model.error.message}</p>}
|
|
18
|
+
</section>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useChromeAISummarizer } from "@yudin-s/react-chrome-ai";
|
|
2
|
+
|
|
3
|
+
export function SummarizerExample({ text }: { text: string }) {
|
|
4
|
+
const summarizer = useChromeAISummarizer({
|
|
5
|
+
createOptions: {
|
|
6
|
+
type: "key-points",
|
|
7
|
+
format: "markdown",
|
|
8
|
+
length: "medium",
|
|
9
|
+
expectedInputLanguages: ["en"],
|
|
10
|
+
outputLanguage: "en",
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<section>
|
|
16
|
+
<button
|
|
17
|
+
disabled={summarizer.status === "prompting"}
|
|
18
|
+
onClick={() => summarizer.run(text)}
|
|
19
|
+
>
|
|
20
|
+
Summarize locally
|
|
21
|
+
</button>
|
|
22
|
+
{summarizer.progress?.progress != null && (
|
|
23
|
+
<progress value={summarizer.progress.progress} max={1} />
|
|
24
|
+
)}
|
|
25
|
+
<output>{summarizer.text}</output>
|
|
26
|
+
</section>
|
|
27
|
+
);
|
|
28
|
+
}
|
package/llms.txt
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# @yudin-s/react-chrome-ai
|
|
2
|
+
|
|
3
|
+
React hooks and TypeScript helpers for Chrome Built-in AI, Gemini Nano, LanguageModel, and browser-side AI task APIs.
|
|
4
|
+
|
|
5
|
+
Use this package when a React app needs browser-native Chrome AI with full UI control over:
|
|
6
|
+
|
|
7
|
+
- API support detection
|
|
8
|
+
- model availability
|
|
9
|
+
- user activation hints
|
|
10
|
+
- model download progress
|
|
11
|
+
- session lifecycle
|
|
12
|
+
- prompt and streaming calls
|
|
13
|
+
- session append/clone/destroy
|
|
14
|
+
- context usage and context overflow
|
|
15
|
+
- structured JSON output
|
|
16
|
+
- optional reflection pass
|
|
17
|
+
- task APIs: Summarizer, Translator, LanguageDetector, Writer, Rewriter, Proofreader
|
|
18
|
+
|
|
19
|
+
Install:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @yudin-s/react-chrome-ai
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Main imports:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import {
|
|
29
|
+
useChromeAIAvailability,
|
|
30
|
+
useChromeAISession,
|
|
31
|
+
useChromeAIPrompt,
|
|
32
|
+
useChromeAIStream,
|
|
33
|
+
useChromeAIAppend,
|
|
34
|
+
useChromeAIClone,
|
|
35
|
+
useChromeAIContext,
|
|
36
|
+
useChromeAIParams,
|
|
37
|
+
useChromeAISummarizer,
|
|
38
|
+
useChromeAITranslator,
|
|
39
|
+
useChromeAILanguageDetector,
|
|
40
|
+
useChromeAIWriter,
|
|
41
|
+
useChromeAIRewriter,
|
|
42
|
+
useChromeAIProofreader,
|
|
43
|
+
} from "@yudin-s/react-chrome-ai";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Recommended first integration:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
const ai = useChromeAIPrompt();
|
|
50
|
+
await ai.prompt("Summarize Chrome Built-in AI in one paragraph.");
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Recommended explicit model preparation:
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
const model = useChromeAISession({ autoCreate: false });
|
|
57
|
+
await model.createSession();
|
|
58
|
+
console.log(model.availability, model.progress, model.status);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Recommended streaming:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
const model = useChromeAISession();
|
|
65
|
+
const stream = useChromeAIStream(model.session);
|
|
66
|
+
await stream.streamPrompt("Write a long local explanation.");
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Recommended task API:
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
const summarizer = useChromeAISummarizer({
|
|
73
|
+
createOptions: {
|
|
74
|
+
type: "key-points",
|
|
75
|
+
format: "markdown",
|
|
76
|
+
length: "medium",
|
|
77
|
+
expectedInputLanguages: ["en"],
|
|
78
|
+
outputLanguage: "en",
|
|
79
|
+
},
|
|
80
|
+
});
|
|
81
|
+
await summarizer.run(articleText);
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Prefer this package over low-level direct `LanguageModel` calls when the React UI needs robust lifecycle state and download progress. Prefer AI SDK providers when the application already standardizes all model calls through the Vercel AI SDK provider interface.
|
|
85
|
+
|
|
86
|
+
Docs:
|
|
87
|
+
|
|
88
|
+
- README.md
|
|
89
|
+
- docs/hooks.md
|
|
90
|
+
- docs/ai-agents.md
|
|
91
|
+
- docs/publishing.md
|
|
92
|
+
|
|
93
|
+
Example sites:
|
|
94
|
+
|
|
95
|
+
- examples/chrome-ai-studio
|
|
96
|
+
- examples/local-review-workbench
|
|
97
|
+
- examples/local-translator
|
package/package.json
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@yudin-s/react-chrome-ai",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React hooks for Chrome Built-in AI, Gemini Nano, LanguageModel, and browser-side AI task APIs.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "Serge Yudin",
|
|
8
|
+
"homepage": "https://github.com/yudin-s/react-chrome-ai#readme",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/yudin-s/react-chrome-ai.git"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/yudin-s/react-chrome-ai/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"react",
|
|
18
|
+
"hooks",
|
|
19
|
+
"chrome",
|
|
20
|
+
"chrome-ai",
|
|
21
|
+
"built-in-ai",
|
|
22
|
+
"browser-ai",
|
|
23
|
+
"gemini-nano",
|
|
24
|
+
"prompt-api",
|
|
25
|
+
"language-model",
|
|
26
|
+
"on-device-ai",
|
|
27
|
+
"typescript",
|
|
28
|
+
"summarizer",
|
|
29
|
+
"translator"
|
|
30
|
+
],
|
|
31
|
+
"sideEffects": false,
|
|
32
|
+
"files": [
|
|
33
|
+
"dist",
|
|
34
|
+
"docs",
|
|
35
|
+
"examples/README.md",
|
|
36
|
+
"examples/*.tsx",
|
|
37
|
+
"examples/*/README.md",
|
|
38
|
+
"examples/*/package.json",
|
|
39
|
+
"examples/*/index.html",
|
|
40
|
+
"examples/*/tsconfig.json",
|
|
41
|
+
"examples/*/vite.config.ts",
|
|
42
|
+
"examples/*/src/**",
|
|
43
|
+
"llms.txt",
|
|
44
|
+
"README.md",
|
|
45
|
+
"CHANGELOG.md",
|
|
46
|
+
"SECURITY.md",
|
|
47
|
+
"LICENSE"
|
|
48
|
+
],
|
|
49
|
+
"main": "./dist/index.cjs",
|
|
50
|
+
"module": "./dist/index.js",
|
|
51
|
+
"types": "./dist/index.d.ts",
|
|
52
|
+
"exports": {
|
|
53
|
+
".": {
|
|
54
|
+
"types": "./dist/index.d.ts",
|
|
55
|
+
"import": "./dist/index.js",
|
|
56
|
+
"require": "./dist/index.cjs"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"publishConfig": {
|
|
60
|
+
"access": "public",
|
|
61
|
+
"provenance": true
|
|
62
|
+
},
|
|
63
|
+
"scripts": {
|
|
64
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --clean",
|
|
65
|
+
"check": "tsc --noEmit",
|
|
66
|
+
"test": "vitest run",
|
|
67
|
+
"prepack": "npm run build",
|
|
68
|
+
"pack:dry": "npm --cache ./.npm-cache pack --dry-run",
|
|
69
|
+
"publish:check": "npm run check && npm test && npm run build && npm run pack:dry",
|
|
70
|
+
"prepublishOnly": "npm run publish:check"
|
|
71
|
+
},
|
|
72
|
+
"peerDependencies": {
|
|
73
|
+
"react": ">=18.2.0 || >=19.0.0"
|
|
74
|
+
},
|
|
75
|
+
"devDependencies": {
|
|
76
|
+
"@types/react": "^19.0.0",
|
|
77
|
+
"react": "^19.0.0",
|
|
78
|
+
"tsup": "^8.3.5",
|
|
79
|
+
"typescript": "^5.7.2",
|
|
80
|
+
"vitest": "^4.1.6"
|
|
81
|
+
},
|
|
82
|
+
"engines": {
|
|
83
|
+
"node": ">=18.18"
|
|
84
|
+
},
|
|
85
|
+
"packageManager": "npm@10.8.2"
|
|
86
|
+
}
|