feat(guide): add AI Ecosystem section for complementary tools (v3.9.1)

New Section 11 documenting tool complementarity with Claude Code:
- guide/ai-ecosystem.md (752 lines): detailed guide covering Perplexity,
  Gemini, Kimi, NotebookLM, IDE tools, and UI prototypers
- Section 11 in ultimate-guide.md (~250 lines): condensed version with
  practical workflows and integration patterns
- 4 workflow pipelines: Research→Code, Visual→Code, Documentation, Presentation
- Ready-to-use prompts and cost optimization strategies

Also includes: mobile-access.md enhancements from [Unreleased]

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Florian BRUNIAUX 2026-01-19 11:25:36 +01:00
parent dab11d260c
commit e822452000
9 changed files with 1149 additions and 15 deletions

View file

@ -6,6 +6,41 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
## [3.9.1] - 2026-01-19
### Added
- **AI Ecosystem: Complementary Tools** — New Section 11 documenting tool complementarity
- `guide/ultimate-guide.md` Section 11 (~250 lines)
- 11.1 Why Complementarity Matters — Claude Code strengths vs gaps
- 11.2 Tool Matrix — Decision guide for when to use which tool
- 11.3 Practical Workflows — 4 pipelines (Research→Code, Visual→Code, Documentation, Presentation)
- 11.4 Integration Patterns — Full workflows with budget recommendations
- `guide/ai-ecosystem.md` (NEW, ~750 lines)
- Detailed guide for each complementary tool
- Perplexity AI (research with verified sources)
- Google Gemini (image understanding → code)
- Kimi/Moonshot (PPTX generation, 128K context)
- NotebookLM (doc synthesis + audio overviews)
- IDE tools (Cursor, Windsurf, Cline)
- UI Prototypers (v0, Bolt, Lovable)
- Ready-to-use prompts appendix
- Cost optimization strategies
- Updated `guide/README.md` with navigation link
- Updated main `README.md` navigation table
- Updated `machine-readable/reference.yaml` with 6 new line number references
### Changed
- **tools/mobile-access.md** - Enhanced with verified data and alternatives
- Added Architecture Comparison section with 3 ASCII diagrams (ttyd, Happy Coder, Remoto.sh)
- Restructured comparison table with Type/Pros/Cons/ToS/Stars columns
- Added Happy Coder section: 7.8K ⭐ (verified 2026-01-19), MIT, Tauri/Expo stack, ToS-safe
- Added Remoto.sh warning: ToS risk documented (Anthropic §4.2 proxy policy)
- Added Sources section with all referenced projects
- Updated footer with data verification date
- File expanded from 300 to 385 lines
## [3.9.0] - 2026-01-19
### Added

View file

@ -557,6 +557,7 @@ Jump directly to any section in the [Ultimate Guide](./guide/ultimate-guide.md):
| **[8. MCP Servers](./guide/ultimate-guide.md#8-mcp-servers)** | Extend Claude with databases, browsers, and external tools | Extended |
| **[9. Advanced Patterns](./guide/ultimate-guide.md#9-advanced-patterns)** | Orchestrate Trinity workflows and CI/CD pipelines | Power user |
| **[10. Reference](./guide/ultimate-guide.md#10-reference)** | Look up commands, shortcuts, and troubleshooting tips | Daily |
| **[11. AI Ecosystem](./guide/ultimate-guide.md#11-ai-ecosystem-complementary-tools)** | Chain Claude Code with Perplexity, Gemini, Kimi, NotebookLM | Workflow |
---
@ -741,7 +742,7 @@ Get notified about major updates, new templates, and Claude Code best practices:
---
*Version 3.9.0 | January 2026 | Crafted with Claude*
*Version 3.9.1 | January 2026 | Crafted with Claude*
<!-- SEO Keywords -->
<!-- claude code, claude code tutorial, anthropic cli, ai coding assistant, claude code mcp,

View file

@ -1 +1 @@
3.9.0
3.9.1

View file

@ -16,6 +16,7 @@ Core documentation for mastering Claude Code.
| [observability.md](./observability.md) | Session monitoring and cost tracking | 15 min |
| [methodologies.md](./methodologies.md) | 15 development methodologies reference (TDD, SDD, BDD, etc.) | 20 min |
| [security-hardening.md](./security-hardening.md) | Security threats, MCP vetting, injection defense | 25 min |
| [ai-ecosystem.md](./ai-ecosystem.md) | Complementary AI tools (Perplexity, Gemini, Kimi, NotebookLM) | 25 min |
| [workflows/](./workflows/) | Practical workflow guides for Claude Code | 30 min |
### Workflows

752
guide/ai-ecosystem.md Normal file
View file

@ -0,0 +1,752 @@
# AI Ecosystem: Maximizing Claude Code with Complementary Tools
> **Reading time**: ~25 minutes
>
> **Purpose**: This guide helps you understand when to use Claude Code vs. complementary AI tools, and how to chain them for optimal workflows.
---
## Table of Contents
- [Introduction](#introduction)
- [1. Perplexity AI (Research & Sourcing)](#1-perplexity-ai-research--sourcing)
- [2. Google Gemini (Visual Understanding)](#2-google-gemini-visual-understanding)
- [3. Kimi (PPTX & Long Document Generation)](#3-kimi-pptx--long-document-generation)
- [4. NotebookLM (Synthesis & Audio)](#4-notebooklm-synthesis--audio)
- [5. IDE-Based Tools (Cursor, Windsurf, Cline)](#5-ide-based-tools-cursor-windsurf-cline)
- [6. UI Prototypers (v0, Bolt, Lovable)](#6-ui-prototypers-v0-bolt-lovable)
- [7. Workflow Orchestration](#7-workflow-orchestration)
- [8. Cost & Subscription Strategy](#8-cost--subscription-strategy)
- [Ready-to-Use Prompts](#appendix-ready-to-use-prompts)
---
## Introduction
### Philosophy: Augmentation, Not Replacement
Claude Code excels at:
- **Contextual reasoning** across entire codebases
- **Multi-file implementation** with test integration
- **Persistent memory** via CLAUDE.md files
- **CLI automation** for CI/CD pipelines
- **Agentic task completion** with minimal supervision
What Claude Code doesn't do well (by design):
- **Real-time web search with source verification** (WebSearch exists but limited)
- **Image generation** (no native capability)
- **PowerPoint/slide generation** (no PPTX output)
- **Audio synthesis** (no TTS)
- **Browser-based prototyping** (no visual preview)
The goal is not to find "better" tools, but to chain the **right tool for each step**.
### The Complementarity Matrix
| Task | Claude Code | Better Alternative | Why |
|------|-------------|-------------------|-----|
| **Code implementation** | ✅ Best | - | Contextual reasoning + file editing |
| **Deep research with sources** | ⚠️ Limited | Perplexity Pro | 100+ verified sources |
| **Image → Code** | ⚠️ Limited | Gemini 2.5+ | Superior visual understanding |
| **Slide generation** | ❌ None | Kimi.com | Native PPTX export |
| **Audio overview** | ❌ None | NotebookLM | Podcast-style synthesis |
| **Browser prototyping** | ❌ None | v0.dev, Bolt | Live preview |
| **IDE autocomplete** | ❌ None | Copilot, Cursor | Inline suggestions |
---
## 1. Perplexity AI (Research & Sourcing)
### When to Use Perplexity Over Claude
| Scenario | Use Perplexity | Use Claude |
|----------|---------------|------------|
| "What's the latest API for X?" | ✅ | ⚠️ Knowledge cutoff |
| "Compare 5 libraries for auth" | ✅ Sources | ⚠️ May hallucinate |
| "Explain this error message" | ⚠️ Generic | ✅ Contextual |
| "Implement auth in my codebase" | ❌ No files | ✅ Full access |
### Perplexity Pro Features for Developers
**Deep Research Mode**
- Synthesizes 100+ sources into structured output
- Takes 3-5 minutes but produces comprehensive specs
- Export as markdown → Feed to Claude Code
**Model Selection**
- Claude Sonnet 4: Best for technical prose and documentation
- GPT-4o: Good for code snippets
- Sonar Pro: Fast factual lookups
**Labs Features**
- Spaces: Persistent project contexts
- Code blocks: Syntax-highlighted exports
- Charts: Auto-generated from data
### Integration Workflow
#### Pattern 1: Research → Spec → Code
```
┌─────────────────────────────────────────────────────────┐
│ 1. PERPLEXITY (Deep Research) │
│ "Research best practices for JWT refresh tokens │
│ in Next.js 15. Include security considerations, │
│ common pitfalls, and library recommendations." │
│ │
│ → Output: 2000-word spec with sources │
└───────────────────────────┬─────────────────────────────┘
↓ Export as spec.md
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ > claude │
│ "Implement JWT refresh tokens following spec.md. │
│ Use the jose library as recommended." │
│ │
│ → Output: Working implementation with tests │
└─────────────────────────────────────────────────────────┘
```
#### Pattern 2: Parallel Pane Workflow
Using tmux or terminal split:
```bash
# Left pane: Perplexity (browser or CLI)
perplexity "Best practices for rate limiting in Express"
# Right pane: Claude Code (implementing)
claude "Add rate limiting to API. Check spec.md for approach."
```
### Comparison: Claude WebSearch vs Perplexity
| Feature | Claude WebSearch | Perplexity Pro |
|---------|-----------------|----------------|
| Source count | ~5-10 | 100+ (Deep Research) |
| Source verification | Basic | Full citations |
| Real-time data | Yes | Yes |
| Export format | Text in context | Markdown, code blocks |
| Best for | Quick lookups | Comprehensive research |
| Cost | Included | $20/month Pro |
**Recommendation**: Use Claude WebSearch for quick factual checks. Use Perplexity Deep Research before any significant implementation that requires understanding the ecosystem.
---
## 2. Google Gemini (Visual Understanding)
### Developer Use Cases
**Gemini's Visual Superpowers**:
- UI mockup → HTML/CSS/React code (90%+ fidelity)
- Diagram interpretation (flowcharts → Mermaid/code)
- Screenshot debugging ("why does this look broken?")
- Design token extraction (colors, spacing from images)
### Gemini 2.5 Pro for Development
Best-in-class for:
- **Complex UI conversion**: Upload Figma screenshot → Get Tailwind components
- **Diagram comprehension**: Architecture diagrams → Implementation plan
- **Error analysis**: Upload error screenshot → Get debugging steps
Model selection:
- **Gemini 2.5 Pro**: Complex visual reasoning, long context
- **Gemini 2.5 Flash**: Quick visual tasks, lower cost
### Integration Workflow
#### Pattern: Visual → Code
```
┌─────────────────────────────────────────────────────────┐
│ 1. GEMINI 2.5 PRO │
│ Upload: screenshot.png of Figma design │
│ Prompt: "Convert this to a React component using │
│ Tailwind CSS. Use semantic HTML and │
│ include responsive breakpoints." │
│ │
│ → Output: JSX + Tailwind code │
└───────────────────────────┬─────────────────────────────┘
↓ Copy to clipboard
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ > claude │
│ "Refine this component for our Next.js project. │
│ Add proper TypeScript types, our Button component, │
│ and connect to the auth context." │
│ │
│ → Output: Production-ready component │
└─────────────────────────────────────────────────────────┘
```
#### Pattern: Diagram → Implementation Plan
```
┌─────────────────────────────────────────────────────────┐
│ 1. GEMINI │
│ Upload: architecture-diagram.png │
│ Prompt: "Analyze this architecture diagram. │
│ Output a Mermaid diagram with the same │
│ structure, and list the components." │
│ │
│ → Output: Mermaid code + component list │
└───────────────────────────┬─────────────────────────────┘
↓ Paste mermaid to CLAUDE.md
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ "Implement the UserService component from the │
│ architecture in CLAUDE.md. Start with the │
│ interface, then the implementation." │
│ │
│ → Output: Implemented service │
└─────────────────────────────────────────────────────────┘
```
### Image Generation Alternatives
For generating diagrams, mockups, or visual assets:
| Tool | Best For | Format | Quality |
|------|----------|--------|---------|
| Ideogram 3.0 | UI mockups, icons | PNG, SVG | High |
| Recraft v3 | Vectors, logos | SVG, PNG | Very high |
| Midjourney | Artistic visuals | PNG | Artistic |
| DALL-E 3 | Quick concepts | PNG | Good |
**Workflow for generated images**:
1. Generate image with tool of choice
2. Upload to Gemini for → code conversion
3. Refine with Claude Code
---
## 3. Kimi (PPTX & Long Document Generation)
### What is Kimi?
[Kimi](https://kimi.ai) is Moonshot AI's assistant, notable for:
- **Native PPTX generation** (actual slides, not markdown)
- **128K+ token context** (entire codebases)
- **Code-aware layouts** (syntax highlighting in slides)
- **Multilingual** (excellent Chinese/English)
### Developer Use Cases
**Presentation Generation**:
- PR summary → stakeholder deck
- Architecture docs → visual presentation
- Technical spec → team onboarding slides
- Code walkthrough → training materials
### Integration Workflow
#### Pattern: Code → Presentation
```
┌─────────────────────────────────────────────────────────┐
│ 1. CLAUDE CODE │
│ "Generate a summary of all changes in the last │
│ 5 commits. Format as markdown with sections: │
│ Overview, Key Changes, Breaking Changes, Migration."│
│ │
│ → Output: changes-summary.md │
└───────────────────────────┬─────────────────────────────┘
↓ Upload to Kimi
┌─────────────────────────────────────────────────────────┐
│ 2. KIMI │
│ Prompt: "Create a 10-slide presentation from this │
│ summary for non-technical stakeholders. │
│ Use business-friendly language. │
│ Include one slide per major feature." │
│ │
│ → Output: stakeholder-update.pptx │
└─────────────────────────────────────────────────────────┘
```
#### Pattern: Architecture → Training
```
┌─────────────────────────────────────────────────────────┐
│ 1. CLAUDE CODE (using /explain or equivalent) │
│ "Explain the authentication flow in this project. │
│ Include sequence diagrams (mermaid) and key files." │
│ │
│ → Output: auth-explanation.md with diagrams │
└───────────────────────────┬─────────────────────────────┘
↓ Upload to Kimi
┌─────────────────────────────────────────────────────────┐
│ 2. KIMI │
│ "Create an onboarding presentation for new devs. │
│ 20 slides covering the auth system. Include │
│ code snippets and diagrams where relevant." │
│ │
│ → Output: auth-onboarding.pptx │
└─────────────────────────────────────────────────────────┘
```
### Comparison: Presentation Tools
| Tool | Strengths | Weaknesses | Best For |
|------|-----------|------------|----------|
| **Kimi** | Native PPTX, code-aware | Less design polish | Technical decks |
| **Gamma.app** | Beautiful templates | Less code support | Business decks |
| **Tome** | AI-native, visual | Expensive | Marketing |
| **Beautiful.ai** | Smart templates | Manual | Design-focused |
| **Marp** | Markdown → slides | Manual styling | Developer decks |
**Recommendation**: Use Kimi for technical content with code. Use Gamma for business/investor decks.
---
## 4. NotebookLM (Synthesis & Audio)
### Developer Use Cases
**Documentation Synthesis**:
- Upload 50+ files → Get unified understanding
- Ask questions about your codebase
- Generate audio overview for commute learning
**Audio Overview Feature**:
- Generates 10-15 minute "podcast" from uploaded content
- Two AI hosts discuss your documentation
- Perfect for onboarding or reviewing large systems
### Integration Workflow
#### Pattern: Codebase → Audio Onboarding
```
┌─────────────────────────────────────────────────────────┐
│ 1. EXPORT (via Claude Code or manual) │
│ "Export all markdown files from docs/ and the │
│ main README to a single combined-docs.md file." │
│ │
│ → Output: combined-docs.md (50K tokens) │
└───────────────────────────┬─────────────────────────────┘
↓ Upload to NotebookLM
┌─────────────────────────────────────────────────────────┐
│ 2. NOTEBOOKLM │
│ - Add combined-docs.md as source │
│ - Click "Generate Audio Overview" │
│ - Wait 3-5 minutes for generation │
│ │
│ → Output: 12-minute audio explaining your system │
└───────────────────────────┬─────────────────────────────┘
↓ Listen during commute
┌─────────────────────────────────────────────────────────┐
│ 3. BACK TO CLAUDE CODE │
│ "Based on my notes from the audio overview: │
│ [paste notes] │
│ Help me understand the auth flow in more detail." │
│ │
│ → Output: Contextual deep-dive │
└─────────────────────────────────────────────────────────┘
```
#### Pattern: Multi-Source Synthesis
```
┌─────────────────────────────────────────────────────────┐
│ NOTEBOOKLM │
│ Upload multiple sources: │
│ - Your codebase docs (combined-docs.md) │
│ - Framework documentation (Next.js docs PDF) │
│ - Related articles (URLs or PDFs) │
│ │
│ Ask: "How does our auth implementation compare to │
│ Next.js best practices?" │
│ │
│ → Output: Comparative analysis with citations │
└─────────────────────────────────────────────────────────┘
```
### Export to CLAUDE.md
After NotebookLM synthesis, export key insights to your project:
```markdown
## Architecture Insights (from NotebookLM synthesis)
### Key Patterns
- Service layer uses repository pattern
- Auth flow follows OAuth2 with PKCE
- State management via React Query
### Potential Issues Identified
- Token refresh logic not documented
- Missing error boundaries in critical paths
### Recommendations
- Add token refresh documentation
- Implement error boundary audit
```
---
## 5. IDE-Based Tools (Cursor, Windsurf, Cline)
### When IDE Tools Complement Claude Code
| Scenario | Use IDE Tool | Use Claude Code |
|----------|-------------|-----------------|
| Quick inline edits | ✅ Faster | ⚠️ Context switch |
| Autocomplete while typing | ✅ Essential | ❌ Not available |
| Multi-file refactoring | ⚠️ Limited | ✅ Superior |
| Understanding large codebase | ⚠️ Limited | ✅ Better context |
| CI/CD automation | ❌ Manual | ✅ Native |
### Hybrid Workflow
**Morning session (strategic)**:
```bash
claude "Review the auth module and suggest improvements"
# Claude analyzes, suggests multi-file refactoring plan
```
**During coding (tactical)**:
```
# In Cursor/VS Code with Copilot
# Quick autocomplete, inline suggestions
# Small function implementations
```
**Before commit (validation)**:
```bash
claude "Review my changes and suggest tests"
# Claude reviews diff, generates comprehensive tests
```
### Cursor-Specific Integration
Cursor's `.cursor/rules` can mirror your CLAUDE.md:
```markdown
# .cursor/rules
# Mirror from CLAUDE.md for consistency
## Conventions
- Use TypeScript strict mode
- Prefer named exports
- Test files: *.test.ts
## Patterns
- Services use dependency injection
- Components use render props for flexibility
```
### Export from IDE to Claude
When you need Claude's deeper analysis:
1. Select code in IDE
2. Copy with context (file path, line numbers)
3. Paste in Claude with: "Analyze this and suggest architectural improvements"
---
## 6. UI Prototypers (v0, Bolt, Lovable)
### When to Use Prototypers
| Scenario | Use Prototyper | Use Claude Code |
|----------|---------------|-----------------|
| "Build a landing page" | ✅ v0 (visual) | ⚠️ No preview |
| "Add form to existing app" | ⚠️ Context needed | ✅ Has context |
| "Rapid UI iteration" | ✅ Live preview | ⚠️ Slower |
| "Match design system" | ⚠️ Generic | ✅ Reads your tokens |
### Tool Comparison
| Tool | Strengths | Stack | Best For |
|------|-----------|-------|----------|
| **v0.dev** | Shadcn/Tailwind | React | Component prototypes |
| **Bolt.new** | Full app scaffold | Various | Quick MVPs |
| **Lovable** | Design-to-code | React | Designer handoff |
| **WebSim** | Experimental UI | Web | Creative exploration |
### Integration Workflow
#### Pattern: Prototype → Production
```
┌─────────────────────────────────────────────────────────┐
│ 1. V0.DEV │
│ Prompt: "A user profile card with avatar, │
│ stats, and action buttons" │
│ │
│ → Output: React + Shadcn component preview │
│ → Export: Copy code │
└───────────────────────────┬─────────────────────────────┘
↓ Paste to clipboard
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ "Adapt this v0 component for our Next.js app: │
│ - Use our existing Button, Avatar components │
│ - Add TypeScript types matching User interface │
│ - Connect to getUserProfile API endpoint │
│ - Add loading and error states" │
│ │
│ → Output: Production-ready integrated component │
└─────────────────────────────────────────────────────────┘
```
---
## 7. Workflow Orchestration
### The Complete Pipeline
For maximum efficiency, chain tools in this order:
```
┌─────────────────────────────────────────────────────────────────────┐
│ PLANNING PHASE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [PERPLEXITY] [GEMINI] [NOTEBOOKLM] │
│ Deep Research Diagram Analysis Doc Synthesis │
│ "Best practices for..." Upload architecture Upload all docs │
│ ↓ ↓ ↓ │
│ spec.md mermaid + plan audio overview │
│ │
└────────────────────────────────┬────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ IMPLEMENTATION PHASE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [CLAUDE CODE] [IDE + COPILOT] │
│ Multi-file implementation Inline autocomplete │
│ "Implement per spec.md..." Quick edits while typing │
│ ↓ ↓ │
│ Working code + tests Polished code │
│ │
└────────────────────────────────┬────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ DELIVERY PHASE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [CLAUDE CODE] [KIMI] │
│ PR description Stakeholder deck │
│ /release-notes "Create slides from..." │
│ ↓ ↓ │
│ GitHub PR presentation.pptx │
│ │
└─────────────────────────────────────────────────────────────────────┘
```
### Session Templates
#### Research-Heavy Feature
```bash
# 1. Research (Perplexity - 10 min)
# "Best practices for WebSocket implementation in Next.js 15"
# → Export to websocket-spec.md
# 2. Implementation (Claude Code - 40 min)
claude
> "Implement WebSocket following websocket-spec.md.
Add to src/lib/websocket/. Include reconnection logic."
# 3. Stakeholder update (Kimi - 5 min)
# Upload: changes + demo screenshots
# → Generate 5-slide update deck
```
#### Visual-Heavy Feature
```bash
# 1. UI Prototype (v0 - 10 min)
# Generate dashboard layout
# 2. Visual refinement (Gemini - 5 min)
# Upload Figma polish → Get final code
# 3. Integration (Claude Code - 30 min)
claude
> "Integrate this dashboard component.
Connect to our data fetching hooks.
Add proper TypeScript types."
```
#### Onboarding New Codebase
```bash
# 1. Audio overview (NotebookLM - 15 min)
# Upload all docs → Generate audio → Listen
# 2. Deep questions (Claude Code - 20 min)
claude
> "I just listened to an overview of this codebase.
Help me understand the payment flow in detail."
# 3. First contribution (Claude Code - 30 min)
claude
> "Add a new endpoint to the payments API.
Follow the patterns I see in existing endpoints."
```
---
## 8. Cost & Subscription Strategy
### Monthly Cost Comparison
| Tool | Free Tier | Pro Cost | Best For |
|------|-----------|----------|----------|
| Claude Code | Pay-per-use | ~$20-50/month typical | Primary dev tool |
| Perplexity | 5 Pro searches/day | $20/month | Research-heavy work |
| Gemini | Good free tier | $19.99/month | Visual work |
| NotebookLM | Free | Free | Documentation |
| Kimi | Generous free | Free | Presentations |
| v0.dev | Limited | $20/month | UI prototyping |
| Cursor | Free tier | $20/month | IDE integration |
### Recommended Subscriptions by Profile
**Minimal Stack ($40-70/month)**:
- Claude Code (pay-per-use) - $20-50
- Perplexity Pro - $20
- Everything else: Free tiers
**Balanced Stack ($80-110/month)**:
- Claude Code - $30-50
- Perplexity Pro - $20
- Gemini Advanced - $20
- Cursor Pro - $20
- Free: NotebookLM, Kimi
**Power Stack ($120-150/month)**:
- Claude Code (heavy usage) - $50-80
- Perplexity Pro - $20
- Gemini Advanced - $20
- Cursor Pro - $20
- v0 Pro - $20
- Free: NotebookLM, Kimi
### Cost Optimization Tips
1. **Use Claude Code's Haiku model** for simple tasks (`/model haiku`)
2. **Batch research sessions** in Perplexity to maximize Deep Research
3. **Use free tiers** for Gemini Flash, NotebookLM, Kimi
4. **Check context usage** regularly (`/status`) to avoid waste
5. **Use Opus sparingly** - only for architectural decisions
---
## Appendix: Ready-to-Use Prompts
### Perplexity: Technical Spec Research
```
Research [TECHNOLOGY/PATTERN] implementation best practices in [FRAMEWORK].
Requirements:
- Production-ready patterns only (no experimental)
- Include security considerations
- Compare top 3 library options with pros/cons
- Include code examples where helpful
- Cite all sources
Output format: Markdown spec I can feed to a coding assistant.
```
### Gemini: UI to Code
```
Convert this UI screenshot to a [FRAMEWORK] component using [STYLING].
Requirements:
- Use semantic HTML
- Include responsive breakpoints (mobile/tablet/desktop)
- Extract color values as CSS variables
- Add accessibility attributes (aria labels, roles)
- Include hover/focus states visible in the design
Output: Complete component code ready to paste.
```
### Kimi: Code to Presentation
```
Create a [N]-slide presentation from this technical content.
Audience: [TECHNICAL/NON-TECHNICAL]
Purpose: [STAKEHOLDER UPDATE/TRAINING/PITCH]
Requirements:
- One key message per slide
- Include code snippets where relevant (syntax highlighted)
- Add speaker notes for each slide
- Business-friendly language for non-tech audiences
- Include a summary/next steps slide
Output: Downloadable PPTX file.
```
### NotebookLM: Codebase Understanding
After uploading documentation:
```
Based on all sources, explain:
1. The overall architecture pattern used
2. How data flows through the system
3. Key integration points with external services
4. Potential areas of technical debt or complexity
5. How authentication/authorization works
Format as a structured summary I can add to my CLAUDE.md file.
```
### Claude Code: Integrate External Output
```
I have [DESCRIBE SOURCE] from [TOOL].
Context: [PASTE CONTENT]
Integrate this into our project:
- Location: [TARGET DIRECTORY/FILE]
- Adapt to our patterns (check CLAUDE.md)
- Add TypeScript types matching our interfaces
- Connect to existing [STATE/API/HOOKS]
- Add tests following our testing patterns
Validate against existing code before implementing.
```
---
## Quick Reference Card
### Tool Decision Matrix
| I need to... | Use |
|--------------|-----|
| Implement a feature | Claude Code |
| Research before implementing | Perplexity Deep Research |
| Convert design to code | Gemini → Claude |
| Create a presentation | Claude → Kimi |
| Understand new codebase | NotebookLM → Claude |
| Rapid UI prototype | v0/Bolt → Claude |
| Quick inline edits | IDE + Copilot |
### Chaining Patterns
```
Research → Code: Perplexity → Claude Code
Visual → Code: Gemini → Claude Code
Prototype → Prod: v0/Bolt → Claude Code
Code → Slides: Claude Code → Kimi
Docs → Understanding: NotebookLM → Claude Code
```
---
*Back to [Ultimate Guide](./ultimate-guide.md#11-ai-ecosystem-complementary-tools) | [Main README](../README.md)*

View file

@ -6,7 +6,7 @@
**Written with**: Claude (Anthropic)
**Version**: 3.9.0 | **Last Updated**: January 2026
**Version**: 3.9.1 | **Last Updated**: January 2026
---
@ -397,4 +397,4 @@ where.exe claude; claude doctor; claude mcp list
**Author**: Florian BRUNIAUX | [@Méthode Aristote](https://methode-aristote.fr) | Written with Claude
*Last updated: January 2026 | Version 3.9.0*
*Last updated: January 2026 | Version 3.9.1*

View file

@ -10,7 +10,7 @@
**Last updated**: January 2026
**Version**: 3.9.0
**Version**: 3.9.1
---
@ -169,6 +169,11 @@ Context full → /compact or /clear
- [10.4 Troubleshooting](#104-troubleshooting)
- [10.5 Cheatsheet](#105-cheatsheet)
- [10.6 Daily Workflow & Checklists](#106-daily-workflow--checklists)
- [11. AI Ecosystem: Complementary Tools](#11-ai-ecosystem-complementary-tools)
- [11.1 Why Complementarity Matters](#111-why-complementarity-matters)
- [11.2 Tool Matrix](#112-tool-matrix)
- [11.3 Practical Workflows](#113-practical-workflows)
- [11.4 Integration Patterns](#114-integration-patterns)
- [Appendix: Templates Collection](#appendix-templates-collection)
- [Appendix A: File Locations Reference](#appendix-a-file-locations-reference)
@ -10151,6 +10156,253 @@ exit 0
- `npm test` - Run tests
```
---
# 11. AI Ecosystem: Complementary Tools
_Quick jump:_ [Why Complementarity](#111-why-complementarity-matters) · [Tool Matrix](#112-tool-matrix) · [Practical Workflows](#113-practical-workflows) · [Integration Patterns](#114-integration-patterns)
---
**Reading time**: 10 minutes
**Skill level**: Intermediate
**Goal**: Chain Claude Code with the right AI tools for optimal workflows
> **TL;DR**: Claude Code excels at contextual reasoning and multi-file implementation. Combine it with Perplexity (research), Gemini (images), Kimi (slides), and NotebookLM (synthesis) for a complete AI-powered development workflow.
## 11.1 Why Complementarity Matters
Claude Code is designed to be your **implementation partner** with deep codebase understanding. It deliberately doesn't try to do everything—and that's a strength.
### What Claude Code Does Best
| Capability | Why Claude Excels |
|-----------|------------------|
| **Contextual reasoning** | Reads entire project, understands patterns |
| **Multi-file editing** | Coordinates changes across modules |
| **Test integration** | Generates tests that understand your code |
| **CLI automation** | Perfect for CI/CD pipelines |
| **Persistent memory** | CLAUDE.md files maintain context |
### Where Other Tools Add Value
| Gap | Why | Solution |
|-----|-----|----------|
| **Deep research with sources** | WebSearch is limited (~5-10 sources) | Perplexity Pro (100+ verified sources) |
| **Image → Code** | No visual understanding | Gemini 2.5 (superior image analysis) |
| **Slide generation** | No PPTX output capability | Kimi (native PowerPoint) |
| **Audio synthesis** | No TTS capability | NotebookLM (podcast-style overviews) |
| **Live browser prototyping** | No visual preview | v0.dev, Bolt (instant preview) |
The goal isn't replacement—it's **chaining the right tool for each step**.
## 11.2 Tool Matrix
### Quick Decision Guide
| I need to... | Use | Why Not Claude |
|--------------|-----|----------------|
| Implement a feature | **Claude Code** | ✅ Best choice |
| Research before implementing | **Perplexity** | Limited sources, no citations |
| Convert mockup to code | **Gemini → Claude** | Limited visual understanding |
| Create stakeholder deck | **Claude → Kimi** | No PPTX export |
| Understand new codebase quickly | **NotebookLM → Claude** | No audio synthesis |
| Rapid UI prototype | **v0/Bolt → Claude** | No live preview |
| Quick inline edits | **IDE + Copilot** | Context switching overhead |
### Complementary Tools Overview
| Tool | Primary Strength | Free Tier | Pro Cost |
|------|-----------------|-----------|----------|
| **[Perplexity](https://perplexity.ai)** | Research with verified sources | 5 Pro searches/day | $20/month |
| **[Gemini](https://gemini.google.com)** | Image understanding → code | Generous | $19.99/month |
| **[Kimi](https://kimi.ai)** | PPTX generation, 128K context | Generous | Free |
| **[NotebookLM](https://notebooklm.google.com)** | Doc synthesis + audio | Full features | Free |
| **[v0.dev](https://v0.dev)** | UI prototyping (Shadcn) | Limited | $20/month |
| **[Cursor](https://cursor.sh)** | IDE with AI autocomplete | Limited | $20/month |
## 11.3 Practical Workflows
### Research → Code Pipeline
Use when: You need to understand best practices before implementing.
```
┌─────────────────────────────────────────────────────────┐
│ 1. PERPLEXITY (Deep Research Mode - 5 min) │
│ │
│ "Research JWT refresh token best practices for │
│ Next.js 15. Include security, common pitfalls, │
│ and compare jose vs jsonwebtoken libraries." │
│ │
│ → Output: 2000-word spec with 20+ sources │
│ → Export: Copy as Markdown → spec.md │
└───────────────────────────┬─────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ > claude │
│ │
│ "Implement JWT refresh per @spec.md. │
│ Use jose library as recommended. │
│ Add to src/lib/auth/. Include tests." │
│ │
│ → Output: Working implementation + tests │
└─────────────────────────────────────────────────────────┘
```
**When to use**: Any implementation requiring ecosystem knowledge, library comparisons, or security considerations.
### Visual → Code Pipeline
Use when: You have mockups, screenshots, or diagrams to implement.
```
┌─────────────────────────────────────────────────────────┐
│ 1. GEMINI 2.5 PRO │
│ │
│ Upload: dashboard-mockup.png │
│ "Convert to React component with Tailwind. │
│ Include responsive breakpoints and accessibility." │
│ │
│ → Output: Initial JSX + Tailwind code │
└───────────────────────────┬─────────────────────────────┘
↓ Copy to clipboard
┌─────────────────────────────────────────────────────────┐
│ 2. CLAUDE CODE │
│ │
│ "Integrate this component into our Next.js app: │
│ - Use our Button, Avatar components │
│ - Add TypeScript types matching User interface │
│ - Connect to getUserProfile API hook │
│ - Add loading and error states" │
│ │
│ → Output: Production-ready integrated component │
└─────────────────────────────────────────────────────────┘
```
**When to use**: Figma exports, whiteboard sketches, architecture diagrams, error screenshots.
### Documentation Pipeline
Use when: You need to quickly understand a new codebase or create audio overviews.
```
┌─────────────────────────────────────────────────────────┐
│ 1. EXPORT DOCS (Claude Code) │
│ │
│ "Combine all markdown from docs/ into one file. │
│ Include README.md and CLAUDE.md." │
│ │
│ → Output: combined-docs.md │
└───────────────────────────┬─────────────────────────────┘
↓ Upload to NotebookLM
┌─────────────────────────────────────────────────────────┐
│ 2. NOTEBOOKLM │
│ │
│ - Add combined-docs.md as source │
│ - Click "Generate Audio Overview" │
│ - Listen during commute (10-15 min) │
│ │
│ → Output: Podcast-style system overview │
└───────────────────────────┬─────────────────────────────┘
↓ Take notes, return to Claude
┌─────────────────────────────────────────────────────────┐
│ 3. CLAUDE CODE │
│ │
│ "Based on my understanding from the audio: │
│ Help me deep-dive into the payment flow." │
│ │
│ → Output: Contextual explanation + code walkthrough │
└─────────────────────────────────────────────────────────┘
```
**When to use**: Joining new team, reviewing unfamiliar codebase, onboarding prep.
### Presentation Pipeline
Use when: You need to communicate technical changes to stakeholders.
```
┌─────────────────────────────────────────────────────────┐
│ 1. CLAUDE CODE │
│ │
│ "Summarize changes from last 5 commits. │
│ Format: Overview, Key Features, Breaking Changes, │
│ Migration Steps. Use business-friendly language." │
│ │
│ → Output: changes-summary.md │
└───────────────────────────┬─────────────────────────────┘
↓ Upload to Kimi
┌─────────────────────────────────────────────────────────┐
│ 2. KIMI │
│ │
│ "Create 10-slide deck for non-technical stakeholders.│
│ One key message per slide. │
│ Include summary and next steps." │
│ │
│ → Output: stakeholder-update.pptx │
└─────────────────────────────────────────────────────────┘
```
**When to use**: Sprint demos, release announcements, executive updates.
## 11.4 Integration Patterns
### Full Workflow: Research-Heavy Feature
```bash
# 1. Research (Perplexity - 10 min)
# → "Best practices for WebSocket in Next.js 15"
# → Export to websocket-spec.md
# 2. Implementation (Claude Code - 40 min)
claude
> "Implement WebSocket per websocket-spec.md.
Add to src/lib/websocket/. Include reconnection."
# 3. Stakeholder update (Kimi - 5 min)
# → Upload changes + screenshots
# → Generate 5-slide deck
```
### Full Workflow: Visual-Heavy Feature
```bash
# 1. UI Prototype (v0 - 10 min)
# → Generate dashboard layout
# 2. Visual refinement (Gemini - 5 min)
# → Upload Figma polish → Get refined code
# 3. Integration (Claude Code - 30 min)
claude
> "Integrate this dashboard.
Connect to our data hooks. Add TypeScript types."
```
### Recommended Tool Stack by Budget
| Budget | Stack | Monthly |
|--------|-------|---------|
| **Minimal** | Claude Code + Perplexity Pro | $40-70 |
| **Balanced** | + Gemini + Cursor | $80-110 |
| **Power** | + v0 Pro | $100-130 |
### Cost Optimization Tips
1. **Use Haiku** for simple tasks (`/model haiku`)
2. **Batch research** in Perplexity Deep Research sessions
3. **Use free tiers**: NotebookLM, Kimi, Gemini Flash are free
4. **Check context** regularly (`/status`) to avoid waste
5. **Use Opus sparingly** - reserve for architectural decisions
---
> **📖 Deep Dive**: For detailed integration patterns, ready-to-use prompts, and tool comparisons, see the [complete AI Ecosystem guide](./ai-ecosystem.md).
## Further Reading
@ -10564,4 +10816,4 @@ Thumbs.db
**Contributions**: Issues and PRs welcome.
**Last updated**: January 2026 | **Version**: 3.9.0
**Last updated**: January 2026 | **Version**: 3.9.1

View file

@ -3,7 +3,7 @@
# Source: guide/ultimate-guide.md
# Purpose: Condensed index for LLMs to quickly answer user questions about Claude Code
version: "3.9.0"
version: "3.9.1"
updated: "2026-01"
# ════════════════════════════════════════════════════════════════
@ -96,6 +96,13 @@ deep_dive:
troubleshooting: 9426
cheatsheet: 9801
daily_workflow: 9877
# AI Ecosystem (Section 11, ~line 10156)
ai_ecosystem: 10156
ai_ecosystem_complementarity: 10170
ai_ecosystem_tool_matrix: 10196
ai_ecosystem_workflows: 10221
ai_ecosystem_integration: 10347
ai_ecosystem_detailed: "guide/ai-ecosystem.md"
# ════════════════════════════════════════════════════════════════
# DECISION TREE (most important - en premier)

View file

@ -36,6 +36,55 @@ YOUR COMPUTER YOUR PHONE
---
## Architecture Comparison
### ttyd + Tailscale (Self-hosted)
```
YOUR COMPUTER YOUR PHONE
┌─────────────────┐ ┌─────────────────┐
│ Claude Code │◄──────────────│ Browser │
│ (runs here) │ Tailscale │ (same session) │
│ ┌───────────┐ │ VPN │ │
│ │ ttyd │ │ └─────────────────┘
│ └───────────┘ │
└─────────────────┘
✅ ToS-Safe: CLI officiel, pas d'intermédiaire cloud
```
### Happy Coder (App native)
```
YOUR COMPUTER YOUR PHONE
┌─────────────────┐ ┌─────────────────┐
│ Claude Code │ │ Happy App │
│ (CLI officiel) │◄─────────────►│ (Expo native) │
│ ▲ │ Local sync │ │
│ subprocess │ └─────────────────┘
│ ┌───────────┐ │
│ │ Happy Hub │ │
│ └───────────┘ │
└─────────────────┘
✅ ToS-Safe: Wrapper local, subprocess Node.js
```
### Remoto.sh (Cloud relay)
```
REMOTO CLOUD YOUR PHONE
┌─────────────────┐ ┌─────────────────┐
│ Docker │◄──────────────│ Browser │
│ Container │ WebSocket │ │
│ ┌───────────┐ │ └─────────────────┘
│ │ Claude │ │
│ │ Code CLI │ │
│ └───────────┘ │
└─────────────────┘
⚠️ ToS Risk: Cloud wrapping = potentiel "proxy non autorisé"
```
---
## Why This Approach?
### ToS Considerations
@ -260,14 +309,14 @@ sudo snap install ttyd --classic
---
## Alternatives Considered
## Alternatives Comparison
| Solution | Pros | Cons | ToS Risk |
|----------|------|------|----------|
| **ttyd + Tailscale** ✅ | Simple, no wrapper, ToS-safe | Terminal UX on mobile | ✅ Safe |
| Happy Coder (7.1K ⭐) | Native apps, polished | Wraps CLI | ⚠️ Unknown |
| Claude Code Web (5.5K ⭐) | Rich UI | Wraps CLI | ⚠️ Unknown |
| tmux + SSH | Zero deps | Needs SSH client on phone | ✅ Safe |
| Solution | Type | Pros | Cons | ToS | Stars |
|----------|------|------|------|-----|-------|
| **ttyd + Tailscale** ✅ | Self-hosted | Gratuit, max contrôle, CLI officiel | Setup manuel, UX terminal | ✅ Safe | N/A |
| [Happy Coder](https://github.com/slopus/happy) | App native | Voice, encryption, multi-instances, mobile-first | Dépendance projet tiers | ✅ Safe | 7.8K |
| [Remoto.sh](https://remoto.sh) | Cloud relay | Setup rapide, browser only | Cloud wrapping, latence, coût | ⚠️ Risk | N/A |
| tmux + SSH | Self-hosted | Zero deps, CLI officiel | Besoin client SSH mobile | ✅ Safe | N/A |
We chose ttyd + Tailscale because:
- It's just your terminal exposed via browser
@ -276,6 +325,33 @@ We chose ttyd + Tailscale because:
---
### Happy Coder - Alternative Recommandée
Si vous préférez une **app native** plutôt qu'un terminal web :
- **Repo** : [github.com/slopus/happy](https://github.com/slopus/happy)
- **Stars** : 7.8K (janvier 2026)
- **License** : MIT
- **Stack** : Tauri (desktop) + Expo (mobile)
- **Providers** : Claude Code, Codex, Gemini
**Pourquoi ToS-safe** : Happy Coder est un wrapper local qui exécute le CLI officiel via subprocess Node.js. Pas d'appels API directs, pas de proxy cloud.
**Installation** :
```bash
npm i -g happy-coder && happy
```
---
### Remoto.sh - Alternative Cloud (avec risques)
**Pourquoi risqué** : Remoto.sh utilise des conteneurs Docker cloud comme relay. Selon les ToS Anthropic (§4.2), les "proxies non autorisés qui masquent l'origine des requêtes" sont interdits. Des suspensions ont été signalées sur Reddit/HN pour usage similaire.
> **Recommandation** : Préférer Happy Coder ou ttyd+Tailscale pour éviter les risques ToS.
---
## Related Resources
- [ttyd GitHub](https://github.com/tsl0922/ttyd) - Terminal web server
@ -285,6 +361,16 @@ We chose ttyd + Tailscale because:
---
## Sources
- [Happy Coder GitHub](https://github.com/slopus/happy) - 7.8K ⭐, MIT license
- [ttyd GitHub](https://github.com/tsl0922/ttyd) - Terminal web server
- [Tailscale](https://tailscale.com/) - Zero-config VPN
- [Remoto.sh](https://remoto.sh) - Cloud terminal (ToS risk noted)
- ToS Anthropic §4.2 - Proxies non autorisés
---
## Contributing
This doc is **WIP/UNTESTED**. If you test this setup, please share:
@ -296,4 +382,4 @@ Open an issue or PR on this repo.
---
*Last updated: January 2026 | Status: WIP/UNTESTED*
*Last updated: January 2026 | Status: WIP/UNTESTED | Data verified: Happy Coder 7.8K ⭐ (2026-01-19)*