@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.
Files changed (41) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/LICENSE +21 -0
  3. package/README.md +242 -0
  4. package/SECURITY.md +12 -0
  5. package/dist/index.cjs +938 -0
  6. package/dist/index.d.cts +431 -0
  7. package/dist/index.d.ts +431 -0
  8. package/dist/index.js +868 -0
  9. package/docs/ai-agents.md +155 -0
  10. package/docs/hooks.md +378 -0
  11. package/docs/publishing.md +102 -0
  12. package/examples/README.md +24 -0
  13. package/examples/basic-prompt.tsx +18 -0
  14. package/examples/chrome-ai-studio/README.md +22 -0
  15. package/examples/chrome-ai-studio/index.html +12 -0
  16. package/examples/chrome-ai-studio/package.json +22 -0
  17. package/examples/chrome-ai-studio/src/App.tsx +138 -0
  18. package/examples/chrome-ai-studio/src/main.tsx +10 -0
  19. package/examples/chrome-ai-studio/src/styles.css +219 -0
  20. package/examples/chrome-ai-studio/tsconfig.json +16 -0
  21. package/examples/chrome-ai-studio/vite.config.ts +6 -0
  22. package/examples/local-review-workbench/README.md +18 -0
  23. package/examples/local-review-workbench/index.html +12 -0
  24. package/examples/local-review-workbench/package.json +22 -0
  25. package/examples/local-review-workbench/src/App.tsx +121 -0
  26. package/examples/local-review-workbench/src/main.tsx +10 -0
  27. package/examples/local-review-workbench/src/styles.css +190 -0
  28. package/examples/local-review-workbench/tsconfig.json +16 -0
  29. package/examples/local-review-workbench/vite.config.ts +6 -0
  30. package/examples/local-translator/README.md +24 -0
  31. package/examples/local-translator/index.html +12 -0
  32. package/examples/local-translator/package.json +23 -0
  33. package/examples/local-translator/src/App.tsx +235 -0
  34. package/examples/local-translator/src/main.tsx +10 -0
  35. package/examples/local-translator/src/styles.css +161 -0
  36. package/examples/local-translator/tsconfig.json +16 -0
  37. package/examples/local-translator/vite.config.ts +6 -0
  38. package/examples/model-download-progress.tsx +20 -0
  39. package/examples/summarizer.tsx +28 -0
  40. package/llms.txt +97 -0
  41. 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
+ }