feat: Add Claude Code (Agent SDK) provider with UI configuration #1878
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add support for ai-sdk-provider-claude-code to enable Claude models via the Claude Agent SDK with Pro/Max subscription or API key. Changes: - Install ai-sdk-provider-claude-code package - Add claude-code provider to CLOUD_PROVIDERS and MODEL_OPTIONS - Add three model variants: sonnet, opus, haiku - Implement provider case in get_model_client.ts - Support both subscription mode and optional API key mode This integration allows users to leverage Claude Agent SDK features like MCP integration and Extended Thinking through Dyad.
Add pathToClaudeCodeExecutable setting to claudeCode provider to ensure the CLI can be found via system PATH. This fixes the error: "Claude Code executable not found at .vite/build/cli.js" The provider now uses "claude" command from system PATH, which should be available after installing @anthropic-ai/claude-code.
Add IPC layer to manage Claude Code provider settings including executable path and API key configuration. - Add ClaudeCodeProviderSetting schema - Implement claude_code_handlers.ts for settings management - Add checkClaudeCliExists IPC method - Register IPC channels in whitelist
Implement configurable Claude CLI executable path with priority: 1. User settings (claudeExecutablePath) 2. Environment variable (CLAUDE_CODE_EXECUTABLE_PATH) 3. Default path ($HOME/.local/bin/claude) Includes home directory expansion (~/) support for path configuration.
Add dedicated configuration UI for Claude Code provider with: - ClaudeCodeConfiguration component for executable path and API key - Integration with ApiKeyConfiguration routing - Consistent setup detection in ProviderSettingsPage
Enhance provider setup detection to check Claude CLI executable existence for claude-code provider. Uses IPC query with caching for optimal performance.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
3 issues found across 13 files
Prompt for AI agents (all 3 issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="src/components/settings/ClaudeCodeConfiguration.tsx">
<violation number="1" location="src/components/settings/ClaudeCodeConfiguration.tsx:69">
P2: Trim whitespace from the API key before persisting so copies with trailing spaces/newlines don’t break authentication.</violation>
<violation number="2" location="src/components/settings/ClaudeCodeConfiguration.tsx:116">
P2: Persist the trimmed executable path so accidental whitespace doesn’t break CLI detection.</violation>
</file>
<file name="src/components/settings/ProviderSettingsPage.tsx">
<violation number="1" location="src/components/settings/ProviderSettingsPage.tsx:115">
P2: `isProviderSetup(provider)` treats any truthy API key as configured, so placeholder values like "Invalid Key…" or "Not Set" now mark the provider as configured and hide that setup is still required.</violation>
</file>
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Ask questions if you need clarification on any suggestion
Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR
| ? isVertexConfigured | ||
| : isValidUserKey || hasEnvKey; // Configured if either is set | ||
| // Use isProviderSetup from useLanguageModelProviders hook for consistent logic | ||
| const isConfigured = isProviderSetup(provider); |
Contributor
There was a problem hiding this comment.
P2: isProviderSetup(provider) treats any truthy API key as configured, so placeholder values like "Invalid Key…" or "Not Set" now mark the provider as configured and hide that setup is still required.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/settings/ProviderSettingsPage.tsx, line 115:
<comment>`isProviderSetup(provider)` treats any truthy API key as configured, so placeholder values like "Invalid Key…" or "Not Set" now mark the provider as configured and hide that setup is still required.</comment>
<file context>
@@ -110,12 +111,8 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
- ? isVertexConfigured
- : isValidUserKey || hasEnvKey; // Configured if either is set
+ // Use isProviderSetup from useLanguageModelProviders hook for consistent logic
+ const isConfigured = isProviderSetup(provider);
// --- Save Handler ---
</file context>
- Trim whitespace from API key before persisting to prevent authentication issues - Trim whitespace from executable path before persisting to prevent CLI detection issues - Fix isProviderSetup to reject placeholder values like "Invalid Key" and "Not Set"
mitsuru
force-pushed
the
feature/claude-code-provider
branch
from
cc1479f to
951f0ed
Compare
wwwillchen
requested changes
Dec 6, 2025
Contributor
wwwillchen
left a comment
wwwillchen
left a comment
There was a problem hiding this comment.
thanks for the PR! I pulled it down and overall looks pretty good. i left a few comments.
can you add an e2e test? see - https://github.com/dyad-sh/dyad/blob/main/CONTRIBUTING.md#e2e-tests
here's an e2e test that you can model it after
https://github.com/dyad-sh/dyad/blob/main/e2e-tests/azure_provider_settings.spec.ts
| console.error("Error checking Claude CLI existence:", error); | ||
| return false; | ||
| } | ||
| }, |
Contributor
There was a problem hiding this comment.
i think this is really low - let's use the default value (which i think is 5 mins) - the user should be able invalidate this if needed by clicking on a button
| const expandHomeDir = (filePath: string): string => { | ||
| if (filePath.startsWith("~/")) { | ||
| const homeDir = process.env.HOME || process.env.USERPROFILE || ""; | ||
| return path.join(homeDir, filePath.slice(2)); |
Contributor
There was a problem hiding this comment.
can we use safeJoin from path_utils?
| `Using Claude Code provider: ${model.name}${apiKey ? " with API key" : " (subscription mode)"}`, | ||
| ); | ||
|
|
||
| // Helper function to expand ~ to home directory |
Contributor
There was a problem hiding this comment.
some of this code looks duplicated with claude_code_handlers.ts - let's extract into a proper utils file and reuse it.
|
|
||
| // Default path for display | ||
| const homeDir = "~"; | ||
| const defaultClaudePath = `${homeDir}/.local/bin/claude`; |
Contributor
There was a problem hiding this comment.
on my computer (macos) claude is installed at:
~/.claude/local/claude
Should this be conditioned based on OS?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add comprehensive Claude Code (Agent SDK) provider integration with full UI configuration support. This enables users to use Claude models through the Agent SDK with either Pro/Max subscription or API key authentication.
Closes #503
Key Features
ai-sdk-provider-claude-codepackage with three model variants (sonnet, opus, haiku)claude login) and optional API keyCLAUDE_CODE_EXECUTABLE_PATH)$HOME/.local/bin/claude)~/expansion for path configurationImplementation Details
ClaudeCodeProviderSettingfor type-safe configuration storageClaudeCodeConfigurationcomponent with executable path and API key inputsChanges
ai-sdk-provider-claude-codepackage dependencyget_model_client.tswith configurable CLI pathClaudeCodeConfigurationcomponent for settings UIBenefits