feat(example): add interactive CLI demo with @clack/prompts #203
Conversation
Add @clack/prompts ^0.11.0 to the pnpm workspace catalog for building interactive CLI tools with beautiful prompts, spinners, and user input handling.
Add a new example demonstrating how to build an interactive CLI tool for dynamically discovering and executing StackOne tools. Features: - Interactive credential input with environment variable fallback - Dynamic tool discovery via fetchTools() - Interactive tool selection menu with descriptions - Spinner feedback during async operations This provides a user-friendly way to explore and test StackOne tools without hardcoding credentials or tool names.
commit: |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 5 files
Prompt for AI agents (all 1 issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="examples/interactive-cli.ts">
<violation number="1" location="examples/interactive-cli.ts:23">
P2: Rule violated: **Flag Security Vulnerabilities**
Verbose fetch logging is enabled unconditionally, which may expose API credentials in console output. HTTP request logging typically includes Authorization headers containing the API key. Consider making this opt-in via a command-line flag or environment variable check rather than enabling it by default.</violation>
</file>
Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR
| import { StackOneToolSet } from '@stackone/ai'; | ||
|
|
||
| // Enable verbose fetch logging when running with Bun | ||
| process.env.BUN_CONFIG_VERBOSE_FETCH = 'curl'; |
There was a problem hiding this comment.
P2: Rule violated: Flag Security Vulnerabilities
Verbose fetch logging is enabled unconditionally, which may expose API credentials in console output. HTTP request logging typically includes Authorization headers containing the API key. Consider making this opt-in via a command-line flag or environment variable check rather than enabling it by default.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At examples/interactive-cli.ts, line 23:
<comment>Verbose fetch logging is enabled unconditionally, which may expose API credentials in console output. HTTP request logging typically includes Authorization headers containing the API key. Consider making this opt-in via a command-line flag or environment variable check rather than enabling it by default.</comment>
<file context>
@@ -0,0 +1,160 @@
+import { StackOneToolSet } from '@stackone/ai';
+
+// Enable verbose fetch logging when running with Bun
+process.env.BUN_CONFIG_VERBOSE_FETCH = 'curl';
+
+clack.intro('Welcome to StackOne AI Tool Tester');
</file context>
There was a problem hiding this comment.
Pull request overview
This PR adds an interactive CLI example that demonstrates dynamic tool discovery and execution using the @clack/prompts library. The example provides a user-friendly way to explore StackOne tools through interactive prompts and real-time feedback.
Key Changes:
- Added
@clack/promptslibrary to the development catalog for creating interactive CLI experiences - Created new
interactive-cli.tsexample with credential prompts, tool selection menu, and execution feedback - Updated documentation to include the new interactive CLI example in the examples overview
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Adds @clack/prompts ^0.11.0 to the dev catalog for interactive CLI functionality |
| pnpm-lock.yaml | Resolves @clack/prompts and its dependencies (@clack/core, sisteransi, picocolors) |
| examples/package.json | Adds @clack/prompts as a dev dependency to the examples package |
| examples/interactive-cli.ts | New interactive CLI demo with credential input, tool discovery, selection menu, and execution with spinner feedback |
| examples/README.md | Documents the new interactive CLI example with usage instructions and marks it as production ready |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * Features: | ||
| * - Interactive credential input with environment variable fallback | ||
| * - Dynamic tool discovery and selection | ||
| * - Spinner feedback during async operations |
There was a problem hiding this comment.
[nitpick] The file header documentation lists features but omits "Verbose fetch logging when running with Bun" which is mentioned in the PR description and implemented on line 23. For completeness, consider adding this feature to the documentation comment, or clarify that it's an internal implementation detail not intended as a user-facing feature.
| * - Spinner feedback during async operations | |
| * - Spinner feedback during async operations | |
| * - Verbose fetch logging enabled when running with Bun |
|
|
||
| spinner.message('Fetching available tools...'); | ||
| const tools = await toolset.fetchTools(); | ||
| const allTools = tools.toArray(); |
There was a problem hiding this comment.
If allTools is empty (no tools available), the clack.select call will fail or display an empty list, which could confuse users. Consider adding a check after fetching tools to handle this case gracefully:
if (allTools.length === 0) {
clack.log.error('No tools available. Please check your API key and account ID.');
process.exit(1);
}| const allTools = tools.toArray(); | |
| const allTools = tools.toArray(); | |
| if (allTools.length === 0) { | |
| spinner.stop('No tools found'); | |
| clack.log.error('No tools available. Please check your API key and account ID.'); | |
| process.exit(1); | |
| } |
| const result = await selectedTool.execute({ | ||
| query: { limit: 5 }, | ||
| }); |
There was a problem hiding this comment.
Hardcoding { query: { limit: 5 } } as execution parameters may not work for all tools. Different tools have different parameter requirements. Some tools may not accept a query parameter or limit field, which could cause execution failures. Consider either:
- Prompting the user for parameters based on the selected tool's schema
- Using empty parameters
{}for a more generic approach - Adding error handling that explains parameter mismatches
| const result = await selectedTool.execute({ | |
| query: { limit: 5 }, | |
| }); | |
| const result = await selectedTool.execute({}); |
Summary
@clack/promptsto the pnpm workspace dev cataloginteractive-cli.tsexample demonstrating dynamic tool discovery and executionFeatures
fetchTools()BUN_CONFIG_VERBOSE_FETCH=curl)Test plan
npx tsx examples/interactive-cli.tsand verify interactive prompts workSTACKONE_API_KEY,STACKONE_ACCOUNT_ID)Summary by cubic
Add an interactive CLI demo to discover and run StackOne tools. Improves developer experience with prompts, env fallback, and a menu to select tools.
New Features
Dependencies
Written for commit e54cf99. Summary will update automatically on new commits.