-
Notifications
You must be signed in to change notification settings - Fork 3
docs: Add Promptless Capture documentation page #347
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
6df973c
40c1eec
4ef362b
8f3d199
4f37782
eca97f8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| --- | ||
| title: Environment Variables | ||
| slug: docs/configuring-promptless/environment-variables | ||
| sidebar: | ||
| hidden: false | ||
| order: 24 | ||
| --- | ||
| import Frame from '@components/fern/Frame.astro'; | ||
| import Steps from '@components/fern/Steps.astro'; | ||
| import Step from '@components/fern/Step.astro'; | ||
| import Accordion from '@components/fern/Accordion.astro'; | ||
| import AccordionGroup from '@components/fern/AccordionGroup.astro'; | ||
| import Info from '@components/fern/Info.astro'; | ||
| import Tip from '@components/fern/Tip.astro'; | ||
| import Warning from '@components/fern/Warning.astro'; | ||
|
|
||
| Environment variables store credentials, API keys, and configuration values that Promptless uses when interacting with your systems. Values are securely stored and available to the Promptless agent during documentation tasks. | ||
|
|
||
| ## When to Use Environment Variables | ||
|
|
||
| Environment variables enable Promptless to interact with your systems beyond reading code and documentation. | ||
|
|
||
| ### Screenshot Capture Credentials | ||
|
|
||
| [Promptless Capture](/docs/configuring-promptless/promptless-capture) automatically updates product screenshots when your UI changes. To log into your application and capture screenshots, Promptless needs authentication credentials stored as environment variables. | ||
|
|
||
| ### Feature Flag Access | ||
|
|
||
| If your documentation references features behind feature flags, provide access keys so Promptless can see the complete feature set when capturing screenshots or determining feature availability. | ||
|
|
||
| ### API Keys for Third-Party Services | ||
|
|
||
| Store API keys for services Promptless might need during documentation tasks, such as staging environment endpoints or internal tools. | ||
|
|
||
| ### Staging Environment URLs | ||
|
|
||
| Configure URLs for staging or QA environments where Promptless should capture screenshots, separate from production. | ||
|
|
||
| ## Managing Environment Variables | ||
|
|
||
| <Steps> | ||
| <Step title="Open Settings"> | ||
| Navigate to the [Settings page](https://app.gopromptless.ai/settings) in your Promptless dashboard. | ||
| </Step> | ||
|
|
||
| <Step title="Find Environment Variables"> | ||
| Select the **Environment Variables** section to view and manage your variables. | ||
| </Step> | ||
|
|
||
| <Step title="Add a Variable"> | ||
| Click the **Add Variable** button. Enter a name and value for your variable. Use clear, descriptive names that indicate the variable's purpose. | ||
| </Step> | ||
|
|
||
| <Step title="Mark Sensitive Values as Secret"> | ||
| For passwords, API keys, and other sensitive values, check the **Secret** option. Secret values are encrypted and hidden in the dashboard after saving. | ||
| </Step> | ||
|
|
||
| <Step title="Save Changes"> | ||
| Click **Save** to store your environment variables. | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| <Frame caption="Environment Variables settings page"> | ||
| <img src="https://promptless-customer-doc-assets.s3.us-east-2.amazonaws.com/docs-images/org_2lvkgU9erOFxYhtEVVC0ymPrPdF/env-vars-settings-page-613d84b6.png" alt="Environment Variables settings page showing existing variables and the Add Variable form" /> | ||
| </Frame> | ||
|
|
||
| ## How Variables Are Accessed | ||
|
|
||
| When you create an environment variable, Promptless automatically prefixes it with `PROMPTLESS_` when making it available to the agent. For example: | ||
|
|
||
| | You Create | Agent Accesses | | ||
| |------------|----------------| | ||
| | `TEST_ACCOUNT_USER` | `PROMPTLESS_TEST_ACCOUNT_USER` | | ||
| | `STAGING_API_KEY` | `PROMPTLESS_STAGING_API_KEY` | | ||
| | `FEATURE_FLAG_TOKEN` | `PROMPTLESS_FEATURE_FLAG_TOKEN` | | ||
|
|
||
| This prefixing ensures your variables have a consistent namespace and don't conflict with system variables. | ||
|
|
||
| <Info> | ||
| Variable names are flexible. Use whatever naming convention fits your organization—`TEST_ACCOUNT_USER`, `QA_USERNAME`, `STAGING_LOGIN_EMAIL`, or any descriptive name that makes sense to your team. | ||
| </Info> | ||
|
|
||
| ## Security Considerations | ||
|
|
||
| <Warning> | ||
| Use dedicated test or service accounts for credentials rather than personal accounts. This ensures screenshots don't contain personal data and provides consistent results. | ||
| </Warning> | ||
|
|
||
| ### Secret Variables | ||
|
|
||
| <Frame caption="Adding a secret environment variable"> | ||
| <img src="https://promptless-customer-doc-assets.s3.us-east-2.amazonaws.com/docs-images/org_2lvkgU9erOFxYhtEVVC0ymPrPdF/env-vars-add-form-6a49cb82.png" alt="Add Variable form with Secret checkbox enabled" /> | ||
| </Frame> | ||
|
|
||
| Variables marked as secrets are: | ||
|
|
||
| - Encrypted at rest using industry-standard encryption | ||
| - Never displayed in plain text after saving | ||
| - Not included in logs or audit trails in their raw form | ||
| - Only decrypted when needed by the Promptless agent during execution | ||
|
|
||
| ### Access Control | ||
|
|
||
| Environment variables are organization-scoped. Any project within your organization can access these variables when the Promptless agent runs tasks. | ||
|
|
||
| ## Common Configurations | ||
|
|
||
| Here are typical environment variable setups for common scenarios: | ||
|
|
||
| ### Screenshot Capture Setup | ||
|
|
||
| | Variable | Example Value | Secret? | | ||
| |----------|---------------|---------| | ||
| | `TEST_ACCOUNT_URL` | `https://app.yourcompany.com/login` | No | | ||
| | `TEST_ACCOUNT_USER` | `qa-screenshots@yourcompany.com` | No | | ||
| | `TEST_ACCOUNT_PASS` | `(your password)` | Yes | | ||
|
|
||
| ### Feature Flag Access | ||
|
|
||
| | Variable | Example Value | Secret? | | ||
| |----------|---------------|---------| | ||
| | `LAUNCHDARKLY_SDK_KEY` | `sdk-xxx-yyy` | Yes | | ||
| | `FEATURE_FLAG_ENV` | `staging` | No | | ||
|
|
||
| ### Staging Environment | ||
|
|
||
| | Variable | Example Value | Secret? | | ||
| |----------|---------------|---------| | ||
| | `STAGING_BASE_URL` | `https://staging.yourcompany.com` | No | | ||
| | `STAGING_API_TOKEN` | `(your token)` | Yes | | ||
|
|
||
| <Tip> | ||
| Create a test account with access to all the features you want documented. If certain features require specific permissions or plan tiers, ensure your test account has the appropriate access level. | ||
| </Tip> | ||
|
|
||
| ## Updating and Deleting Variables | ||
|
|
||
| To update an existing variable, locate it in the Environment Variables section and edit its value. For secret variables, you'll need to re-enter the entire value since the original is not displayed. | ||
|
|
||
| To delete a variable, click the delete icon next to the variable. Deleted variables are immediately removed and will no longer be available to the Promptless agent. | ||
|
|
||
| ## Troubleshooting | ||
|
|
||
| <AccordionGroup> | ||
| <Accordion title="Promptless can't log into my application"> | ||
| Verify your credential variables are correct. Check that the login URL, username, and password match what you use to manually log in. If your application uses multi-factor authentication, consider creating a test account that bypasses MFA, or contact help@gopromptless.ai for guidance on handling MFA flows. | ||
| </Accordion> | ||
|
|
||
| <Accordion title="Screenshots show features that should be hidden"> | ||
| Check your feature flag configuration. The test account may have access to features that typical users don't see. Consider creating a test account with permissions that match your target documentation audience. | ||
| </Accordion> | ||
|
|
||
| <Accordion title="Environment variable changes aren't reflected"> | ||
| After updating environment variables, changes take effect on the next task execution. Variables are loaded fresh for each task, so recent changes will be picked up automatically. | ||
| </Accordion> | ||
| </AccordionGroup> | ||
|
|
||
| Need help configuring environment variables? Contact us at help@gopromptless.ai. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| --- | ||
| title: Promptless Capture | ||
| slug: docs/configuring-promptless/promptless-capture | ||
| sidebar: | ||
| hidden: false | ||
| order: 25 | ||
| --- | ||
| import Frame from '@components/fern/Frame.astro'; | ||
| import Steps from '@components/fern/Steps.astro'; | ||
| import Step from '@components/fern/Step.astro'; | ||
| import Accordion from '@components/fern/Accordion.astro'; | ||
| import AccordionGroup from '@components/fern/AccordionGroup.astro'; | ||
| import Info from '@components/fern/Info.astro'; | ||
| import Tip from '@components/fern/Tip.astro'; | ||
| import Note from '@components/fern/Note.astro'; | ||
| import Warning from '@components/fern/Warning.astro'; | ||
|
|
||
| Promptless Capture keeps product screenshots in sync with your UI. When code changes affect a documented feature, Promptless Capture identifies which screenshots need updating and regenerates them from your current interface. | ||
|
|
||
| <Info> | ||
| Promptless Capture must be enabled for your organization by the Promptless team. Reach out to help@gopromptless.ai or contact us via Slack to get started. | ||
| </Info> | ||
|
|
||
| ## How Promptless Capture Works | ||
|
|
||
| When a trigger fires that might affect documented UI elements, Promptless Capture: | ||
|
|
||
| - **Analyzes code changes** to identify which features were modified | ||
| - **Cross-references your documentation** to find screenshots showing those features | ||
| - **Navigates to your application** using stored credentials | ||
| - **Captures fresh screenshots** of affected UI | ||
| - **Crops images** to focus on relevant UI elements and draws annotations | ||
|
|
||
| ### Feature Detection from Code | ||
|
|
||
| Promptless Capture examines code changes to understand which product features were modified, including: | ||
|
|
||
| - Component names and file paths | ||
| - UI element changes (buttons, forms, dialogs, navigation) | ||
| - Route changes that affect page structure | ||
| - CSS/styling changes that alter visual appearance | ||
|
|
||
| This analysis identifies which existing documentation screenshots might be outdated. | ||
|
|
||
| ### Automatic Cropping | ||
|
|
||
| After capturing a full-page screenshot, Promptless Capture automatically crops the image to focus on the relevant UI element. The cropping logic uses: | ||
|
|
||
| - DOM element boundaries to identify interactive components | ||
| - Visual heuristics to determine optimal crop regions | ||
| - Context from the documentation to understand what the screenshot should highlight | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Environment Variables section based on February 2026 changelog entry for "Environment Variables for Agent Credentials" which documents storing credentials for screenshot testing with PROMPTLESS_ prefix and Settings → Environment Variables location. Source: https://github.com/Promptless/docs/blob/main/src/content/changelog/changelogs/february-2026.mdx |
||
|
|
||
| The result is clean, focused screenshots that show exactly what the documentation needs. | ||
|
|
||
| ## Setting Up Environment Variables | ||
|
|
||
| Promptless Capture needs credentials to authenticate with your application. Configure these as environment variables in your organization settings. | ||
|
|
||
| <Steps> | ||
| <Step title="Navigate to Settings"> | ||
| Go to the [Settings page](https://app.gopromptless.ai/settings) in your Promptless dashboard and select the **Environment Variables** section. | ||
| </Step> | ||
|
|
||
| <Step title="Add Credential Variables"> | ||
| Add variables for your application's login credentials. The variable names are flexible—use whatever naming convention works for your team. For example: | ||
|
|
||
| | Variable Name | Description | Mark as Secret | | ||
| |---------------|-------------|----------------| | ||
| | `TEST_ACCOUNT_URL` | The login URL for your application | No | | ||
| | `TEST_ACCOUNT_USER` | Username or email for the test account | No | | ||
| | `TEST_ACCOUNT_PASS` | Password for the test account | Yes | | ||
|
|
||
| You might use names like `STAGING_LOGIN_URL`, `QA_USER`, or any descriptive names that fit your organization's conventions. | ||
| </Step> | ||
|
|
||
| <Step title="Save Variables"> | ||
| Click **Save** to store your environment variables. Variables marked as secrets will have their values hidden after saving. | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| <Warning> | ||
| Use a dedicated test account for screenshot capture rather than a personal or production account. This ensures screenshots don't contain sensitive data and provides a consistent UI state. | ||
| </Warning> | ||
|
|
||
| ### How Variables Are Used | ||
|
|
||
| Environment variables you define are automatically available to the Promptless agent with a `PROMPTLESS_` prefix. For example, if you create a variable named `TEST_ACCOUNT_USER`, the agent accesses it as `PROMPTLESS_TEST_ACCOUNT_USER`. | ||
|
|
||
| The agent uses these credentials to: | ||
|
|
||
| 1. Navigate to your login page | ||
| 2. Authenticate with the stored credentials | ||
| 3. Navigate to the relevant product pages | ||
| 4. Capture screenshots of the documented features | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Calibration section addresses prithvi's request to document how users can "iterate quickly on some test cases to ensure that promptless is good" - the section covers running test captures and common issues to resolve. Source: https://Promptless.slack.com/archives/C08RZNK94GN/p1774933783627149 |
||
|
|
||
| <Tip> | ||
| Create a test account with access to all features you want to document. If certain features require specific permissions or plan tiers, ensure your test account has the appropriate access level. | ||
| </Tip> | ||
|
|
||
| ## Calibration | ||
|
|
||
| Calibration ensures Promptless Capture works correctly for your application. A Promptless team member will typically set up a calibration session with you to review initial screenshots and refine the configuration. During this session, you'll identify any adjustments needed for your login flow, navigation, or screenshot cropping. | ||
|
|
||
| ### Running Test Captures | ||
|
|
||
| To test screenshot capture: | ||
|
|
||
| <Steps> | ||
| <Step title="Start a Manual Task"> | ||
| Go to the [New Task page](https://app.gopromptless.ai/new-task) and request a documentation update that involves screenshots. | ||
| </Step> | ||
|
|
||
| <Step title="Review the Results"> | ||
| Check the suggestion to see if screenshots were captured correctly. Look for: | ||
| - Successful authentication (no login screens in screenshots) | ||
| - Correct page navigation (screenshots show the intended feature) | ||
| - Appropriate cropping (relevant UI elements are visible) | ||
| </Step> | ||
|
|
||
| <Step title="Iterate on Configuration"> | ||
| If screenshots aren't captured correctly, adjust your environment variables or provide additional context in your Long-Term Context files. | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| ### Common Calibration Issues | ||
|
|
||
| <AccordionGroup> | ||
| <Accordion title="Screenshots show the login page"> | ||
| The credentials may be incorrect, or the login flow may require additional steps. Verify your `TEST_ACCOUNT_URL`, `TEST_ACCOUNT_USER`, and `TEST_ACCOUNT_PASS` variables are correct. If your application uses multi-factor authentication, consider creating a test account that bypasses MFA or contact help@gopromptless.ai for guidance. | ||
| </Accordion> | ||
|
|
||
| <Accordion title="Screenshots capture the wrong page"> | ||
| Promptless may need additional navigation guidance. You can add instructions in your Long-Term Context to describe how to navigate to specific features. Include details about menu paths, URL patterns, or button sequences needed to reach documented screens. | ||
| </Accordion> | ||
|
|
||
| <Accordion title="Cropping cuts off important elements"> | ||
| The automatic cropping may need refinement. You can use the Screenshot Editor in the Promptless dashboard to manually adjust crops, or provide feedback that Promptless will learn from for future captures. | ||
| </Accordion> | ||
|
|
||
| <Accordion title="Screenshots show loading states or spinners"> | ||
| The page may not have fully loaded before capture. Contact help@gopromptless.ai if you consistently see loading states in your screenshots. | ||
| </Accordion> | ||
| </AccordionGroup> | ||
|
|
||
| ## Screenshot Editor | ||
|
|
||
| After Promptless captures screenshots, you can refine them in the built-in Screenshot Editor. Click any image in the Created Assets section to open the editor. | ||
|
|
||
| ### Editing Tools | ||
|
|
||
| The editor includes tools to refine your screenshots: | ||
|
|
||
| - **Crop** to focus on specific UI elements | ||
| - **Annotate** with arrows, boxes, and highlights | ||
| - **Add text** to call out features | ||
| - **Adjust** image dimensions | ||
|
|
||
| ### Managing Edits | ||
|
|
||
| The toolbar provides controls for your editing session: | ||
|
|
||
| - **Save edits** commits changes to the screenshot | ||
| - **Reset edits** discards unsaved changes and reverts to the last saved version—useful for starting over without closing the editor | ||
| - **Cancel Crop** exits crop mode without applying the crop, letting you adjust the selection or switch tools | ||
|
|
||
| Saved changes are immediately reflected in your documentation suggestions. | ||
|
|
||
| ## When Screenshots Update Automatically | ||
|
|
||
| Promptless Capture monitors your triggers and automatically updates screenshots when: | ||
|
|
||
| - A GitHub PR modifies UI components referenced in documentation | ||
| - A commit changes routes, layouts, or visual styling | ||
| - You explicitly request a screenshot update via Slack or the web interface | ||
|
|
||
| <Info> | ||
| Screenshots are only regenerated when Promptless detects changes that likely affect documented UI. Minor code changes that don't impact the visual interface won't trigger unnecessary screenshot updates. | ||
| </Info> | ||
|
|
||
| Need help setting up Promptless Capture? Contact us at help@gopromptless.ai. | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Intro paragraph based on Promptless Capture description from promptless-1-0.mdx: "Keeps product screenshots automatically in sync with your UI. When code changes impact a screenshot, Promptless detects which images need updating and regenerates them with your current interface."
Source: https://github.com/Promptless/docs/blob/main/src/content/docs/docs/getting-started/promptless-1-0.mdx