Prompt Token Counter

\n System Prompt:\n setSystemPrompt(e.target.value)}\n rows=\"4\"\n placeholder=\"Enter the system prompt here. This sets the context for the AI's behavior.\"\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n User Prompt:\n setUserPrompt(e.target.value)}\n rows=\"4\"\n placeholder=\"Enter the user prompt here. This is the specific question or instruction for the AI.\"\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n Tools definition (JSON format):\n setTools(e.target.value)}\n rows=\"4\"\n placeholder=\"Enter tool definitions in JSON format. Leave empty if not using tools.\"\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n Model family:\n setModelFamily(e.target.value)}\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n >\n \n \n \n

\n {modelFamily === \"Anthropic\" && (\n

\n Anthropic API Key:\n handleApiKeyChange(e, setAnthropicApiKey, \"anthropicApiKey\")}\n placeholder=\"Enter your Anthropic API key\"\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n )}\n {modelFamily === \"Google Gemini\" && (\n

\n Google Gemini API Key:\n handleApiKeyChange(e, setGeminiApiKey, \"geminiApiKey\")}\n placeholder=\"Enter your Google Gemini API key\"\n className=\"w-full p-2 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n

\n )}\n \n {isLoading ? \"Processing...\" : \"Submit\"}\n \n \n {tokenCount !== null &&

Token Count: {tokenCount}

}\n

\n \n View source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/api/count-tokens\") {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n\n const { Anthropic } = await import(\"https://esm.sh/@anthropic-ai/sdk\");\n const { apiKey, systemPrompt, userPrompt, tools } = await request.json();\n\n const anthropic = new Anthropic({ apiKey });\n const countRequest = {\n betas: [\"token-counting-2024-11-01\"],\n model: \"claude-3-5-sonnet-20241022\",\n system: systemPrompt,\n messages: [{ role: \"user\", content: userPrompt }],\n };\n\n if (tools) {\n try {\n const parsedTools = JSON.parse(tools);\n countRequest.tools = parsedTools;\n } catch (error) {\n console.error(\"Error parsing tools JSON:\", error);\n }\n }\n\n try {\n const response = await anthropic.beta.messages.countTokens(countRequest);\n return new Response(JSON.stringify({ tokenCount: response.input_tokens }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error counting tokens for Anthropic:\", error);\n return new Response(JSON.stringify({ error: \"Failed to count tokens\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (url.pathname === \"/api/generate-anthropic\") {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n\n const { Anthropic } = await import(\"https://esm.sh/@anthropic-ai/sdk\");\n const { apiKey, systemPrompt, userPrompt } = await request.json();\n\n const anthropic = new Anthropic({ apiKey });\n\n try {\n const completion = await anthropic.completions.create({\n model: \"claude-2\",\n prompt: `${systemPrompt}\\n\\nHuman: ${userPrompt}\\n\\nAssistant:`,\n max_tokens_to_sample: 1000,\n });\n return new Response(JSON.stringify({ completion: completion.completion }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error generating content with Anthropic:\", error);\n return new Response(JSON.stringify({ error: \"Failed to generate content\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Prompt Token Counter\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label","prashamtrivedi-tokencounter",[99],"permalink","https://www.val.town/x/prashamtrivedi/tokencounter/code/main.tsx","extension","actionData","errors"]