diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..9d38c68
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,22 @@
+# ContextForge — configuración de proveedores de IA
+# Copiá este archivo como .env y completá las keys que tengas
+# Solo necesitás UNA key para activar el Modo IA
+
+# Mistral (gratuito) — https://console.mistral.ai
+VITE_MISTRAL_KEY=
+
+# Groq (muy generoso) — https://console.groq.com
+VITE_GROQ_KEY=
+
+# Google Gemini (generoso) — https://aistudio.google.com
+VITE_GEMINI_KEY=
+
+# Anthropic — https://console.anthropic.com
+VITE_ANTHROPIC_KEY=
+
+# OpenAI — https://platform.openai.com
+VITE_OPENAI_KEY=
+
+# Ollama local (sin key, solo URL)
+VITE_OLLAMA_URL=http://localhost:11434
+VITE_OLLAMA_MODEL=llama3
diff --git a/package-lock.json b/package-lock.json
index 25dd714..021a062 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,21 @@
{
"name": "contextforge",
- "version": "0.1.0",
+ "version": "0.2.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "contextforge",
- "version": "0.1.0",
+ "version": "0.2.0",
"dependencies": {
"@vitejs/plugin-react": "latest",
"react": "latest",
"react-dom": "latest",
"vite": "latest"
},
- "devDependencies": {}
+ "devDependencies": {
+ "vitest": "latest"
+ }
},
"node_modules/@emnapi/core": {
"version": "1.10.0",
@@ -46,6 +48,13 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.5.5",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+ "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@napi-rs/wasm-runtime": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -339,6 +348,13 @@
"integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
"license": "MIT"
},
+ "node_modules/@standard-schema/spec": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+ "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@tybys/wasm-util": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -349,6 +365,31 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@types/chai": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+ "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/deep-eql": "*",
+ "assertion-error": "^2.0.1"
+ }
+ },
+ "node_modules/@types/deep-eql": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+ "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@types/estree": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+ "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@vitejs/plugin-react": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
@@ -374,6 +415,146 @@
}
}
},
+ "node_modules/@vitest/expect": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.6.tgz",
+ "integrity": "sha512-7EHDquPthALSV0jhhjgEW8FXaviMx7rSqu8W6oqCoAuOhKov814P99QDV1pxMA3QPv21YudvJngIhjrNI4opLg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@standard-schema/spec": "^1.1.0",
+ "@types/chai": "^5.2.2",
+ "@vitest/spy": "4.1.6",
+ "@vitest/utils": "4.1.6",
+ "chai": "^6.2.2",
+ "tinyrainbow": "^3.1.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/@vitest/mocker": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.6.tgz",
+ "integrity": "sha512-MCFc63czMjEInOlcY2cpQCvCN+KgbAn+60xu9cMgP4sKaLC5JNAKw7JH8QdAnoAC88hW1IiSNZ+GgVXlN1UcMQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@vitest/spy": "4.1.6",
+ "estree-walker": "^3.0.3",
+ "magic-string": "^0.30.21"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ },
+ "peerDependencies": {
+ "msw": "^2.4.9",
+ "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ },
+ "peerDependenciesMeta": {
+ "msw": {
+ "optional": true
+ },
+ "vite": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@vitest/pretty-format": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.6.tgz",
+ "integrity": "sha512-h5SxD/IzNhZYnrSZRsUZQIC+vD0GY8cUvq0iwsmkFKixRCKLLWqCXa/FIQ4S1R+sI+PGoojkHsdNrbZiM9Qpgw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "tinyrainbow": "^3.1.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/@vitest/runner": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.6.tgz",
+ "integrity": "sha512-nOPCmn2+yD0ZNmKdsXGv/UxMMWbMuKeD6GyYncNwdkYDxpQvrPSKYj2rWuDjC2Y4b6w6hjip5dBKFzEUuZe3vA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@vitest/utils": "4.1.6",
+ "pathe": "^2.0.3"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/@vitest/snapshot": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.6.tgz",
+ "integrity": "sha512-YhsdE6xAVfTDmzjxL2ZDUvjj+ZsgyOKe+TdQzqkD72wIOmHka8NuGQ6NpTNZv9D2Z63fbwWKJPeVpEw4EQgYxw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@vitest/pretty-format": "4.1.6",
+ "@vitest/utils": "4.1.6",
+ "magic-string": "^0.30.21",
+ "pathe": "^2.0.3"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/@vitest/spy": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.6.tgz",
+ "integrity": "sha512-JFKxMx6udhwKh/Ldo270e17QX710vgunMkuPAvXjHSvC6oqLWAHhVhjg/I71q0u0CBSErIODV1Kjv0FQNSWjdg==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/@vitest/utils": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.6.tgz",
+ "integrity": "sha512-FxIY+U81R3LGKCxaHHFRQ5+g6/iRgGLmeHWdp2Amj4ljQRrEIWHmZyDfDYBRZlpyqA7qKxtS9DD1dhk8RnRIVQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@vitest/pretty-format": "4.1.6",
+ "convert-source-map": "^2.0.0",
+ "tinyrainbow": "^3.1.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ }
+ },
+ "node_modules/assertion-error": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+ "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/chai": {
+ "version": "6.2.2",
+ "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+ "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/convert-source-map": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -383,6 +564,33 @@
"node": ">=8"
}
},
+ "node_modules/es-module-lexer": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+ "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/estree-walker": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+ "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/estree": "^1.0.0"
+ }
+ },
+ "node_modules/expect-type": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+ "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/fdir": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -675,6 +883,16 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/magic-string": {
+ "version": "0.30.21",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+ "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@jridgewell/sourcemap-codec": "^1.5.5"
+ }
+ },
"node_modules/nanoid": {
"version": "3.3.12",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -693,6 +911,24 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
+ "node_modules/obug": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+ "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+ "dev": true,
+ "funding": [
+ "https://github.com/sponsors/sxzz",
+ "https://opencollective.com/debug"
+ ],
+ "license": "MIT"
+ },
+ "node_modules/pathe": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+ "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -805,6 +1041,13 @@
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"license": "MIT"
},
+ "node_modules/siginfo": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+ "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+ "dev": true,
+ "license": "ISC"
+ },
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -814,6 +1057,37 @@
"node": ">=0.10.0"
}
},
+ "node_modules/stackback": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+ "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/std-env": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+ "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/tinybench": {
+ "version": "2.9.0",
+ "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+ "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/tinyexec": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
+ "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ }
+ },
"node_modules/tinyglobby": {
"version": "0.2.16",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -830,6 +1104,16 @@
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
+ "node_modules/tinyrainbow": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+ "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -913,6 +1197,113 @@
"optional": true
}
}
+ },
+ "node_modules/vitest": {
+ "version": "4.1.6",
+ "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.6.tgz",
+ "integrity": "sha512-6lvjbS3p9b4CrdCmguzbh2/4uoXhGE2q71R4OX5sqF9R1bo9Xd6fGrMAfvp5wnCzlBnFVdCOp6onuTQVbo8iUQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@vitest/expect": "4.1.6",
+ "@vitest/mocker": "4.1.6",
+ "@vitest/pretty-format": "4.1.6",
+ "@vitest/runner": "4.1.6",
+ "@vitest/snapshot": "4.1.6",
+ "@vitest/spy": "4.1.6",
+ "@vitest/utils": "4.1.6",
+ "es-module-lexer": "^2.0.0",
+ "expect-type": "^1.3.0",
+ "magic-string": "^0.30.21",
+ "obug": "^2.1.1",
+ "pathe": "^2.0.3",
+ "picomatch": "^4.0.3",
+ "std-env": "^4.0.0-rc.1",
+ "tinybench": "^2.9.0",
+ "tinyexec": "^1.0.2",
+ "tinyglobby": "^0.2.15",
+ "tinyrainbow": "^3.1.0",
+ "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+ "why-is-node-running": "^2.3.0"
+ },
+ "bin": {
+ "vitest": "vitest.mjs"
+ },
+ "engines": {
+ "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/vitest"
+ },
+ "peerDependencies": {
+ "@edge-runtime/vm": "*",
+ "@opentelemetry/api": "^1.9.0",
+ "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+ "@vitest/browser-playwright": "4.1.6",
+ "@vitest/browser-preview": "4.1.6",
+ "@vitest/browser-webdriverio": "4.1.6",
+ "@vitest/coverage-istanbul": "4.1.6",
+ "@vitest/coverage-v8": "4.1.6",
+ "@vitest/ui": "4.1.6",
+ "happy-dom": "*",
+ "jsdom": "*",
+ "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@edge-runtime/vm": {
+ "optional": true
+ },
+ "@opentelemetry/api": {
+ "optional": true
+ },
+ "@types/node": {
+ "optional": true
+ },
+ "@vitest/browser-playwright": {
+ "optional": true
+ },
+ "@vitest/browser-preview": {
+ "optional": true
+ },
+ "@vitest/browser-webdriverio": {
+ "optional": true
+ },
+ "@vitest/coverage-istanbul": {
+ "optional": true
+ },
+ "@vitest/coverage-v8": {
+ "optional": true
+ },
+ "@vitest/ui": {
+ "optional": true
+ },
+ "happy-dom": {
+ "optional": true
+ },
+ "jsdom": {
+ "optional": true
+ },
+ "vite": {
+ "optional": false
+ }
+ }
+ },
+ "node_modules/why-is-node-running": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+ "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "siginfo": "^2.0.0",
+ "stackback": "0.0.2"
+ },
+ "bin": {
+ "why-is-node-running": "cli.js"
+ },
+ "engines": {
+ "node": ">=8"
+ }
}
}
}
diff --git a/src/App.jsx b/src/App.jsx
index 20dceeb..34a345c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,8 @@ import Checklist from './components/Checklist';
import ScorePanel from './components/ScorePanel';
import PromptSuggestion from './components/PromptSuggestion';
import { classifyPrompt } from './logic/classifyPrompt';
+import { classifyWithAI } from './logic/classifyWithAI';
+import { getActiveProvider, getStoredKeys, STORAGE_KEY } from './config';
import { scoreContext } from './logic/scoreContext';
import { generateAdvice } from './logic/generateAdvice';
import { generateRefinedPrompt } from './logic/generateRefinedPrompt';
@@ -30,10 +32,44 @@ const examples = [
},
];
+// Definición de campos del panel de configuración
+const CONFIG_PROVIDERS = [
+ { id: 'mistral', label: 'Mistral', type: 'password', placeholder: 'VITE_MISTRAL_KEY' },
+ { id: 'groq', label: 'Groq', type: 'password', placeholder: 'VITE_GROQ_KEY' },
+ { id: 'gemini', label: 'Google Gemini', type: 'password', placeholder: 'VITE_GEMINI_KEY' },
+ { id: 'anthropic', label: 'Anthropic', type: 'password', placeholder: 'VITE_ANTHROPIC_KEY' },
+ { id: 'openai', label: 'OpenAI', type: 'password', placeholder: 'VITE_OPENAI_KEY' },
+ { id: 'ollama', label: 'Ollama (URL local)',type: 'text', placeholder: 'http://localhost:11434' },
+];
+
+const EMPTY_FORM = { mistral: '', groq: '', gemini: '', anthropic: '', openai: '', ollama: '' };
+
+// Enmascara una key mostrando solo los últimos 4 caracteres
+function maskKey(value) {
+ if (!value || value.length <= 4) return value;
+ return '••••••••' + value.slice(-4);
+}
+
+// Para Ollama muestra la URL completa (no es sensible); para el resto aplica máscara
+function maskValue(id, value) {
+ return id === 'ollama' ? value : maskKey(value);
+}
+
export default function App() {
const [userText, setUserText] = useState('');
const [analysis, setAnalysis] = useState(null);
const [copiedMessage, setCopiedMessage] = useState('');
+ const [useAI, setUseAI] = useState(false);
+
+ // Estado del panel de configuración
+ const [showConfig, setShowConfig] = useState(false);
+ const [formValues, setFormValues] = useState(EMPTY_FORM);
+ // savedKeys se inicializa leyendo localStorage para mostrar indicadores de "Guardada"
+ const [savedKeys, setSavedKeys] = useState(() => getStoredKeys());
+
+ // getActiveProvider() lee localStorage en cada render, por lo que se actualiza
+ // automáticamente tras guardar o borrar keys sin necesidad de estado extra
+ const activeProvider = getActiveProvider();
const markdownReport = useMemo(() => {
if (!analysis) return '';
@@ -45,7 +81,7 @@ export default function App() {
});
}, [analysis, userText]);
- function analyze() {
+ async function analyze() {
const cleanText = userText.trim();
if (!cleanText) {
@@ -54,20 +90,73 @@ export default function App() {
return;
}
- const category = classifyPrompt(cleanText);
+ let category;
+
+ if (useAI && activeProvider) {
+ setCopiedMessage(`Analizando con ${activeProvider.name}...`);
+ category = await classifyWithAI(cleanText);
+ if (category._fallback) {
+ setCopiedMessage('No se pudo conectar con la IA. Usando modo reglas.');
+ }
+ } else {
+ category = classifyPrompt(cleanText);
+ }
+
const advice = generateAdvice(category);
const scoreData = scoreContext(cleanText);
const refinedPrompt = generateRefinedPrompt(cleanText, category);
setAnalysis({ category, advice, scoreData, refinedPrompt });
- setCopiedMessage('Análisis generado.');
+
+ if (!category._fallback) {
+ setCopiedMessage('Análisis generado.');
+ }
+ }
+
+ // Guarda las keys ingresadas en localStorage.
+ // Los campos vacíos conservan el valor previo (no borran la key existente).
+ function saveConfig() {
+ const toSave = { ...savedKeys };
+
+ for (const { id } of CONFIG_PROVIDERS) {
+ if (formValues[id].trim()) {
+ toSave[id] = formValues[id].trim();
+ }
+ }
+
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+ setSavedKeys(toSave);
+ setFormValues(EMPTY_FORM);
+ setShowConfig(false);
+
+ // getActiveProvider() ya lee el localStorage actualizado en el próximo render
+ const active = getActiveProvider();
+ setCopiedMessage(
+ active
+ ? `Proveedor activo: ${active.name}`
+ : 'Sin proveedor activo — usando modo heurístico',
+ );
+ }
+
+ // Elimina todas las keys guardadas en localStorage
+ function clearConfig() {
+ localStorage.removeItem(STORAGE_KEY);
+ setSavedKeys({});
+ setFormValues(EMPTY_FORM);
+
+ const active = getActiveProvider();
+ setCopiedMessage(
+ active
+ ? `Keys de UI borradas. Proveedor activo por .env: ${active.name}`
+ : 'Keys borradas — sin proveedor activo. Usando modo heurístico.',
+ );
}
async function copyToClipboard(text, successMessage) {
try {
await navigator.clipboard.writeText(text);
setCopiedMessage(successMessage);
- } catch (error) {
+ } catch {
setCopiedMessage('No pude copiar automáticamente. Seleccioná el texto y copialo manualmente.');
}
}
@@ -97,11 +186,59 @@ export default function App() {
- v0.1
- Reglas locales
+ v0.2
+ {useAI && activeProvider ? `IA — ${activeProvider.name}` : 'Reglas locales'}
+
+
+ {showConfig && (
+
+ Proveedores de IA
+
+ {CONFIG_PROVIDERS.map(({ id, label, type, placeholder }) => (
+
+
+ setFormValues((v) => ({ ...v, [id]: e.target.value }))}
+ placeholder={placeholder}
+ autoComplete="off"
+ />
+ {savedKeys[id] && (
+
+ Guardada: {maskValue(id, savedKeys[id])}
+
+ )}
+
+ ))}
+
+
+
+
+
+ )}
+
{copiedMessage && {copiedMessage}
}
@@ -112,7 +249,7 @@ export default function App() {
examples={examples}
onExample={(text) => {
setUserText(text);
- setCopiedMessage('Ejemplo cargado. Presioná “Analizar contexto”.');
+ setCopiedMessage('Ejemplo cargado. Presioná "Analizar contexto".');
}}
/>
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..6d6ed27
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,78 @@
+// Configuración de proveedores de IA para ContextForge
+// Los valores se leen desde import.meta.env.VITE_* (build time) y localStorage (runtime).
+// localStorage tiene precedencia sobre las variables de entorno.
+
+export const STORAGE_KEY = 'contextforge_api_keys';
+
+// Lee las keys guardadas desde la UI (localStorage). Devuelve {} si no hay nada.
+export function getStoredKeys() {
+ try {
+ return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+ } catch {
+ return {};
+ }
+}
+
+const CONFIG = {
+ ollama: {
+ id: 'ollama',
+ name: 'Ollama',
+ url: import.meta.env.VITE_OLLAMA_URL || 'http://localhost:11434',
+ model: import.meta.env.VITE_OLLAMA_MODEL || 'llama3',
+ },
+ groq: {
+ id: 'groq',
+ name: 'Groq',
+ key: import.meta.env.VITE_GROQ_KEY,
+ model: 'llama3-8b-8192',
+ },
+ mistral: {
+ id: 'mistral',
+ name: 'Mistral',
+ key: import.meta.env.VITE_MISTRAL_KEY,
+ model: 'mistral-small-latest',
+ },
+ gemini: {
+ id: 'gemini',
+ name: 'Gemini',
+ key: import.meta.env.VITE_GEMINI_KEY,
+ model: 'gemini-1.5-flash',
+ },
+ anthropic: {
+ id: 'anthropic',
+ name: 'Anthropic',
+ key: import.meta.env.VITE_ANTHROPIC_KEY,
+ model: 'claude-haiku-3-5-20251001',
+ },
+ openai: {
+ id: 'openai',
+ name: 'OpenAI',
+ key: import.meta.env.VITE_OPENAI_KEY,
+ model: 'gpt-4o-mini',
+ },
+};
+
+// Orden de prioridad: Ollama → Groq → Mistral → Gemini → Anthropic → OpenAI
+const PRIORITY = ['ollama', 'groq', 'mistral', 'gemini', 'anthropic', 'openai'];
+
+// Devuelve el primer proveedor activo con su key/URL efectiva resuelta.
+// Para cada proveedor busca primero en localStorage y luego en import.meta.env.
+export function getActiveProvider() {
+ const stored = getStoredKeys();
+
+ for (const id of PRIORITY) {
+ const p = CONFIG[id];
+
+ if (id === 'ollama') {
+ const url = stored.ollama || import.meta.env.VITE_OLLAMA_URL;
+ if (url) return { ...p, url };
+ } else {
+ const key = stored[id] || p.key;
+ if (key) return { ...p, key };
+ }
+ }
+
+ return null;
+}
+
+export default CONFIG;
diff --git a/src/logic/classifyWithAI.js b/src/logic/classifyWithAI.js
new file mode 100644
index 0000000..ae488d1
--- /dev/null
+++ b/src/logic/classifyWithAI.js
@@ -0,0 +1,207 @@
+// Clasificador con IA real — reemplaza la lógica heurística cuando hay un proveedor activo.
+// Devuelve el mismo shape que classifyPrompt.js con fallback automático si la llamada falla.
+import rules from '../data/contextRules.json';
+import { classifyPrompt } from './classifyPrompt';
+import { getActiveProvider } from '../config';
+
+function buildSystemPrompt() {
+ const categoryList = rules.map((r) => `- ${r.id}: ${r.label}`).join('\n');
+
+ return `You are a context strategy advisor for AI tools. Your job is to analyze the user's need written in natural language and determine what type of information and file formats would help an AI understand and respond better.
+
+You must respond ONLY with a valid JSON object. No explanation, no markdown, no preamble. Just the raw JSON.
+
+Available categories (use the id field to select one):
+${categoryList}
+
+Respond with this exact shape:
+{
+ "id": "string (category id from the list above)",
+ "label": "string (category label)",
+ "confidence": 0,
+ "matchedKeywords": [],
+ "description": "string (why this category fits)",
+ "primaryFormats": [],
+ "secondaryFormats": [],
+ "avoid": [],
+ "checklist": [],
+ "reason": "string (explanation of why this context helps the AI)",
+ "diagnosticExplanation": "string (brief explanation of category detection)"
+}
+
+If no category fits clearly, use general_context.
+Never invent categories outside the list.`;
+}
+
+// Intenta extraer un objeto JSON de texto que puede incluir markdown o texto extra
+function extractJSON(text) {
+ try {
+ return JSON.parse(text.trim());
+ } catch {}
+
+ const block = text.match(/```(?:json)?\s*([\s\S]*?)```/);
+ if (block) {
+ try { return JSON.parse(block[1].trim()); } catch {}
+ }
+
+ const start = text.indexOf('{');
+ const end = text.lastIndexOf('}');
+ if (start !== -1 && end > start) {
+ try { return JSON.parse(text.slice(start, end + 1)); } catch {}
+ }
+
+ throw new Error('No se pudo extraer JSON válido de la respuesta de la IA');
+}
+
+// --- Adaptadores por proveedor ---
+
+async function callOllama(provider, systemPrompt, userText) {
+ const res = await fetch(`${provider.url}/api/chat`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ model: provider.model,
+ messages: [
+ { role: 'system', content: systemPrompt },
+ { role: 'user', content: userText },
+ ],
+ stream: false,
+ }),
+ });
+ if (!res.ok) throw new Error(`Ollama ${res.status}`);
+ const data = await res.json();
+ return data.message.content;
+}
+
+// Groq, Mistral y OpenAI comparten el formato de la API de OpenAI
+async function callOpenAICompat(endpoint, key, model, systemPrompt, userText) {
+ const res = await fetch(endpoint, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${key}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ model,
+ messages: [
+ { role: 'system', content: systemPrompt },
+ { role: 'user', content: userText },
+ ],
+ }),
+ });
+ if (!res.ok) throw new Error(`${endpoint} ${res.status}`);
+ const data = await res.json();
+ return data.choices[0].message.content;
+}
+
+async function callAnthropic(provider, systemPrompt, userText) {
+ const res = await fetch('https://api.anthropic.com/v1/messages', {
+ method: 'POST',
+ headers: {
+ 'x-api-key': provider.key,
+ 'anthropic-version': '2023-06-01',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ model: provider.model,
+ max_tokens: 1024,
+ system: systemPrompt,
+ messages: [{ role: 'user', content: userText }],
+ }),
+ });
+ if (!res.ok) throw new Error(`Anthropic ${res.status}`);
+ const data = await res.json();
+ return data.content[0].text;
+}
+
+async function callGemini(provider, systemPrompt, userText) {
+ const url = `https://generativelanguage.googleapis.com/v1beta/models/${provider.model}:generateContent?key=${provider.key}`;
+ const res = await fetch(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ system_instruction: { parts: [{ text: systemPrompt }] },
+ contents: [{ parts: [{ text: userText }] }],
+ }),
+ });
+ if (!res.ok) throw new Error(`Gemini ${res.status}`);
+ const data = await res.json();
+ return data.candidates[0].content.parts[0].text;
+}
+
+async function callProvider(provider, systemPrompt, userText) {
+ switch (provider.id) {
+ case 'ollama':
+ return callOllama(provider, systemPrompt, userText);
+ case 'groq':
+ return callOpenAICompat(
+ 'https://api.groq.com/openai/v1/chat/completions',
+ provider.key, provider.model, systemPrompt, userText,
+ );
+ case 'mistral':
+ return callOpenAICompat(
+ 'https://api.mistral.ai/v1/chat/completions',
+ provider.key, provider.model, systemPrompt, userText,
+ );
+ case 'openai':
+ return callOpenAICompat(
+ 'https://api.openai.com/v1/chat/completions',
+ provider.key, provider.model, systemPrompt, userText,
+ );
+ case 'anthropic':
+ return callAnthropic(provider, systemPrompt, userText);
+ case 'gemini':
+ return callGemini(provider, systemPrompt, userText);
+ default:
+ throw new Error(`Proveedor desconocido: ${provider.id}`);
+ }
+}
+
+// --- Función principal exportada ---
+
+export async function classifyWithAI(text) {
+ const provider = getActiveProvider();
+
+ if (!provider) {
+ return { ...classifyPrompt(text), _fallback: true, _fallbackReason: 'Sin proveedor configurado' };
+ }
+
+ try {
+ const systemPrompt = buildSystemPrompt();
+ const raw = await callProvider(provider, systemPrompt, text);
+ const aiResult = extractJSON(raw);
+
+ // Normalizar confidence: algunos modelos devuelven escala 0-1 en lugar de 0-100
+ if (typeof aiResult.confidence === 'number' && aiResult.confidence <= 1) {
+ aiResult.confidence = Math.round(aiResult.confidence * 100);
+ }
+
+ // Usar la regla base del JSON para completar campos que la IA pudiera omitir
+ const rule = rules.find((r) => r.id === aiResult.id)
+ || rules.find((r) => r.id === 'general_context');
+
+ return {
+ ...rule,
+ label: aiResult.label || rule.label,
+ confidence: typeof aiResult.confidence === 'number' ? aiResult.confidence : 50,
+ matchedKeywords: Array.isArray(aiResult.matchedKeywords) ? aiResult.matchedKeywords : [],
+ description: aiResult.description || rule.description,
+ primaryFormats: Array.isArray(aiResult.primaryFormats) && aiResult.primaryFormats.length
+ ? aiResult.primaryFormats : rule.primaryFormats,
+ secondaryFormats: Array.isArray(aiResult.secondaryFormats) && aiResult.secondaryFormats.length
+ ? aiResult.secondaryFormats : rule.secondaryFormats,
+ avoid: Array.isArray(aiResult.avoid) && aiResult.avoid.length
+ ? aiResult.avoid : rule.avoid,
+ checklist: Array.isArray(aiResult.checklist) && aiResult.checklist.length
+ ? aiResult.checklist : rule.checklist,
+ reason: aiResult.reason || rule.reason,
+ diagnosticExplanation: aiResult.diagnosticExplanation || '',
+ };
+ } catch (err) {
+ return {
+ ...classifyPrompt(text),
+ _fallback: true,
+ _fallbackReason: err.message || 'Error desconocido',
+ };
+ }
+}
diff --git a/src/style.css b/src/style.css
index 2ea4275..103a2b4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -390,6 +390,123 @@ li + li {
color: #dbe7ff;
}
+/* Botón discreto para abrir el panel de configuración de API */
+.config-open-btn {
+ display: block;
+ width: 100%;
+ margin-top: 6px;
+ padding: 5px 12px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.07);
+ background: transparent;
+ color: #5a6e94;
+ font-size: 0.74rem;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ cursor: pointer;
+ transition: color 0.15s;
+}
+
+.config-open-btn:hover {
+ color: #93a4c7;
+}
+
+.config-open-btn.open {
+ color: #b8cbff;
+}
+
+/* Panel expandible de configuración de keys */
+.config-panel {
+ margin-bottom: 18px;
+}
+
+.config-panel h3 {
+ margin: 0 0 16px;
+ font-size: 0.78rem;
+ color: #93a4c7;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ font-weight: 800;
+}
+
+.config-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.config-field {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.config-field label {
+ font-size: 0.78rem;
+ font-weight: 700;
+ color: #b9c4dc;
+ letter-spacing: 0.04em;
+}
+
+.config-field input {
+ padding: 9px 12px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 12px;
+ background: rgba(3, 7, 18, 0.6);
+ color: #f8fbff;
+ font-size: 0.88rem;
+ outline: none;
+}
+
+.config-field input:focus {
+ border-color: rgba(108, 142, 255, 0.6);
+ box-shadow: 0 0 0 3px rgba(108, 142, 255, 0.08);
+}
+
+.config-field input::placeholder {
+ color: #3f516e;
+}
+
+/* Indicador de key ya guardada bajo el campo */
+.config-saved {
+ font-size: 0.72rem;
+ color: #5a6e94;
+ font-family: ui-monospace, monospace;
+ letter-spacing: 0.04em;
+}
+
+.mode-toggle-btn {
+ display: block;
+ width: 100%;
+ margin-top: 10px;
+ padding: 6px 12px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(255, 255, 255, 0.06);
+ color: #93a4c7;
+ font-size: 0.76rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ cursor: pointer;
+ transition: background 0.15s, border-color 0.15s;
+}
+
+.mode-toggle-btn:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.mode-toggle-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.mode-toggle-btn.active {
+ background: rgba(125, 161, 255, 0.15);
+ border-color: rgba(125, 161, 255, 0.3);
+ color: #b8cbff;
+}
+
@media (max-width: 860px) {
.hero,
.layout {