{"_id":"@agiflowai/js-sdk","_rev":"5-5f5436165ba3d73eabd8386bb936c5c6","name":"@agiflowai/js-sdk","description":"Web js-sdk for Agiflow analytics","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.1":{"name":"@agiflowai/js-sdk","version":"0.0.1","author":{"name":"Vuong Ngo"},"license":"Business Source License","_id":"@agiflowai/js-sdk@0.0.1","maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"dist":{"shasum":"b3b6869354da91fcf1d02160bbadde12fddaa91d","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.1.tgz","fileCount":118,"integrity":"sha512-t0YMcc1zou5LEu4XHMB0MkTMCOshnQJrYEBJ5SqX6311oWwuJCJMGWmrkvlSNPB6YRFnduUfe59lkyWC3b1ozA==","signatures":[{"sig":"MEQCIBjRRpyATIFXxFMFMdleD4OvYC+44W6FZS9OE2H+j02mAiBZjMi1sA9jo2b4xugPnQEKdb8EJMRvJyI5Kymy47OFgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210574},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"2c7edefcb65d843be4a09274dd22efc0987f57da","scripts":{},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"_npmVersion":"10.2.4","description":"js-sdk for Agiflow","directories":{},"jsnext:main":"./dist/index.js","sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"ulidx":"2.3.0","openapi-fetch":"0.9.2"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/js-sdk_0.0.1_1717652637380_0.9528948908056032","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@agiflowai/js-sdk","version":"0.0.2","author":{"name":"Vuong Ngo"},"license":"Business Source License","_id":"@agiflowai/js-sdk@0.0.2","maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"dist":{"shasum":"2f4db8f41eb1f3809fe06609d3f4ef76fc3524f6","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.2.tgz","fileCount":118,"integrity":"sha512-t1clc3+vGg/1f7fXjZ6byEuMTG4eS/uw3MkWuDi8wPD9Kf0zj0ELX1PSyKY5fgcTsHvQ4O552V0zjbCkxitMXw==","signatures":[{"sig":"MEUCIQCvc5Oh0Bab5QlCqV9cUZug+cA1Zq/eCHaqZs4yR8leewIgJ6LztavBUWaBXr7ioCHFcWLG9EovIM3LLNZZ84KHyvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210570},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"ba545a00c4d607ff301f6eb1f476bafe59f94ba0","scripts":{},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"_npmVersion":"10.2.4","description":"js-sdk for Agiflow","directories":{},"jsnext:main":"./dist/index.js","sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"ulidx":"2.3.0","openapi-fetch":"0.9.2"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/js-sdk_0.0.2_1717666764242_0.027110929917368853","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@agiflowai/js-sdk","version":"0.0.3","author":{"name":"Vuong Ngo"},"license":"Business Source License","_id":"@agiflowai/js-sdk@0.0.3","maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"dist":{"shasum":"46122259ca827583643b253ecb9603e2ce24ab02","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.3.tgz","fileCount":118,"integrity":"sha512-AjB8CUwljoyj/te2DPc78GibV4FTVtUsXOANgXoMgtIfQbfn/tTOorYIeA39m659npmSTpbIR8LhYO1oODuVow==","signatures":[{"sig":"MEYCIQCDFLpHuS14umEkktUoby7bmV4mGHCCQsCzRtck2/WAfwIhALrIIP/GPq+tsYs9E+XC/+pFId/OSjYF75iVg5y8jf0f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210570},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"ba545a00c4d607ff301f6eb1f476bafe59f94ba0","scripts":{},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"_npmVersion":"10.2.4","description":"js-sdk for Agiflow","directories":{},"jsnext:main":"./dist/index.js","sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"ulidx":"2.3.0","openapi-fetch":"0.9.2"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/js-sdk_0.0.3_1717669551480_0.03667929695215255","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@agiflowai/js-sdk","version":"0.0.4","author":{"name":"Vuong Ngo"},"license":"Business Source License","_id":"@agiflowai/js-sdk@0.0.4","maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"dist":{"shasum":"ce24d807edf1dd6d58276828d327467f43f6999a","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.4.tgz","fileCount":118,"integrity":"sha512-FUzRoO9+nQxU9uJnjpS2SExemqW3qVHqHsWU/ydD+hyAromhWkbwq9QarEn7mVrKqYIXpW7hwzE1Y+s7VICzPA==","signatures":[{"sig":"MEUCIDV4lNG6Qe8jQTzacXsl5zxKRiyxSrG88tizYgo6OofYAiEAptgUwfC/7lexeX5OKx6xERiULw+YdQXqFn7+Lj39ozE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210589},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"28fda108fdfd15a04b2c4085dffe47a1b9cb9c93","scripts":{},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"_npmVersion":"10.2.4","description":"js-sdk for Agiflow","directories":{},"jsnext:main":"./dist/index.js","sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"ulidx":"2.3.0","openapi-fetch":"0.9.2"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/js-sdk_0.0.4_1718507673657_0.5690221079473734","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@agiflowai/js-sdk","version":"0.0.5","author":{"name":"Vuong Ngo"},"license":"Business Source License","_id":"@agiflowai/js-sdk@0.0.5","dist":{"shasum":"61703ca3435750f4f11c9cb79457061a05fe2b52","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.5.tgz","fileCount":118,"integrity":"sha512-1dmVNGEIoALEL5YdBKTc7lLjkR/j+S9KMskgLO2SSzzwsu5emCUgyBXM2XrOoLSQEFaA+XrWgTEUfnf0eYTr8g==","signatures":[{"sig":"MEQCIDuAt5YQRyf+TyTOx5XZNQwztbW3hcEvW0vEXBgv2hyUAiBE7G8jFC5rIdg7SNUHis132E13oOl4jegCzcdXYyKkRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216270},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"59a83c123b6316a9b78059b4f40f235d330bdbbf","scripts":{},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"_npmVersion":"10.2.4","description":"js-sdk for Agiflow","directories":{},"jsnext:main":"./dist/index.js","sideEffects":false,"_nodeVersion":"20.11.0","dependencies":{"ulidx":"2.3.0","openapi-fetch":"0.9.2"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/js-sdk_0.0.5_1719226951467_0.6617463039802776","host":"s3://npm-registry-packages"}},"0.0.6":{"name":"@agiflowai/js-sdk","version":"0.0.6","description":"Web js-sdk for Agiflow analytics","main":"./dist/index.js","jsnext:main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":false,"homepage":"https://github.com/AgiFlow/agiflow-sdks/tree/main/packages/frontend/js-sdk","publishConfig":{"registry":"https://registry.npmjs.org/"},"dependencies":{"openapi-fetch":"0.9.2","ulidx":"2.3.0","@agiflowai/dataplane-api-client":"0.0.1"},"devDependencies":{"@rushstack/eslint-config":"3.7.0","@types/node":"20.10.5","eslint":"8.57.0","jest":"29.7.0","rollup":"4.17.2","rollup-plugin-copy":"3.4.0","typescript":"5.4.5","@agiflowai/rig-prettier-config":"1.0.1","@agiflowai/rig-eslint-config":"0.0.1","@agiflowai/rig-rollup-config":"0.0.1","@agiflowai/tool-cli":"0.0.1","@agiflowai/rig-typescript-config":"0.0.1"},"author":{"name":"Vuong Ngo"},"license":"MIT","scripts":{"build":"st build ts package","build:watch":"st build ts package --watch","test":"echo \"Error: no test specified\"","lint":"pnpm run lint:js","lint:js":"eslint --ext .ts --ext .tsx src/","lint:js:fix":"eslint --ext .ts --ext .tsx --cache --quiet --fix src/","fixcode":"pnpm run lint:js:fix","typecheck":"tsc --noEmit"},"_id":"@agiflowai/js-sdk@0.0.6","_integrity":"sha512-a6fxqmalNUIWVi5VndyeSsHng7M3nEUfwRtHL3vYiDkWArcLjzTQgJLw9bG1kegka5UbTOZxcFFRns4qrt9CnA==","_resolved":"/private/var/folders/35/_klvbykx3s99bpfh7lcqwrgw0000gn/T/6877304af99f26da51d77029a9bb5350/agiflowai-js-sdk-0.0.6.tgz","_from":"file:agiflowai-js-sdk-0.0.6.tgz","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-a6fxqmalNUIWVi5VndyeSsHng7M3nEUfwRtHL3vYiDkWArcLjzTQgJLw9bG1kegka5UbTOZxcFFRns4qrt9CnA==","shasum":"3298edd145e735e44cbc36337eddfb44274a0ebc","tarball":"https://registry.npmjs.org/@agiflowai/js-sdk/-/js-sdk-0.0.6.tgz","fileCount":152,"unpackedSize":281897,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNlIwR6EamvYgpQIB5/O3DnkcXHh6TuajZCliYnEq3QAiAzOX+qgN/Xqt9Lqhil4GV/+tL2xycnLRX+X7hp1liVOg=="}]},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"directories":{},"maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/js-sdk_0.0.6_1720430848720_0.08349752328931093"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-06T05:43:57.274Z","modified":"2024-07-08T09:27:29.215Z","0.0.1":"2024-06-06T05:43:57.562Z","0.0.2":"2024-06-06T09:39:24.451Z","0.0.3":"2024-06-06T10:25:51.652Z","0.0.4":"2024-06-16T03:14:33.860Z","0.0.5":"2024-06-24T11:02:31.637Z","0.0.6":"2024-07-08T09:27:29.004Z"},"maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"author":{"name":"Vuong Ngo"},"license":"MIT","readme":"# AGIFlow JavaScript SDK Documentation\n\n## Getting Started\n\nTo get started with [AGIFlow JavaScript SDK](https://docs.agiflow.io/web), simply add the package using pnpm:\n\n```bash\npnpm add @agiflowai/js-sdk\n```\n\n## SDK Overview\n\nThe `@agiflowai/js-sdk` provides the following functionalities:\n- Establish user sessions to keep client tracking private to the user.\n- Keep track of user interactions and tracing.\n- Manage feedback widgets and prompts.\n\n## Setup SDK\n\nTo set up the `@agiflowai/js-sdk` client, initialize it once and use `agiflowClient` throughout your application as shown below:\n\n```javascript\nimport { Agiflow } from '@agiflowai/js-sdk';\n\nconst agiflowClient = new Agiflow();\nagiflowClient.init(\n  process.env.CLIENT_KEY // Agiflow client key (please don't use API key here)\n);\n```\n\nYou can find the client key on the Environment > Settings page of the AGIFlow Dashboard.\n\n## Tracing\n\nAGIFlow JavaScript SDK supports both manual and automatic tracing. Automatic tracing is great to get started, but if you need fine-grained control of tracking tags and grouping, manual tracing is a better option.\n\n### Automatic Tracing\n\nTo enable automatic tracing, add an additional setting when initializing the SDK as shown below:\n\n```javascript\nagiflowClient.init('<CLIENT_KEY>', {\n  autoTrace: true,\n});\n```\n\nWhen `autoTrace` is enabled, global fetch requests will be wrapped, and `x-agiflow-trace-id` and `x-agiflow-auto-trace` headers will be sent to the backend.\n\n### Manual Tracing\n\nSimilar to other analytics tools, AGIFlow provides a `track` method to collect useful user metrics on the frontend. This approach allows you to associate frontend metrics with backend traces by passing specific headers to backend APIs. Here are different ways to use manual tracing:\n\n#### Async Tracking\n\nTo automatically capture DOM mutations and display them to users when collecting feedback, wrap your tracking within the `trackAsync` method as shown below:\n\n```javascript\nconst res = await agiflowClient.trackAsync(\n  'summary', // A defined task name\n  async (actionId, headers) => {\n    return await fetch(`...`, {\n      headers,\n    });\n  }\n);\n```\n\n**Explanation of `trackAsync` function:**\n- The first argument is the label of a task.\n- The callback function generates a unique action ID and headers with `x-agiflow-trace-id`, which are passed to the backend for end-to-end tracing (the action ID can be used to collect inline user feedback).\n\n#### Synchronous Tracking\n\nIf you don't want to wrap your API call in a callback or if your DOM mutation happens sometime after the API returns, use the `track` method and manually call `completeAction` to capture the DOM mutation.\n\n```javascript\nconst { headers, actionId } = agiflowClient.track('summary');\nawait fetch(`...`, {\n  headers,\n});\nagiflowClient.completeAction(actionId);\n```\n\n**Explanation of `track` function:**\n- The first argument is the label of a task.\n- The `track` function returns an action ID and headers with `x-agiflow-trace-id`, which are passed to the backend for end-to-end tracing (the action ID can be used to collect inline user feedback).\n- To capture a DOM mutation, call `completeAction` with the action ID.\n\n#### Complete a Task\n\nYou can explicitly mark a task as completed by the user by calling the `completeTask` method. This helps in understanding how users interact with AI products or provides more context for feedback later on.\n\n```javascript\nagiflowClient.completeTask(\n  'summary', // A defined task name\n);\n```\n\nWith `autoTrace` enabled, a task will automatically be marked as completed.\n\n## Feedback\n\nWith every trace, AGIFlow keeps a snapshot of user interactions on the client side, allowing users to rewind and get more context when providing feedback.\n\n### Collecting User Feedback\n\nHere’s how you can collect user feedback on the client side with the AGIFlow SDK:\n\n#### Inline Feedback\n\nYou can use the action ID generated with `track` or `trackAsync` to identify user feedback such as thumbs up/thumbs down directly on the client:\n\n```javascript\nagiflowClient.reportScore(\n  actionId, // Action ID generated from track\n  0.6 // Normalized score\n);\n```\n\n**Normalized Score Conversion Reference:**\n- Thumbs up = 1\n- Thumbs down = 0\n- Rank 0 -> 10 is converted to [0, 1].\n\n#### Feedback Widget\n\nThe feedback widget is a powerful tool to provide feedback on AI output and increase the transparency of your AI application. There are two modes to display the feedback widget:\n\n##### Simple Chat Feedback\n\n```javascript\nconst agiflowClient = new Agiflow();\nagiflowClient.init(\n  process.env.CLIENT_KEY, // Agiflow client key (please don't use API key here)\n  { feedbackPreviews: ['screen'] }\n);\nagiflowClient.openWidget();\n```\n\nWhen users agree to provide feedback, this will replay the screen state when the AI interaction happened.\n\n##### Complex Workflow Feedback\n\n```javascript\nconst agiflowClient = new Agiflow();\nagiflowClient.init(\n  process.env.CLIENT_KEY, // Agiflow client key (please don't use API key here)\n  { feedbackPreviews: ['workflow'] }\n);\nagiflowClient.openWidget();\n```\n\nThis mode displays a workflow chart where users can click on specific components of the AI workflow to review output and provide feedback. This is especially useful for internal tools or B2B businesses.\n\n### Subscribe to Issues Detected by Guardrails\n\nIf you wish to only open the feedback widget when there are issues with the LLM, you can subscribe to new issues and decide to call `openWidget` at any time as shown below:\n\n```javascript\nagiflowClient.subscribeToNewIssue((issue) => {\n  ...\n});\n```\n\nBy following [this documentation](https://docs.agiflow.io/web), you can effectively utilize the AGIFlow JavaScript SDK to track user interactions, collect feedback, and ensure better transparency and control over your AI applications.\n","readmeFilename":"Readme.md","homepage":"https://github.com/AgiFlow/agiflow-sdks/tree/main/packages/frontend/js-sdk"}