Add Anthropic Claude AI integration with full-stack support#13
Draft
Copilot wants to merge 5 commits into
Draft
Conversation
Co-authored-by: lippytm <65956507+lippytm@users.noreply.github.com>
Co-authored-by: lippytm <65956507+lippytm@users.noreply.github.com>
Co-authored-by: lippytm <65956507+lippytm@users.noreply.github.com>
Co-authored-by: lippytm <65956507+lippytm@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add full stack AI tools and toolkits for Claude
Add Anthropic Claude AI integration with full-stack support
Jan 24, 2026
There was a problem hiding this comment.
Pull request overview
This PR introduces Anthropic Claude as a first-class AI provider alongside OpenAI, adding backend support via the official SDK, frontend controls for provider/model selection, and extensive documentation and testing guidance for the new functionality.
Changes:
- Backend: Added
ClaudeService,ClaudeController, routes under/api/claude/*, config forANTHROPIC_API_KEY, and integrated persistence into existing PostgreSQL and MongoDB services. - Frontend: Extended the prompt interface with an AI provider dropdown and Claude model selection, and added a dedicated
ClaudeToolkitcomponent for code generation and analysis. - Documentation & tooling: Added detailed Claude integration docs (
CLAUDE_INTEGRATION.md,CLAUDE_QUICK_REFERENCE.md,CLAUDE_SUMMARY.md), updated setup and testing guides, and wired the new provider into environment templates and README.
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
frontend/src/services/api.service.ts |
Adds a Claude-specific API surface (text, summarize, custom prompt, conversation, code analyze/generate, history) parallel to existing OpenAI methods, routing to /api/claude/* endpoints. |
frontend/src/components/PromptInterface/PromptInterface.tsx |
Extends the prompt UI with an AI provider dropdown (OpenAI/Claude), dynamic model list swapping based on provider, and conditional use of Claude vs OpenAI backend endpoints. |
frontend/src/components/ClaudeToolkit/ClaudeToolkit.tsx |
New tabbed React component providing Claude-powered code generation and analysis workflows across multiple languages, with loading/error handling and result rendering. |
frontend/src/App.tsx |
Registers the new ClaudeToolkit component as a top-level tab and updates the tab navigation to include it. |
backend/src/services/claude.service.ts |
Implements a ClaudeService using @anthropic-ai/sdk with methods for text generation, summarization, custom prompts, multi-turn conversations, and code-specific prompts. |
backend/src/routes/claude.routes.ts |
Defines the 7 new /api/claude/* REST routes and wires them to the ClaudeController. |
backend/src/index.ts |
Mounts the new Claude routes under /api/claude and adds a startup log line advertising the Claude API base URL. |
backend/src/controllers/claude.controller.ts |
Provides Claude-specific controller methods for all new endpoints including validation, integration with Postgres and Mongo, and filtered history retrieval. |
backend/src/config/index.ts |
Adds anthropic configuration for loading ANTHROPIC_API_KEY from the environment. |
backend/package.json / backend/package-lock.json |
Introduces the @anthropic-ai/sdk dependency and associated transitive dependencies for backend Claude integration. |
backend/.env.example |
Documents ANTHROPIC_API_KEY for backend configuration. |
.env.example |
Adds a commented ANTHROPIC_API_KEY entry at the root level to surface Claude support in global configuration. |
TESTING.md |
Extends manual testing checklist and scenarios to cover Claude endpoints, UI flows (provider switch, Claude Toolkit), and clarifies that tests may use either/both providers. |
README.md |
Updates project feature list and setup notes to mention Anthropic Claude, the Claude toolkit, and required API keys. |
FULLSTACK_SETUP.md |
Expands the architecture overview, setup instructions, troubleshooting, and security notes to include Claude, plus adds a section describing Claude-specific features and usage tips. |
CLAUDE_SUMMARY.md |
New high-level summary of all Claude-related files, endpoints, features, statistics, and integration points across the stack. |
CLAUDE_QUICK_REFERENCE.md |
New quick reference with endpoint shapes, frontend usage snippets, model comparisons, and operational best practices for Claude. |
CLAUDE_INTEGRATION.md |
New in-depth guide for configuring, calling, and tuning Claude within this project, including examples and troubleshooting. |
Files not reviewed (1)
- backend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+246
to
+251
| // Filter for Claude outputs | ||
| const claudeOutputs = outputs.filter( | ||
| (output: any) => output.metadata?.provider === 'anthropic' | ||
| ); | ||
|
|
||
| res.json({ outputs: claudeOutputs }); |
There was a problem hiding this comment.
In this history endpoint, the limit is applied before filtering by metadata.provider === 'anthropic', so GET /api/claude/history?limit=N can return fewer than N Claude records or even none if the most recent entries are from other providers, despite older Claude records existing. To make the API behavior match the route description ("Get Claude AI output history"), consider applying the provider filter at the database query level (e.g., via a dedicated getAIOutputsByProvider helper) so the limit is enforced on Claude-only records.
Suggested change
| // Filter for Claude outputs | |
| const claudeOutputs = outputs.filter( | |
| (output: any) => output.metadata?.provider === 'anthropic' | |
| ); | |
| res.json({ outputs: claudeOutputs }); | |
| // Filter for Claude outputs, then apply the limit to the filtered list | |
| const claudeOutputs = outputs.filter( | |
| (output: any) => output.metadata?.provider === 'anthropic' | |
| ); | |
| const limitedClaudeOutputs = claudeOutputs.slice(0, limit); | |
| res.json({ outputs: limitedClaudeOutputs }); |
| - **OpenAI**: Better for embeddings and general-purpose tasks | ||
| - **Use Both**: Switch between providers based on your needs | ||
|
|
||
| For detailed Claude integration guide, see [CLAUDE_INTEGRATION.md](../CLAUDE_INTEGRATION.md) |
There was a problem hiding this comment.
The link to the Claude integration guide uses ../CLAUDE_INTEGRATION.md, but since this file lives at the repository root alongside CLAUDE_INTEGRATION.md, that relative path will be broken in rendered Markdown. It should reference the file in the same directory (for example, CLAUDE_INTEGRATION.md) to ensure the link works correctly on GitHub and other viewers.
Suggested change
| For detailed Claude integration guide, see [CLAUDE_INTEGRATION.md](../CLAUDE_INTEGRATION.md) | |
| For detailed Claude integration guide, see [CLAUDE_INTEGRATION.md](CLAUDE_INTEGRATION.md) |
Comment on lines
+22
to
+41
| ### Backend Services | ||
| 3. **backend/src/services/claude.service.ts** (125 lines) | ||
| - ClaudeService class | ||
| - 6 core methods | ||
| - Anthropic SDK integration | ||
| - Error handling | ||
|
|
||
| 4. **backend/src/controllers/claude.controller.ts** (259 lines) | ||
| - ClaudeController class | ||
| - 7 REST API endpoints | ||
| - Database integration | ||
| - Request validation | ||
|
|
||
| 5. **backend/src/routes/claude.routes.ts** (55 lines) | ||
| - Express route definitions | ||
| - Endpoint documentation | ||
| - RESTful routing | ||
|
|
||
| ### Frontend Components | ||
| 6. **frontend/src/components/ClaudeToolkit/ClaudeToolkit.tsx** (256 lines) |
There was a problem hiding this comment.
The "Files Created (7 new files)" section lists only six concrete files and omits CLAUDE_SUMMARY.md itself, even though the summary later reports New Files: 7. To avoid confusion for maintainers trying to track new artifacts, consider explicitly including CLAUDE_SUMMARY.md in the created-files list or adjusting the counts so they match the enumerated items.
Suggested change
| ### Backend Services | |
| 3. **backend/src/services/claude.service.ts** (125 lines) | |
| - ClaudeService class | |
| - 6 core methods | |
| - Anthropic SDK integration | |
| - Error handling | |
| 4. **backend/src/controllers/claude.controller.ts** (259 lines) | |
| - ClaudeController class | |
| - 7 REST API endpoints | |
| - Database integration | |
| - Request validation | |
| 5. **backend/src/routes/claude.routes.ts** (55 lines) | |
| - Express route definitions | |
| - Endpoint documentation | |
| - RESTful routing | |
| ### Frontend Components | |
| 6. **frontend/src/components/ClaudeToolkit/ClaudeToolkit.tsx** (256 lines) | |
| 3. **CLAUDE_SUMMARY.md** | |
| - High-level summary of Claude integration | |
| - Lists created and modified files | |
| ### Backend Services | |
| 4. **backend/src/services/claude.service.ts** (125 lines) | |
| - ClaudeService class | |
| - 6 core methods | |
| - Anthropic SDK integration | |
| - Error handling | |
| 5. **backend/src/controllers/claude.controller.ts** (259 lines) | |
| - ClaudeController class | |
| - 7 REST API endpoints | |
| - Database integration | |
| - Request validation | |
| 6. **backend/src/routes/claude.routes.ts** (55 lines) | |
| - Express route definitions | |
| - Endpoint documentation | |
| - RESTful routing | |
| ### Frontend Components | |
| 7. **frontend/src/components/ClaudeToolkit/ClaudeToolkit.tsx** (256 lines) |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Adds Anthropic Claude AI as a second AI provider alongside OpenAI, enabling multi-model capabilities and specialized code generation/analysis tooling.
Backend (Node.js/TypeScript)
/api/claude/*Frontend (React/TypeScript/Material-UI)
Configuration
ANTHROPIC_API_KEYenvironment variableDocumentation
CLAUDE_INTEGRATION.md: Setup, API reference, best practices (330 lines)CLAUDE_QUICK_REFERENCE.md: API examples, patterns (239 lines)CLAUDE_SUMMARY.md: Implementation overviewType of Change
Integration Impact
Testing
Verification completed:
Checklist
Additional Notes
Stats: 1,607 lines added, 38 removed across 18 files (8 new, 11 modified)
Dependencies:
@anthropic-ai/sdk(backend only)Models supported: Claude 3.5 Sonnet (default), Claude 3 Opus, Sonnet, Haiku
Maintains full backward compatibility - existing OpenAI-only setups continue working unchanged.
Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.