AI Prompt Character and Token Estimator 

OutSystems Component — Documentation

1. Overview

AI Prompt Character and Token Estimator is a lightweight, reusable ODC component that gives users real-time visibility into how large their prompt is before it's sent to an AI model.

Drop the block next to any prompt input and it continuously reports:

• Character count
• Word count
• Estimated token count
• Remaining token capacity
• Token usage percentage
• Normal / Warning / Exceeded state, with matching visual styling

Example output (Detailed mode):

Prompt size
608 estimated tokens of 4,000

Characters: 2,430
Words: 405
Remaining: 3,392 tokens

No database, no external API calls, no configuration screen required — just add the block, map two or three inputs, and it works.

2. Component Details

3. Key Features

• Live prompt analysis as the user types
• Character count, word count, and approximate token count
• Remaining-capacity calculation
• Configurable maximum token limit and warning threshold
• Three visual states: Normal, Warning, Exceeded
• Three display modes: Detailed, Compact, Inline
• Optional whitespace normalization
• Optional progress bar and optional metric visibility
• OnEstimateChanged event for wiring up submit buttons or custom logic
• Fully responsive layout
• Zero database dependency

4. Token Estimation Logic

The component uses a standard, model-agnostic approximation:

Estimated Tokens = Ceiling(Character Count / 4)

Example:

Character Count: 2,430
2,430 / 4 = 607.5
Estimated Tokens = 608

This heuristic is deliberately simple and fast, but it is not a substitute for a real tokenizer. Actual token counts will vary based on:

• The specific AI model and its tokenizer
• Language (non-English text often tokenizes differently)
• Punctuation and formatting
• Source code, JSON, or other structured content
• Special characters and emoji

For this reason, every label in the UI intentionally reads "Estimated tokens" rather than "Tokens" — the component is a planning aid, not a billing meter.

5. Block Inputs

Example mapping:

PromptText              = UserPrompt
MaximumTokens           = 4000
WarningThresholdPercent = 80

Whitespace normalization example (display only, source text untouched):

Original:   "Hello    world"
Processed:  "Hello world"

6. Block Event — OnEstimateChanged

Fires every time the estimate is recalculated (i.e., on every relevant keystroke).

Use these outputs to drive application logic, such as enabling/disabling an AI submit button:

SubmitButton.Enabled = Trim(UserPrompt) <> "" and not PromptLimitExceeded

7. Display Modes

Detailed

Shows the full picture: status message, estimated vs. maximum tokens, progress bar, character count, word count, and remaining tokens.Best for: prompt-building screens, RAG applications, AI configuration screens, long-form prompt inputs.

Compact

A single pill-style summary, e.g. 608 estimated tokens of 4000. Detailed metrics and the progress bar are hidden.Best for: chat interfaces, small prompt forms, toolbars, side panels.

Inline

A minimal, card-free estimate, e.g. 608 estimated tokens of 4000.Best for: placement next to a prompt-input label, compact forms, embedded AI controls.

8. Estimator States

In the Exceeded state, remaining tokens are floored at 0 and the progress bar is capped at 100%.

9. Integration Steps

Step 1 — Add the dependency

1. In the consuming ODC application, open Dependencies.
2. Select AIPromptEstimatorLite.
3. Add the public block AIPromptEstimator.
4. Apply the dependency changes.

Step 2 — Create the prompt variableCreate a screen variable named UserPrompt of type Text, and bind your prompt input to it.

Step 3 — Place the blockPosition AIPromptEstimator below or beside the prompt input, and configure it:

PromptText              = UserPrompt
MaximumTokens           = 4000
WarningThresholdPercent = 80
DisplayMode             = "Detailed"
ShowCharacterCount      = True
ShowWordCount           = True
ShowRemainingTokens     = True
ShowProgressBar         = True
NormalizeWhitespace     = True

Step 4 — Handle the eventCreate a Client Action, HandleEstimateChanged, and map the event outputs to screen variables:

CurrentEstimatedTokens = EstimatedTokens
CurrentUsagePercent    = UsagePercent
PromptWarningActive    = IsWarning
PromptLimitExceeded    = IsLimitExceeded

Step 5 — Control prompt submissionConfigure the AI submit button so it can't fire when the limit is exceeded:

Enabled = Trim(UserPrompt) <> "" and not PromptLimitExceeded

10. Example Configurations

AI Chat Input — minimal footprint for a chat box:

PromptText              = UserPrompt
MaximumTokens           = 4000
WarningThresholdPercent = 80
DisplayMode             = "Compact"
ShowCharacterCount      = False
ShowWordCount           = False
ShowRemainingTokens     = False
ShowProgressBar         = False
NormalizeWhitespace     = True

RAG Prompt Builder — full detail for a larger context window:

PromptText              = GeneratedPrompt
MaximumTokens           = 8000
WarningThresholdPercent = 75
DisplayMode             = "Detailed"
ShowCharacterCount      = True
ShowWordCount           = True
ShowRemainingTokens     = True
ShowProgressBar         = True
NormalizeWhitespace     = True

Inline Prompt Helper — tight limit, minimal UI:

PromptText              = UserPrompt
MaximumTokens           = 2000
WarningThresholdPercent = 90
DisplayMode             = "Inline"
ShowCharacterCount      = False
ShowWordCount           = False
ShowRemainingTokens     = False
ShowProgressBar         = False
NormalizeWhitespace     = True

11. Limitations

This component does not use a model-specific tokenizer. The estimate may be less accurate for:

• Non-English text
• Source code
• JSON / XML
• Markdown
• URLs
• Special characters and emoji
• Highly structured prompts

Use a provider-specific tokenizer when exact token counts are required (e.g., for billing or hard enforcement).

The component also only measures the prompt text you give it — it does not automatically account for:

• System prompts
• Conversation history
• Retrieved RAG context
• Tool definitions
• Model output tokens
• Provider-specific metadata

12. Best Practices

• Always describe the result as an estimate, never an exact count.
• Configure MaximumTokens below the model's full context window.
• Reserve capacity for model output tokens.
• Account for system prompts and RAG context separately, outside this component's count.
• Use the Warning state to nudge users before you block submission outright.
• Disable submission only once the Exceeded state is reached.
• Keep whitespace normalization enabled for general free-text prompts.
• Fall back to a model-specific tokenizer wherever exact billing or hard limits matter.

13. Version 1.0.0 Release Notes

• Initial release
• Added live character counting
• Added live word counting
• Added estimated-token calculation
• Added remaining-token calculation
• Added usage-percentage calculation
• Added configurable maximum-token limit
• Added configurable warning threshold
• Added Normal, Warning, and Exceeded states
• Added Detailed, Compact, and Inline modes
• Added optional whitespace normalization
• Added optional progress bar
• Added optional metric visibility
• Added OnEstimateChanged event
• Added responsive styling
• Added demo screen

14. License & Contribution

Distributed under the MIT License. Free for commercial and personal use in any OutSystems ODC or O11 application.