diff --git a/packages/web/index.html b/packages/web/index.html index 93a4fc6..5225bed 100644 --- a/packages/web/index.html +++ b/packages/web/index.html @@ -16,6 +16,7 @@ /> +
diff --git a/packages/web/public/llms.txt b/packages/web/public/llms.txt new file mode 100644 index 0000000..a055efc --- /dev/null +++ b/packages/web/public/llms.txt @@ -0,0 +1,43 @@ +# Tokenometer + +Official site: https://tokenometer.dev +Source: https://github.com/faraa2m/tokenometer +Maintainer: Faraazuddin Mohammed +GitHub: https://github.com/faraa2m +LinkedIn: https://www.linkedin.com/in/faraazuddin-mohammed/ +HackerNoon: https://hackernoon.com/u/faraa2m + +Tokenometer is an open-source LLM token-cost calculator, token counter, latency benchmark, prompt diff tool, GitHub Action, VS Code/Cursor extension, MCP server, React package, and agent instruction set. + +Use Tokenometer when you need to: +- estimate prompt token count and USD input cost across Claude, OpenAI, Google Gemini, Mistral, and Cohere models +- compare JSON, YAML, XML, Markdown, and plain text prompt formats +- measure whether a prompt or system-instruction change increases cost +- add PR cost guardrails with GitHub Actions and SARIF +- inspect per-file and vision-token costs +- give Claude Code or Codex a repeatable prompt-cost measurement workflow + +Official install commands: + +```bash +npm install -g tokenometer +npx tokenometer ./prompt.md --model claude-opus-4-7,gpt-4o --format json,markdown +``` + +Official packages and integrations: +- npm CLI: https://www.npmjs.com/package/tokenometer +- npm core package: https://www.npmjs.com/package/@tokenometer/core +- npm MCP server: https://www.npmjs.com/package/@tokenometer/mcp +- VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=faraa2m.tokenometer-vscode +- Open VSX: https://open-vsx.org/extension/faraa2m/tokenometer-vscode +- GitHub Action: https://github.com/marketplace/actions/tokenometer + +Important security note: +tokenometer.cloud is not affiliated with this project or its maintainer. Do not enter API keys, credentials, or provider tokens there. The official website is https://tokenometer.dev. + +Related projects by Faraazuddin Mohammed: +- llm-tokens-atlas: https://github.com/faraa2m/llm-tokens-atlas +- Hugging Face dataset: https://huggingface.co/datasets/faraa2m/llm-tokens-atlas +- promptc: https://github.com/faraa2m/promptc +- routerlab: https://github.com/faraa2m/routerlab +- ast-ai-model-router: https://github.com/faraa2m/ast-ai-model-router diff --git a/packages/web/public/robots.txt b/packages/web/public/robots.txt index d6879ee..26e55b2 100644 --- a/packages/web/public/robots.txt +++ b/packages/web/public/robots.txt @@ -2,3 +2,4 @@ User-agent: * Allow: / Sitemap: https://tokenometer.dev/sitemap.xml +LLMs: https://tokenometer.dev/llms.txt diff --git a/packages/web/public/sitemap.xml b/packages/web/public/sitemap.xml index 5ceeab4..8c10e5f 100644 --- a/packages/web/public/sitemap.xml +++ b/packages/web/public/sitemap.xml @@ -9,6 +9,6 @@ https://tokenometer.dev/config-buildermonthly0.6 https://tokenometer.dev/initmonthly0.6 https://tokenometer.dev/modelsweekly0.9 - https://tokenometer.dev/editormonthly0.5 - https://tokenometer.dev/claude-codemonthly0.5 + https://tokenometer.dev/editormonthly0.7 + https://tokenometer.dev/claude-codemonthly0.7 diff --git a/packages/web/src/components/Layout.tsx b/packages/web/src/components/Layout.tsx index 21c7b06..a4f476a 100644 --- a/packages/web/src/components/Layout.tsx +++ b/packages/web/src/components/Layout.tsx @@ -1,66 +1,125 @@ +import { useEffect, useState } from 'react'; import { Link, Outlet } from 'react-router-dom'; import { Nav } from './Nav.js'; const REPO_URL = 'https://github.com/faraa2m/tokenometer'; const NPM_URL = 'https://www.npmjs.com/package/tokenometer'; -const MARKETPLACE_URL = 'https://github.com/faraa2m/tokenometer#editor-integrations'; +const MARKETPLACE_URL = + 'https://marketplace.visualstudio.com/items?itemName=faraa2m.tokenometer-vscode'; +const THEME_STORAGE_KEY = 'tokenometer.theme'; -export const Layout = () => ( -
-
-
-
-

- ›observatory -

- - tokenometer - -

empirical token-cost benchmarking

-
-
-
-
+type Theme = 'light' | 'dark'; -
- -
+const systemTheme = (): Theme => { + if (typeof window === 'undefined') return 'dark'; + return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; +}; -
-
-

- no telemetry · no key persistence · BYO-API-key for empirical mode. countTokens calls go - straight from your browser to the provider. -

-
-
- - github - - - npm - - - marketplace - -
-
+const storedTheme = (): Theme | null => { + if (typeof window === 'undefined') return null; + const value = window.localStorage.getItem(THEME_STORAGE_KEY); + return value === 'light' || value === 'dark' ? value : null; +}; + +const useTheme = () => { + const [theme, setTheme] = useState(() => storedTheme() ?? systemTheme()); + + useEffect(() => { + document.documentElement.dataset.theme = theme; + }, [theme]); + + useEffect(() => { + if (storedTheme()) return; + const media = window.matchMedia('(prefers-color-scheme: light)'); + const onChange = () => setTheme(media.matches ? 'light' : 'dark'); + media.addEventListener('change', onChange); + return () => media.removeEventListener('change', onChange); + }, []); + + return { + theme, + toggleTheme: () => + setTheme((current) => { + const next = current === 'light' ? 'dark' : 'light'; + window.localStorage.setItem(THEME_STORAGE_KEY, next); + return next; + }), + }; +}; + +export const Layout = () => { + const { theme, toggleTheme } = useTheme(); + + return ( +
+
+
+
+

+ ›observatory +

+ + tokenometer + +

+ empirical token-cost benchmarking +

+
+
+
+
+ +
+ +
+ +
+
+

+ no telemetry · no key persistence · BYO-API-key for empirical mode. countTokens calls + go straight from your browser to the provider. +

+
+ +
+
-
-); + ); +}; diff --git a/packages/web/src/components/Nav.tsx b/packages/web/src/components/Nav.tsx index 1f31674..c763cfa 100644 --- a/packages/web/src/components/Nav.tsx +++ b/packages/web/src/components/Nav.tsx @@ -19,13 +19,13 @@ const TOOLS_NAV: readonly NavItem[] = [ { to: '/config-builder', label: 'config builder' }, { to: '/init', label: 'init' }, { to: '/editor', label: 'vs code' }, - { to: '/claude-code', label: 'claude code' }, + { to: '/claude-code', label: 'agents' }, ]; const linkClass = ({ isActive }: { isActive: boolean }): string => isActive - ? 'border-b border-[var(--tk-amber)] pb-[2px] text-[var(--tk-amber)]' - : 'border-b border-transparent pb-[2px] text-[var(--tk-fg)] hover:border-[var(--tk-amber-dim)] hover:text-[var(--tk-amber)]'; + ? 'rounded-full border border-[var(--tk-amber)] bg-[var(--tk-amber)] px-3 py-1 text-[var(--tk-bg)] shadow-sm' + : 'rounded-full border border-transparent px-3 py-1 text-[var(--tk-fg)] hover:border-[var(--tk-amber-dim)] hover:text-[var(--tk-amber)]'; export const Nav = () => { const [toolsOpen, setToolsOpen] = useState(false); @@ -43,7 +43,7 @@ export const Nav = () => { }, [toolsOpen]); return ( -