Developers Digest https://www.developersdigest.tech Videos and open-source projects at the intersection of AI and development. Tutorials on coding agents, AI tools, and building with LLMs. en Tue, 07 Apr 2026 05:35:36 GMT https://avatars.githubusercontent.com/u/124798203?v=4 Developers Digest https://www.developersdigest.tech <![CDATA[AI Agent Memory Patterns]]> https://www.developersdigest.tech/blog/ai-agent-memory-patterns https://www.developersdigest.tech/blog/ai-agent-memory-patterns "{}")); memory[key] = { value, timestamp: Date.now() }; await fs.writeFile("memory.json", JSON.stringify(memory, null, 2)); } // Read memory async function recall(): Promise> { const memory = JSON.parse(await fs.readFile("memory.json", "utf-8").catch(() => "{}")); return Object.fromEntries(Object.entries(memory).map(([k, v]: [string, any]) => [k, v.value])); } ``` Claude Code uses this pattern with CLAUDE.md. Project rules, architecture decisions, coding standards - all persisted as plain text that the model reads at session start. **When to use:** Project configuration, coding standards, persistent rules. Anything that does not change often but must be remembered across sessions. **Limitation:** File size is limited by the context window. A 50KB CLAUDE.md consumes tokens that could be used for reasoning. ## Pattern 2: RAG (Retrieval-Augmented Generation) Instead of loading everything into context, index your knowledge and retrieve only what is relevant to the current query. ```typescript import { pipeline } from "@huggingface/transformers"; const embedder = await pipeline("feature-extraction", "mixedbread-ai/mxbai-embed-xsmall-v1"); // Index documents async function index(docs: { id: string; text: string }[]) { const vectors = await Promise.all( docs.map(async (doc) => { const embedding = await embedder(doc.text, { pooling: "mean", normalize: true }); return { id: doc.id, text: doc.text, vector: embedding.tolist()[0] }; }) ); return vectors; } // Retrieve relevant docs for a query async function retrieve(query: string, index: any[], topK = 3) { const queryVec = (await embedder(query, { pooling: "mean", normalize: true })).tolist()[0]; return index .map((doc) => ({ ...doc, score: cosineSimilarity(queryVec, doc.vector), })) .sort((a, b) => b.score - a.score) .slice(0, topK); } ``` The agent gets relevant context without the full knowledge base consuming the window. **When to use:** Large knowledge bases (documentation, codebases, conversation history). When the context window cannot hold everything. **Limitation:** Retrieval quality depends on embedding model and chunking strategy. Bad retrieval means bad context. ## Pattern 3: Conversation Summarization Long conversations overflow the context window. Instead of dropping old messages, summarize them. ```typescript async function summarizeHistory(messages: Message[]): Promise { if (messages.length < 20) return ""; // No need to summarize short conversations const oldMessages = messages.slice(0, -10); // Keep last 10 intact const { text } = await generateText({ model: anthropic("claude-haiku-4-5"), prompt: `Summarize this conversation history in 3-5 bullet points. Focus on decisions made, tasks completed, and current state:\n\n${oldMessages.map((m) => `${m.role}: ${m.content}`).join("\n")}`, }); return text; } // Use in agent loop const summary = await summarizeHistory(messages); const contextMessages = [ { role: "system", content: `Previous conversation summary:\n${summary}` }, ...messages.slice(-10), // Recent messages in full ]; ``` The agent retains awareness of the full conversation without the token cost. **When to use:** Long-running agent sessions. Customer support agents. Multi-turn development sessions. ## Pattern 4: Structured State Track agent state as a typed object, not free text. Serialize between sessions. ```typescript interface AgentState { task: string; status: "planning" | "executing" | "reviewing" | "done"; filesModified: string[]; testsRun: { file: string; passed: boolean }[]; decisions: { what: string; why: string; timestamp: number }[]; blockers: string[]; } const initialState: AgentState = { task: "", status: "planning", filesModified: [], testsRun: [], decisions: [], blockers: [], }; // Persist between steps async function saveState(state: AgentState) { await fs.writeFile(".agent-state.json", JSON.stringify(state, null, 2)); } async function loadState(): Promise { return JSON.parse( await fs.readFile(".agent-state.json", "utf-8").catch(() => JSON.stringify(initialState)) ); } ``` The agent can resume exactly where it left off. Every decision is logged with reasoning. **When to use:** Multi-step workflows that may be interrupted. CI/CD pipelines. Long-running automation. ## Pattern 5: Tiered Memory Different types of information need different retention strategies. ``` Working Memory (context window) - Current task, recent messages, active file contents - Lifetime: current session only Short-Term Memory (session state file) - Files modified, tests run, decisions made - Lifetime: current task Long-Term Memory (CLAUDE.md / RAG index) - Project rules, architecture, coding standards - Lifetime: permanent, updated occasionally Episodic Memory (conversation logs) - Past conversations summarized - Lifetime: retained as summaries, raw logs archived ``` Each tier has different storage, retrieval, and eviction strategies. ## Which Pattern to Use | Scenario | Pattern | |----------|---------| | Project configuration | File-based (CLAUDE.md) | | Large documentation | RAG | | Long conversations | Summarization | | Multi-step workflows | Structured state | | Production agents | Tiered (all of the above) | Most production agents use a combination. CLAUDE.md for rules + RAG for knowledge + summarization for history + structured state for workflow tracking. ## Frequently Asked Questions ### Does Claude Code have built-in memory? Yes. CLAUDE.md files at project, user, and global levels provide persistent memory. Claude Code also has auto-memory that saves important context automatically. But these are file-based - not RAG or semantic search. ### How much context should I reserve for memory vs reasoning? Keep memory under 30% of the context window. A 200K token window should use at most 60K for memory/context, leaving 140K for reasoning and tool outputs. ### Can I use a vector database for agent memory? Yes. Pinecone, Weaviate, Chroma, and pgvector all work. For browser-based agents, Transformers.js can compute embeddings client-side. The key is matching the retrieval strategy to your query patterns. ### What is the best chunking strategy for RAG? For code: chunk by function/class. For documentation: chunk by section (h2 headings). For conversations: chunk by topic shift. Overlapping chunks (50-100 token overlap) improve retrieval accuracy at the boundaries. ]]> Fri, 03 Apr 2026 00:00:00 GMT Developers Digest AI Agents Memory RAG TypeScript <![CDATA[Anthropic vs OpenAI: Developer Experience Compared]]> https://www.developersdigest.tech/blog/anthropic-vs-openai-developer-experience https://www.developersdigest.tech/blog/anthropic-vs-openai-developer-experience Fri, 03 Apr 2026 00:00:00 GMT Developers Digest Anthropic OpenAI AI Developer Experience <![CDATA[Building a SaaS with Claude Code: End-to-End Guide]]> https://www.developersdigest.tech/blog/building-saas-with-claude-code https://www.developersdigest.tech/blog/building-saas-with-claude-code Fri, 03 Apr 2026 00:00:00 GMT Developers Digest Claude Code SaaS TypeScript Next.js <![CDATA[Case Study: Building Developers Digest with Claude Code]]> https://www.developersdigest.tech/blog/case-study-building-dd-with-ai https://www.developersdigest.tech/blog/case-study-building-dd-with-ai Fri, 03 Apr 2026 00:00:00 GMT Developers Digest Claude Code Case Study AI Coding Productivity <![CDATA[Convex vs Supabase for AI Apps]]> https://www.developersdigest.tech/blog/convex-vs-supabase-ai-apps https://www.developersdigest.tech/blog/convex-vs-supabase-ai-apps { setMessages((prev) => [...prev, payload.new]); }) .subscribe(); ``` For a chat interface with streaming AI responses, Convex's automatic reactivity saves significant code. ## Server Functions for AI AI apps need server-side logic: calling APIs with secrets, processing results, chaining calls. **Convex actions** are serverless functions that can call external APIs and are co-located with your schema. ```typescript // Convex action - calls AI API server-side export const generateResponse = action({ args: { prompt: v.string() }, handler: async (ctx, { prompt }) => { const response = await anthropic.messages.create({ model: "claude-sonnet-4-6", messages: [{ role: "user", content: prompt }], }); await ctx.runMutation(api.messages.save, { content: response.content[0].text, }); }, }); ``` **Supabase edge functions** are Deno-based serverless functions deployed separately. ```typescript // Supabase edge function Deno.serve(async (req) => { const { prompt } = await req.json(); const response = await anthropic.messages.create({ model: "claude-sonnet-4-6", messages: [{ role: "user", content: prompt }], }); // Insert into database separately await supabase.from("messages").insert({ content: response.content[0].text }); return new Response(JSON.stringify({ ok: true })); }); ``` Convex functions run in the same runtime as your database operations. Supabase edge functions are separate services that talk to your database over HTTP. ## Cron Jobs for AI Workflows Both support scheduled functions. AI apps commonly need them for: processing queues, periodic summaries, content generation. Convex cron jobs are defined in TypeScript alongside your functions. ```typescript // convex/crons.ts const crons = cronJobs(); crons.interval("process-queue", { minutes: 5 }, api.ai.processQueue); ``` Supabase uses pg_cron or external schedulers. More setup, but you get full SQL access. ## Type Safety **Convex is fully typed.** Schema defines types. Functions are typed. Client queries return typed data. End-to-end TypeScript with zero codegen friction. **Supabase** generates types from your Postgres schema via CLI, but the chain can break. Schema changes require running `supabase gen types` again. For AI apps that iterate fast, Convex's automatic type inference is a real productivity advantage. ## Vector Search for RAG If your AI app needs retrieval-augmented generation (RAG), you need vector search. **Supabase** has pgvector built in. Full-featured vector search with indexing, filtering, and similarity functions. Mature and battle-tested. **Convex** has vector search support but it is newer and less feature-rich than pgvector. For RAG-heavy applications, Supabase's pgvector is the stronger choice today. ## When to Use Each **Choose Convex when:** - Real-time UI is core (chat, collaboration, live dashboards) - You want reactive queries without WebSocket management - Your team is TypeScript-first - You want server functions co-located with your schema - You are building with Next.js and want the fastest integration **Choose Supabase when:** - You need relational data with complex queries - Vector search (RAG) is a primary feature - You want to use SQL directly - You need row-level security for multi-tenant apps - You want to self-host your backend **Choose both when:** - Convex for real-time features + Supabase for vector search/RAG - This is a valid architecture that plays to each platform's strengths ## Pricing Both have generous free tiers for getting started. | | Convex | Supabase | |---|---|---| | Free tier | 1M function calls, 1GB storage | 500MB database, 1GB storage | | Pro plan | $25/mo | $25/mo | | Scale | Pay per use | $599/mo | | Self-host | No | Yes | ## Frequently Asked Questions ### Can I use Convex and Supabase together? Yes. Use Convex for real-time features and server functions, Supabase (with pgvector) for vector search and RAG. They complement each other well. ### Which is better for a chat app with AI? Convex. The reactive queries mean your chat UI updates automatically when new messages arrive. Streaming AI responses integrate naturally with Convex mutations. ### Which has better TypeScript support? Convex. Its type system is end-to-end - schema, functions, and client are all typed automatically. Supabase requires codegen and manual type maintenance. ### Can I migrate from Supabase to Convex? Yes, but the data model changes (relational to document). Your application logic needs rewriting since Convex functions replace edge functions and API routes. ### Which scales better for AI workloads? Both scale well. Supabase gives you more control over database optimization. Convex handles scaling automatically but you have less visibility into the infrastructure. ]]> Fri, 03 Apr 2026 00:00:00 GMT Developers Digest Convex Supabase AI TypeScript Backend <![CDATA[How to Debug AI Agent Workflows]]> https://www.developersdigest.tech/blog/debug-ai-agent-workflows https://www.developersdigest.tech/blog/debug-ai-agent-workflows ; output: unknown; durationMs: number; timestamp: number; step: number; } function wrapTool(name: string, fn: (input: T) => Promise) { return async (input: T, step: number): Promise<{ result: unknown; log: ToolLog }> => { const start = Date.now(); try { const result = await fn(input); const log: ToolLog = { tool: name, input: input as Record, output: result, durationMs: Date.now() - start, timestamp: start, step, }; return { result, log }; } catch (error) { const log: ToolLog = { tool: name, input: input as Record, output: { error: String(error) }, durationMs: Date.now() - start, timestamp: start, step, }; return { result: null, log }; } }; } ``` When an agent goes wrong, you can trace the exact sequence: step 3 called `search_files` with the wrong query, got no results, then hallucinated the file content. ## Pattern 2: Context Window Snapshots The most common agent failure is context overflow. The agent loses important information because the context window filled up with tool outputs. ```typescript function trackContext(messages: Message[]): ContextSnapshot { const totalTokens = estimateTokens(messages); const breakdown = messages.map((m) => ({ role: m.role, tokens: estimateTokens([m]), preview: m.content.slice(0, 100), })); return { totalTokens, maxTokens: 200_000, utilization: totalTokens / 200_000, breakdown, warning: totalTokens > 150_000 ? "Context 75%+ full" : null, }; } ``` If your agent starts failing after 10+ steps, it is almost always context overflow. The fix: summarize intermediate results instead of keeping raw tool outputs. ## Pattern 3: Decision Trace Before each action, ask the agent to explain its reasoning in structured form. ```typescript const decisionSchema = z.object({ observation: z.string().describe("What I see in the current state"), reasoning: z.string().describe("Why I chose this action"), action: z.string().describe("What I will do next"), confidence: z.number().min(0).max(1).describe("How confident I am"), alternatives: z.array(z.string()).describe("Other actions I considered"), }); ``` When confidence drops below 0.5, you know exactly where the agent got uncertain. This is where human review adds the most value. ## Pattern 4: Replay and Diff Save the full agent trajectory so you can replay it. ```typescript interface AgentTrajectory { task: string; steps: { thought: string; action: string; toolInput: unknown; toolOutput: unknown; contextTokens: number; }[]; outcome: "success" | "failure" | "timeout"; totalSteps: number; totalDurationMs: number; } // Save trajectory async function saveTrajectory(trajectory: AgentTrajectory) { const id = `${Date.now()}-${trajectory.task.slice(0, 30)}`; await fs.writeFile( `./traces/${id}.json`, JSON.stringify(trajectory, null, 2) ); } ``` When a similar task fails, diff the successful trajectory against the failing one. The divergence point is usually the bug. ## Pattern 5: Claude Code Hooks for Debugging If you are using Claude Code, hooks give you deterministic debugging points. ```json { "hooks": { "PostToolUse": [ { "matcher": ".*", "command": "echo \"Tool: $TOOL_NAME | Exit: $EXIT_CODE\" >> /tmp/claude-debug.log" } ], "Stop": [ { "command": "echo \"Session ended at $(date)\" >> /tmp/claude-debug.log" } ] } } ``` Every tool call gets logged. Every session end gets recorded. Review the log when something goes wrong. ## Common Agent Failures **Infinite loops.** The agent keeps retrying the same action. Fix: add a step counter and bail after N attempts. **Tool misuse.** The agent calls a tool with the wrong arguments. Fix: improve tool descriptions and add input validation. **Context poisoning.** A large tool output fills the context with irrelevant data. Fix: truncate or summarize tool outputs before adding to context. **Premature termination.** The agent thinks it is done but it is not. Fix: add verification steps that check the actual result against the original task. **Wrong tool selection.** The agent picks the wrong tool for the job. Fix: make tool descriptions more specific about when to use each tool. ## When to Add a Human in the Loop Not every agent failure needs code fixes. Sometimes the right answer is human review at critical points: - Before destructive actions (file deletion, database writes) - When confidence drops below a threshold - After N consecutive failures - Before the final "done" declaration The best agent systems are not fully autonomous. They are autonomous for the easy parts and interactive for the hard parts. ## Frequently Asked Questions ### What is the most common reason AI agents fail? Context overflow. After enough tool calls, the context window fills with intermediate results and the agent loses track of the original task. The fix is summarizing intermediate results and managing context deliberately. ### How do I debug a Claude Code session that went wrong? Use hooks to log every tool call. Add a PostToolUse hook that records the tool name, input, and exit code. Review the log file to trace the exact decision sequence. The `/transcript` command also helps. ### Should I use structured logging for AI agents? Yes. Structured tool logs (JSON with tool name, input, output, duration, step number) are essential. You can filter, query, and diff them. Plain text logs are almost useless for multi-step agent debugging. ### How do I prevent infinite loops in agents? Add a max step counter and a loop detector. Track the last N actions - if the same tool+input combination appears 3 times, break the loop and ask for human input. ### When should I add human review to an agent workflow? Before destructive actions, when the agent's confidence is low, after consecutive failures, and before declaring a task complete. The goal is not to remove the human - it is to minimize unnecessary interruptions while keeping critical checkpoints. ]]> Fri, 03 Apr 2026 00:00:00 GMT Developers Digest AI Agents Debugging TypeScript Claude Code <![CDATA[MCP vs Function Calling: When to Use Each]]> https://www.developersdigest.tech/blog/mcp-vs-function-calling https://www.developersdigest.tech/blog/mcp-vs-function-calling { const data = await fetchWeather(city, units); return { content: [{ type: "text", text: JSON.stringify(data) }] }; } ); ``` Claude Code, Cursor, and other AI tools discover MCP servers and their capabilities automatically. The user does not wire up tool schemas manually. **When to use MCP:** - You want tools that work across multiple AI clients (Claude Code, Cursor, Windsurf) - You are exposing external services (databases, APIs, file systems) - You want tools to be discoverable and reusable - You are building infrastructure that other developers will use ## The Key Differences | | Function Calling | MCP | |---|---|---| | Level | Model API feature | Protocol layer | | Scope | Per-request | Persistent server | | Discovery | Manual (defined in code) | Automatic (server advertises) | | Portability | Tied to your app | Works across AI clients | | State | Stateless per call | Can maintain connections | | Resources | Tools only | Tools + resources + prompts | | Transport | HTTP/API | Stdio, HTTP, SSE | ## When They Work Together The best architectures use both. MCP servers provide reusable tool infrastructure. Function calling handles application-specific logic. ``` User prompt -> Claude Code / AI Client -> MCP Server (database access, file system, external APIs) -> Function calling (app-specific business logic) -> Response ``` Example: your AI coding assistant uses an MCP server for database queries (reusable across projects) and function calling for your specific code generation logic (unique to your app). ## Decision Framework **Reach for function calling when:** - You are building a custom AI application - Tools are tightly coupled to your business logic - You need maximum control over the model interaction - You are using the API directly (not through Claude Code or an IDE) **Reach for MCP when:** - You are connecting to an external service (database, API, SaaS tool) - You want the tool to work in Claude Code, Cursor, and other clients - You are building developer tooling or infrastructure - You want other developers to use your integration **Use both when:** - Your application connects to external services (MCP) AND has custom logic (function calling) - You are building a platform where some tools are reusable and others are app-specific ## The Trend MCP is winning for infrastructure-level tools. Database access, browser automation, Slack integration, GitHub operations - these all make sense as MCP servers because they are reusable across projects and clients. Function calling remains essential for application-specific logic. Your custom data pipeline, your specific API endpoints, your business rules - these belong in your application's function calling layer. The line between them will blur as more AI clients support MCP natively, but the architectural distinction will remain: protocol for reusable infrastructure, API for application logic. ## Frequently Asked Questions ### Can I use MCP without Claude Code? Yes. MCP is an open protocol. Cursor, Windsurf, Zed, and other tools support it. You can also use MCP servers directly via the TypeScript SDK in any Node.js application. ### Is function calling being replaced by MCP? No. They solve different problems. Function calling is how models interact with tools at the API level. MCP is how tools expose themselves to AI clients. A single application often uses both. ### Which is easier to set up? Function calling is simpler for quick prototypes - add a tool definition to your API call and handle the result. MCP requires running a separate server but pays off when you want the tool to work across multiple AI clients. ### Do I need to learn both? If you are building AI applications, yes. Function calling is fundamental to how models use tools. MCP is becoming the standard for how tools connect to AI development environments. ]]> Fri, 03 Apr 2026 00:00:00 GMT Developers Digest MCP AI Claude Code TypeScript <![CDATA[How to Migrate from GitHub Copilot to Claude Code]]> https://www.developersdigest.tech/blog/migrate-copilot-to-claude-code https://www.developersdigest.tech/blog/migrate-copilot-to-claude-code Fri, 03 Apr 2026 00:00:00 GMT Developers Digest Claude Code GitHub Copilot AI Coding Migration <![CDATA[10 TypeScript Patterns Every AI Developer Should Know]]> https://www.developersdigest.tech/blog/typescript-patterns-ai-developers https://www.developersdigest.tech/blog/typescript-patterns-ai-developers { const data = await fetchWeather(city, units); return { temperature: data.temp, condition: data.condition }; }, }); ``` The `parameters` schema validates input AND generates the JSON Schema that the model sees. One source of truth. ## 3. Structured Output with Type Inference When you need the model to return a specific shape, not free text. ```typescript import { generateObject } from "ai"; import { z } from "zod"; const ProductReview = z.object({ sentiment: z.enum(["positive", "negative", "neutral"]), score: z.number().min(0).max(10), keyPoints: z.array(z.string()).max(5), recommendation: z.boolean(), }); type ProductReview = z.infer; const { object } = await generateObject({ model: anthropic("claude-sonnet-4-6"), schema: ProductReview, prompt: `Analyze this review: "${reviewText}"`, }); // object is fully typed as ProductReview console.log(object.sentiment, object.score); ``` ## 4. Retry with Exponential Backoff Every AI API call fails sometimes. Rate limits, timeouts, server errors. Wrap calls in retry logic. ```typescript async function withRetry( fn: () => Promise, maxRetries = 3, baseDelay = 1000 ): Promise { for (let attempt = 0; attempt <= maxRetries; attempt++) { try { return await fn(); } catch (error) { if (attempt === maxRetries) throw error; const isRetryable = error instanceof Error && (error.message.includes("429") || error.message.includes("503") || error.message.includes("timeout")); if (!isRetryable) throw error; const delay = baseDelay * Math.pow(2, attempt) + Math.random() * 1000; await new Promise((resolve) => setTimeout(resolve, delay)); } } throw new Error("Unreachable"); } // Usage const result = await withRetry(() => generateText({ model: anthropic("claude-sonnet-4-6"), prompt }) ); ``` ## 5. Discriminated Unions for Agent Actions When agents can take multiple action types, discriminated unions make the type system enforce correctness. ```typescript type AgentAction = | { type: "search"; query: string } | { type: "write_file"; path: string; content: string } | { type: "run_command"; command: string; cwd?: string } | { type: "ask_user"; question: string } | { type: "done"; result: string }; function executeAction(action: AgentAction): Promise { switch (action.type) { case "search": return searchWeb(action.query); case "write_file": return writeFile(action.path, action.content); case "run_command": return exec(action.command, { cwd: action.cwd }); case "ask_user": return prompt(action.question); case "done": return Promise.resolve(action.result); } } ``` TypeScript guarantees you handle every action type. Adding a new type without handling it is a compile error. ## 6. Generic Message History Type-safe conversation history that works across providers. ```typescript interface Message { role: Role; content: string; metadata?: Record; } type ChatMessage = Message<"user" | "assistant" | "system">; class Conversation { private messages: ChatMessage[] = []; system(content: string): this { this.messages.push({ role: "system", content }); return this; } user(content: string): this { this.messages.push({ role: "user", content }); return this; } assistant(content: string): this { this.messages.push({ role: "assistant", content }); return this; } toArray(): ChatMessage[] { return [...this.messages]; } get lastAssistant(): string | undefined { return this.messages.findLast((m) => m.role === "assistant")?.content; } } ``` ## 7. Provider Abstraction Switch between AI providers without changing application code. ```typescript interface AIProvider { generate(prompt: string, options?: GenerateOptions): Promise; stream(prompt: string, options?: GenerateOptions): AsyncIterable; } interface GenerateOptions { maxTokens?: number; temperature?: number; systemPrompt?: string; } function createProvider(name: "anthropic" | "openai"): AIProvider { const providers: Record = { anthropic: { generate: async (prompt, opts) => { const { text } = await generateText({ model: anthropic("claude-sonnet-4-6"), prompt, maxTokens: opts?.maxTokens, temperature: opts?.temperature, system: opts?.systemPrompt, }); return text; }, stream: (prompt, opts) => streamProvider("anthropic", prompt, opts), }, openai: { generate: async (prompt, opts) => { const { text } = await generateText({ model: openai("gpt-5"), prompt, maxTokens: opts?.maxTokens, }); return text; }, stream: (prompt, opts) => streamProvider("openai", prompt, opts), }, }; return providers[name]; } ``` ## 8. Token Budget Management Track and limit token usage per request, per user, or per session. ```typescript interface TokenBudget { maxInput: number; maxOutput: number; used: { input: number; output: number }; } function createBudget(maxInput = 100_000, maxOutput = 4_096): TokenBudget { return { maxInput, maxOutput, used: { input: 0, output: 0 } }; } function checkBudget(budget: TokenBudget, inputTokens: number): boolean { return budget.used.input + inputTokens <= budget.maxInput; } function recordUsage( budget: TokenBudget, input: number, output: number ): TokenBudget { return { ...budget, used: { input: budget.used.input + input, output: budget.used.output + output, }, }; } // Usage in an agent loop let budget = createBudget(); while (checkBudget(budget, estimatedTokens)) { const result = await generateText({ model, prompt }); budget = recordUsage(budget, result.usage.promptTokens, result.usage.completionTokens); } ``` ## 9. Type-Safe Environment Config Never use untyped `process.env` directly. Parse and validate at startup. ```typescript import { z } from "zod"; const envSchema = z.object({ ANTHROPIC_API_KEY: z.string().min(1), OPENAI_API_KEY: z.string().min(1), DATABASE_URL: z.string().url(), NODE_ENV: z.enum(["development", "production", "test"]).default("development"), MAX_TOKENS: z.coerce.number().default(4096), ENABLE_STREAMING: z.coerce.boolean().default(true), }); export const env = envSchema.parse(process.env); // Now fully typed console.log(env.ANTHROPIC_API_KEY); // string console.log(env.MAX_TOKENS); // number console.log(env.ENABLE_STREAMING); // boolean ``` Parse once at the top of your app. If any variable is missing or malformed, it crashes immediately with a clear error instead of failing silently at runtime. ## 10. Result Type for Error Handling Replace try/catch with a Result type for composable error handling. ```typescript type Result = | { ok: true; value: T } | { ok: false; error: E }; function ok(value: T): Result { return { ok: true, value }; } function err(error: E): Result { return { ok: false, error }; } async function safeGenerate(prompt: string): Promise> { try { const { text } = await generateText({ model: anthropic("claude-sonnet-4-6"), prompt, }); return ok(text); } catch (e) { return err(e instanceof Error ? e : new Error(String(e))); } } // Usage - no try/catch needed const result = await safeGenerate("Explain monads"); if (result.ok) { console.log(result.value); } else { console.error("Failed:", result.error.message); } ``` ## Frequently Asked Questions ### Which TypeScript patterns matter most for AI apps? Streaming (pattern 1) and structured output (pattern 3) have the biggest impact. Streaming is table stakes for user experience. Structured output eliminates parsing errors and gives you type safety on model responses. ### Should I use Zod or TypeScript interfaces for AI tool parameters? Zod. TypeScript types disappear at runtime, but AI tools need runtime validation. Zod schemas generate both the TypeScript type (via `z.infer`) and the JSON Schema that models consume. One schema, two outputs. ### How do I handle AI API rate limits in TypeScript? Use the retry with exponential backoff pattern (pattern 4). Check for 429 status codes, add jitter to prevent thundering herd, and set a max retry count. The Vercel AI SDK has built-in retry support. ### What is the best way to type AI model responses? Use `generateObject()` with a Zod schema (pattern 3). The response is fully typed at compile time and validated at runtime. For streaming, use `streamObject()` which gives you partial typed results as they arrive. ### How do I switch between Claude and GPT without rewriting code? Use the provider abstraction pattern (pattern 7) or the Vercel AI SDK which handles this natively. Define a common interface and swap the model string. The AI SDK supports Anthropic, OpenAI, Google, and 20+ other providers with the same API. ]]> Fri, 03 Apr 2026 00:00:00 GMT Developers Digest TypeScript AI Patterns Vercel AI SDK <![CDATA[AI Agent Frameworks Compared: LangGraph vs CrewAI vs AutoGen vs Claude Agent SDK vs Vercel AI SDK]]> https://www.developersdigest.tech/blog/ai-agent-frameworks-compared https://www.developersdigest.tech/blog/ai-agent-frameworks-compared AgentState: category = llm.invoke(f"Classify: {state['query']}") return {"category": category} def handle_code(state: AgentState) -> AgentState: response = llm.invoke(f"Help with code: {state['query']}") return {"response": response} def handle_docs(state: AgentState) -> AgentState: response = llm.invoke(f"Find docs for: {state['query']}") return {"response": response} def route(state: AgentState) -> str: if state["category"] == "code": return "handle_code" elif state["category"] == "docs": return "handle_docs" return END graph = StateGraph(AgentState) graph.add_node("classify", classify) graph.add_node("handle_code", handle_code) graph.add_node("handle_docs", handle_docs) graph.set_entry_point("classify") graph.add_conditional_edges("classify", route) graph.add_edge("handle_code", END) graph.add_edge("handle_docs", END) app = graph.compile(checkpointer=MemorySaver()) ``` Every possible execution path is explicit in the graph definition. You can visualize, audit, and reason about agent behavior before running anything. ### Pros - **Checkpointing and time-travel debugging** - pause, inspect, and resume at any state - **Graph visualization** - see every execution path before runtime - **Model-agnostic** - plug different LLM providers into different nodes - **Production-proven** - companies like Uber, LinkedIn, and Klarna run LangGraph in production - **LangSmith integration** - trace-level observability across every node execution - **Human-in-the-loop** is trivial with `interrupt_before` on any node ### Cons - **Verbose** - even simple two-agent flows require state schemas, nodes, edges, and compilation - **Steep learning curve** - expect one to two weeks before your team is productive - **Python-first** - TypeScript support exists but lags behind - **Overkill for simple agents** - the graph abstraction adds meaningful overhead for straightforward workflows ### When to Use Complex, stateful workflows with many conditional branches. Financial compliance agents. Multi-step data pipelines with approval gates. Anything where you need deterministic control flow with LLM decision points and an audit trail of every agent decision. ## CrewAI **Latest version:** 1.10.1 | **GitHub:** 44.6K stars | **Downloads:** 12M+ monthly CrewAI uses a role-based metaphor. Instead of graphs, you define agents with roles, goals, and backstories, then organize them into crews that collaborate on tasks. ### Architecture Three core concepts: **Agents** (with roles and tool access), **Tasks** (units of work assigned to agents), and **Crews** (the orchestration layer that manages execution). The framework supports sequential, hierarchical, and consensual process types. Native MCP support through `crewai-tools[mcp]` lets agents declare MCP servers inline. A2A protocol support enables cross-framework agent communication. ### Code Example ```python from crewai import Agent, Task, Crew researcher = Agent( role="Technical Researcher", goal="Find accurate, up-to-date information on developer tools", backstory="Senior developer advocate with deep knowledge of " "the JavaScript ecosystem and AI tooling.", llm="claude-sonnet-4", ) writer = Agent( role="Technical Writer", goal="Turn research into clear, actionable content", backstory="Former engineering lead who writes concise " "documentation that developers actually read.", llm="claude-sonnet-4", ) research_task = Task( description="Research {topic}. Focus on practical use cases " "and current limitations.", agent=researcher, expected_output="A structured research summary with key findings", ) writing_task = Task( description="Write a developer guide based on the research. " "Include code examples.", agent=writer, expected_output="A complete guide in markdown format", context=[research_task], ) crew = Crew( agents=[researcher, writer], tasks=[research_task, writing_task], verbose=True, ) result = crew.kickoff(inputs={"topic": "MCP server development"}) ``` The code reads like a job description. That is intentional. CrewAI optimizes for rapid prototyping and intuitive multi-agent coordination. ### Pros - **Fastest prototyping** - working multi-agent system in under 20 lines - **Intuitive mental model** - roles and tasks map to how humans think about teams - **Model-agnostic** - supports OpenAI, Anthropic, open-source via Ollama - **Native MCP and A2A** - built-in support for both protocols - **Large community** - 44K+ GitHub stars, active development ### Cons - **Limited state management** - no built-in checkpointing for long-running workflows - **Coarse error handling** - agent-to-agent communication is mediated through task outputs, not direct messaging - **Less control** - the higher-level abstractions can feel limiting for complex routing - **Prototype-to-production gap** - teams often migrate to LangGraph when they hit state management limits ### When to Use Team-based workflows where agents have distinct expertise. Content pipelines (researcher, writer, editor). Customer support triage with specialized handlers. Any workflow where the role metaphor naturally fits your domain. ## AutoGen / AG2 (Microsoft) **Latest version:** AG2 0.4+ | **GitHub:** 50.6K stars AutoGen implements conversational agent teams where agents interact through multi-turn conversations. The v0.4 rewrite (AG2) added an event-driven core, async-first execution, and pluggable orchestration strategies. ### Architecture The primary coordination pattern is **GroupChat**: multiple agents in a shared conversation where a selector determines who speaks next. Agents debate, critique, and refine each other's outputs through dialogue. AG2 introduced pluggable selectors (round-robin, LLM-based, custom) and an event-driven messaging system. ### Code Example ```python from autogen import AssistantAgent, UserProxyAgent, GroupChat, GroupChatManager coder = AssistantAgent( name="Coder", system_message="You write clean Python code. " "Always include type hints and docstrings.", llm_config={"model": "gpt-4.1"}, ) reviewer = AssistantAgent( name="Reviewer", system_message="You review code for bugs, security issues, " "and performance problems. Be specific.", llm_config={"model": "gpt-4.1"}, ) user_proxy = UserProxyAgent( name="User", human_input_mode="NEVER", code_execution_config={"work_dir": "output"}, ) group_chat = GroupChat( agents=[user_proxy, coder, reviewer], messages=[], max_round=6, speaker_selection_method="auto", ) manager = GroupChatManager( groupchat=group_chat, llm_config={"model": "gpt-4.1"}, ) user_proxy.initiate_chat( manager, message="Write a Python function that validates email addresses " "using regex, then review it for edge cases.", ) ``` The conversational approach is natural for iterative tasks: code review (one agent writes, another reviews), content generation (writer + editor + fact-checker), and data analysis (analyst + validator). ### Pros - **Multi-agent debate** - agents iterate and improve each other's work - **Code execution** - built-in sandboxed code execution and validation - **Flexible orchestration** - pluggable selectors for conversation flow - **Research-backed** - Microsoft Research actively uses and maintains AutoGen - **Natural for iterative tasks** - perfect for review, critique, and refinement workflows ### Cons - **High token cost** - every agent turn involves a full LLM call with accumulated conversation history. A 4-agent debate with 5 rounds is 20+ LLM calls minimum - **Latency** - conversational pattern is slower than direct tool-use - **Complex configuration** - GroupChat tuning (max rounds, speaker selection) requires experimentation - **Python-only** - no official TypeScript SDK ### When to Use Code generation and review workflows. Research tasks where thoroughness matters more than speed. Content generation pipelines with multiple revision rounds. Offline, quality-sensitive workflows where agents need to iterate and critique each other's outputs. ## Claude Agent SDK (Anthropic) **Latest version:** 0.1.48 | **Languages:** Python, TypeScript Anthropic's Claude Agent SDK (formerly Claude Code SDK) takes a tool-use-first approach where agents are Claude models equipped with tools, including the ability to invoke other agents as tools. It uses the same engine that powers [Claude Code](/blog/what-is-claude-code). ### Architecture The defining feature is native [MCP (Model Context Protocol)](/blog/what-is-mcp) integration. Custom tools are implemented as in-process MCP servers that run directly within your application - no separate processes or network hops. Hooks provide lifecycle control: `before_tool_call`, `after_tool_call`, `on_error`, letting you inject logging, validation, or human approval at any point. Extended thinking gives you visible chain-of-thought reasoning in the API response. ### Code Example (TypeScript) ```typescript import { Agent, tool, createMCPServer } from "claude-agent-sdk"; const searchTool = tool({ name: "search_docs", description: "Search the documentation for relevant pages", parameters: { query: { type: "string", description: "Search query" }, }, execute: async ({ query }) => { const results = await searchIndex(query); return results.map((r) => r.title).join("\n"); }, }); const agent = new Agent({ model: "claude-sonnet-4-20250514", systemPrompt: "You are a developer support agent. Search docs, " + "then provide clear answers with code examples.", tools: [searchTool], hooks: { beforeToolCall: async (toolName, args) => { console.log(`Calling ${toolName}`, args); }, }, }); const response = await agent.run( "How do I set up authentication with Clerk in Next.js?" ); ``` ### Code Example (Python) ```python from claude_agent_sdk import Agent, tool @tool("search_docs", "Search documentation", {"query": str}) async def search_docs(args): results = await search_index(args["query"]) return {"content": [{"type": "text", "text": "\n".join(r.title for r in results)}]} agent = Agent( model="claude-sonnet-4-20250514", system_prompt="You are a developer support agent. Search docs, " "then provide clear answers with code examples.", tools=[search_docs], ) response = await agent.run("How do I set up authentication with Clerk in Next.js?") ``` The architecture is deliberately simple: an agent loop, tools, and hooks. Anthropic relies on Claude's native capabilities for reasoning and coordination rather than adding framework abstractions. ### Pros - **Native MCP integration** - tools run as in-process MCP servers with zero overhead - **Lifecycle hooks** - fine-grained control over every tool call for compliance, logging, and approval - **Extended thinking** - visible chain-of-thought reasoning for auditability - **Computer use** - agents can interact with desktop apps and browsers - **Safety-first** - constitutional AI constraints at the model level - **TypeScript and Python** - first-class support for both languages ### Cons - **Claude-only** - locked to Anthropic models, no model portability - **Alpha status** - API surface is still evolving - **Lighter orchestration** - fewer built-in coordination primitives compared to LangGraph - **Smaller ecosystem** - newer framework with fewer third-party integrations ### When to Use Teams invested in the Anthropic ecosystem. Workflows requiring deep MCP integration with multiple tool servers. Agents that need lifecycle hooks for compliance and approval flows. Safety-critical applications in healthcare, finance, and legal. Projects already using Claude Code. ## Vercel AI SDK **Latest version:** 5.x | **GitHub:** 12K+ stars | **npm:** 2M+ weekly downloads The [Vercel AI SDK](/blog/vercel-ai-sdk-guide) is the TypeScript-first option. It is not an agent framework in the traditional sense - it is a toolkit for building AI-powered applications that includes agent capabilities through its `generateText` function with `maxSteps` for multi-step tool use. ### Architecture The SDK provides a unified interface across LLM providers (OpenAI, Anthropic, Google, Mistral, and more) with three core primitives: `generateText` for server-side generation, `streamText` for streaming responses, and `useChat` for React integration. Agent behavior comes from the `maxSteps` parameter, which creates a tool-use loop where the model can call tools and reason across multiple steps. ### Code Example ```typescript import { generateText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; const result = await generateText({ model: anthropic("claude-sonnet-4-20250514"), maxSteps: 5, system: "You are a developer support agent. Use the available tools " + "to research questions, then provide clear answers.", tools: { searchDocs: tool({ description: "Search the documentation", parameters: z.object({ query: z.string().describe("Search query"), }), execute: async ({ query }) => { const results = await searchIndex(query); return results.map((r) => `${r.title}: ${r.summary}`).join("\n"); }, }), getCodeExample: tool({ description: "Fetch a code example by topic", parameters: z.object({ topic: z.string().describe("The topic to find examples for"), }), execute: async ({ topic }) => { return await fetchExample(topic); }, }), }, prompt: "How do I implement rate limiting in a Next.js API route?", }); console.log(result.text); console.log(`Steps taken: ${result.steps.length}`); ``` The SDK integrates seamlessly with React and Next.js through hooks like `useChat` and `useCompletion`, making it the natural choice for full-stack TypeScript applications. ### Pros - **TypeScript-native** - designed for the TypeScript ecosystem from day one - **Model-agnostic** - unified interface across 20+ LLM providers - **React integration** - `useChat`, `useCompletion`, and streaming hooks for UI - **Zod schemas** - type-safe tool definitions with runtime validation - **Lightweight** - no heavy abstractions, just functions and tools - **Next.js native** - streaming responses work out of the box with RSC and route handlers ### Cons - **Not a full agent framework** - no built-in multi-agent coordination, state management, or checkpointing - **Limited orchestration** - multi-agent patterns require manual implementation - **No graph or crew abstractions** - you build your own coordination layer - **Web-focused** - primarily designed for web application backends, not standalone agent systems ### When to Use Full-stack TypeScript applications with AI features. Next.js projects that need streaming chat, tool use, or multi-step reasoning. Teams that want model flexibility without framework lock-in. Situations where the agent is part of a larger web application rather than a standalone system. ## Decision Matrix | Feature | LangGraph | CrewAI | AutoGen/AG2 | Claude Agent SDK | Vercel AI SDK | |---|---|---|---|---|---| | **Orchestration** | Directed graph | Role-based crews | Conversational GroupChat | Tool-use loop + hooks | maxSteps tool loop | | **Language** | Python (TS beta) | Python | Python | Python + TypeScript | TypeScript | | **Model Lock-in** | None | None | None | Claude only | None | | **State Persistence** | Built-in checkpointing | Task outputs | Conversation history | Via MCP servers | Manual | | **Learning Curve** | High | Low | Medium | Medium | Low | | **Multi-Agent** | Native (sub-graphs) | Native (crews) | Native (GroupChat) | Sub-agents as tools | Manual | | **MCP Support** | Via LangChain | Native | Community | Native (first-class) | Via tools | | **Human-in-the-Loop** | Built-in (interrupt) | Manual | Built-in | Hooks | Manual | | **Streaming** | Per-node | Limited | Limited | Native | Native | | **Best For** | Complex stateful workflows | Fast prototyping | Iterative refinement | MCP-heavy, safety-critical | Full-stack TS apps | | **GitHub Stars** | 24.6K | 44.6K | 50.6K | Growing | 12K+ | | **Production Maturity** | High | Medium | Medium | Alpha | High | ## Which Framework Should You Pick Here is the decision tree, simplified: **You need complex branching workflows with audit trails** - Use LangGraph. The graph model gives you deterministic control, and checkpointing is non-negotiable for regulated industries. **You want the fastest path from idea to working prototype** - Use CrewAI. Define roles, assign tasks, run the crew. You will have agents working in an afternoon. **Your agents need to iterate, debate, and refine** - Use AutoGen/AG2. The conversational pattern is natural for code review, research, and content pipelines where quality comes from multiple revision rounds. **You are building with Claude and need MCP integration** - Use the Claude Agent SDK. Native MCP, lifecycle hooks, and extended thinking make it the tightest integration with Anthropic's ecosystem. **You are building a TypeScript web app with AI features** - Use the Vercel AI SDK. It is not trying to be a full agent framework. It is the best toolkit for adding AI capabilities to Next.js applications. **You need model flexibility across providers** - Use LangGraph, CrewAI, or Vercel AI SDK. All three are model-agnostic. **You are not sure yet** - Start with CrewAI or Vercel AI SDK (depending on your language). Both have the lowest barrier to entry. You can always migrate to LangGraph when you hit the limits. ## Can You Combine Frameworks Yes, and many production systems do. Common combinations: - **Vercel AI SDK + Claude Agent SDK** - use the AI SDK for your web layer and streaming UI, invoke Claude Agent SDK agents for complex backend tasks - **LangGraph + CrewAI** - use LangGraph as the outer orchestration graph, with CrewAI crews as individual nodes for team-based sub-tasks - **Any framework + MCP** - MCP is a protocol, not a framework. Every framework can consume MCP servers for tool access The key insight is that these frameworks operate at different levels of abstraction. The Vercel AI SDK is a toolkit. CrewAI is a coordination layer. LangGraph is an orchestration engine. They are not mutually exclusive. ## FAQ ### What is the best AI agent framework for beginners? CrewAI has the lowest learning curve. You define agents with roles and goals, assign tasks, and run them. A working multi-agent system takes under 20 lines of code. For TypeScript developers, the Vercel AI SDK is the most accessible starting point since it uses familiar patterns like Zod schemas and async functions. ### Can I use multiple LLM providers in a single agent system? LangGraph, CrewAI, AutoGen, and the Vercel AI SDK all support multiple providers. You can route different tasks to different models - use Claude for reasoning-heavy steps, GPT for code generation, and a local model for classification. The Claude Agent SDK is the only framework here locked to a single provider. ### Do I need an agent framework for a simple chatbot? No. If your application is a single model with a few tools, raw API calls or the Vercel AI SDK's `generateText` with tools is sufficient. Frameworks add value when you need multi-step orchestration, persistent state, error recovery, or multi-agent coordination. Do not add framework complexity until the problem demands it. ### What is MCP and why does it matter for agent frameworks? [MCP (Model Context Protocol)](/blog/what-is-mcp) is a standard for how AI models discover and use tools. Instead of each framework implementing its own tool format, MCP provides a universal interface. This means a tool built as an MCP server works across Claude Code, Cursor, VS Code, and any MCP-compatible framework. CrewAI and the Claude Agent SDK have native MCP support. LangGraph and AutoGen can consume MCP servers through adapters. ### Which framework has the best TypeScript support? The Vercel AI SDK is TypeScript-native and the clear leader for TypeScript developers. The Claude Agent SDK has official TypeScript support. LangGraph has a beta TypeScript package. CrewAI and AutoGen are Python-only. ### How do I migrate from one framework to another? The cleanest migration path is to keep your tools framework-agnostic. Define tools as MCP servers or plain async functions, then swap the orchestration layer. If your tools are tightly coupled to a specific framework's abstractions, migration gets painful. Design for portability from the start. ### Are these frameworks production-ready? LangGraph and the Vercel AI SDK are the most production-mature, with companies running them at scale. The OpenAI Agents SDK and Claude Agent SDK are production-capable but newer. CrewAI and AutoGen are widely used but have fewer production case studies at enterprise scale. Always evaluate checkpointing, error recovery, and observability for your specific use case. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Agents TypeScript LangChain CrewAI <![CDATA[Every AI Coding Tool Compared: The 2026 Matrix]]> https://www.developersdigest.tech/blog/ai-coding-tools-comparison-matrix-2026 https://www.developersdigest.tech/blog/ai-coding-tools-comparison-matrix-2026 Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Coding Claude Code Cursor Codex Windsurf Aider Comparison <![CDATA[AI Coding Tools Pricing Comparison 2026]]> https://www.developersdigest.tech/blog/ai-coding-tools-pricing-2026 https://www.developersdigest.tech/blog/ai-coding-tools-pricing-2026 Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Coding Pricing Claude Code Cursor <![CDATA[303 AI Skills for 12 Careers: The Free Directory]]> https://www.developersdigest.tech/blog/ai-skills-every-career-2026 https://www.developersdigest.tech/blog/ai-skills-every-career-2026 Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Skills Claude Code Cursor Computer Use Productivity Career <![CDATA[AI Skills for Every Career: Agents and Knowledge Work]]> https://www.developersdigest.tech/blog/ai-skills-knowledge-work https://www.developersdigest.tech/blog/ai-skills-knowledge-work Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Skills AI Agents Productivity Knowledge Work <![CDATA[Claude Code Channels: Control Your Coding Agent from Telegram and Discord]]> https://www.developersdigest.tech/blog/claude-code-channels https://www.developersdigest.tech/blog/claude-code-channels ` events and pushed into the active Claude Code session 3. **Claude processes the request** using your local environment, then replies through the channel Your code stays local. The messaging app is a window into your session, not a cloud-hosted environment. Nothing gets uploaded to Telegram or Discord servers beyond the conversation text. Setting it up takes one command: ```bash # Install the Telegram channel plugin claude channel install telegram # Start Claude Code with the channel active claude --channel telegram ``` You will get a pairing code. Send it to your Telegram bot. Once paired, any message you send in that chat goes straight to Claude Code. ## What You Can Do From Your Phone Anything you can do in the terminal session, you can do from the chat: - Ask Claude to fix a bug, refactor a file, or add a feature - Check build status or test results - Review diffs before committing - Run commands and see output - Ask questions about the codebase The interaction feels like texting a developer who has your entire project open. Because that is essentially what it is. ``` You: "Run the tests for the auth module" Claude: "Running `npm test -- --testPathPattern=auth`... 3 tests passed, 1 failed: FAIL src/auth/token.test.ts - refreshToken should handle expired sessions The failure is in the token refresh logic. The test expects a 401 response but gets a 403. Want me to look at the handler?" You: "Yes, fix it" ``` ## The Architecture Under the Hood Channels use a push-based event model. Traditional MCP tools wait for Claude to call them. Channels invert that - external events arrive in the session whether Claude requested them or not. The runtime is Bun. All official channel plugins require it. They will silently fail on Node.js with no error message, which caught several early adopters off guard. Make sure Bun is installed before setting up channels. ```bash # Install Bun if you do not have it curl -fsSL https://bun.sh/install | bash ``` Security uses a three-layer model: 1. **Pairing codes** - one-time codes that bind a chat to a session 2. **Access controls** - allowlists for which users and chats can interact 3. **Session isolation** - each channel connects to exactly one Claude Code session Enterprise teams get admin controls for managing access across organizations. ## Real Workflows **Mobile code review.** You are in a meeting and get a PR notification. Pull out your phone, ask Claude to review the diff, summarize the changes, and flag any issues. All through Telegram. **Overnight builds.** Start a long migration before bed. Wake up, check progress from your phone, give the next instruction, go make coffee. **Pair programming from anywhere.** Your teammate is at the keyboard. You are on a train. Send instructions through Discord. They see Claude executing in real time. **CI debugging.** Tests fail in CI. You are away from your desk. Send the error log to Claude through Telegram, ask it to diagnose and fix. ## Tips for Getting the Most Out of Channels 1. **Be specific in messages.** You do not have the terminal context in front of you, so give clear instructions. "Fix the auth bug" is vague. "The token refresh test in src/auth/token.test.ts is failing - fix the handler" is actionable. 2. **Use channels for async work.** The best pattern is: start a task, walk away, check in periodically. Do not try to have a rapid back-and-forth from your phone - that is what the terminal is for. 3. **Set up notifications.** Configure your channel to notify you when Claude finishes a task or hits a blocker. You do not want to keep checking manually. 4. **Keep sessions focused.** One channel per task. Do not multiplex unrelated work through the same session. ## How It Compares to OpenClaw The open-source project [OpenClaw](https://github.com/AgeOfAI/openclaw) went viral in late 2025 by letting users message AI agents over iMessage, Telegram, WhatsApp, and more. Channels is Anthropic's answer. The key difference is security. OpenClaw grants deep filesystem access with minimal guardrails, which spawned safety-focused forks. Channels ships with enterprise-grade access controls, session isolation, and Anthropic's safety infrastructure baked in. ## FAQ ### Do I need to keep my computer running? Yes. Channels connect to a running Claude Code session on your local machine. If your computer sleeps or the session ends, the channel disconnects. For always-on setups, consider running Claude Code on a remote server or VM. ### Is my code sent to Telegram or Discord? Only the conversation text passes through the messaging platform. Your source code and files stay on your local machine. Claude reads and writes files locally - it sends you summaries and results through the chat, not raw file contents. ### Can multiple people connect to the same session? Yes, with access controls. You can allowlist specific users or group chats. This enables team workflows where multiple developers interact with the same Claude Code session through a shared Discord channel. ### Does it work with other messaging platforms? At launch, Telegram and Discord are officially supported. The channel system is built on MCP, so third-party plugins for Slack, iMessage, and other platforms are possible and some community implementations already exist. ### How much does it cost? Channels itself is free - it is part of Claude Code. You pay for Claude Code usage as normal (either through the Max plan or API credits). The messaging platforms are free to use with bot accounts. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Code AI Coding <![CDATA[Claude Code Hooks Explained]]> https://www.developersdigest.tech/blog/claude-code-hooks-explained https://www.developersdigest.tech/blog/claude-code-hooks-explained /dev/null || true" } ] } ] } } ``` **Go:** ```json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && [ -n \"$FILE\" ] && [[ \"$FILE\" == *.go ]] && gofmt -w \"$FILE\" || true" } ] } ] } } ``` **Python (Black):** ```json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && [ -n \"$FILE\" ] && [[ \"$FILE\" == *.py ]] && python -m black \"$FILE\" 2>/dev/null || true" } ] } ] } } ``` The `2>/dev/null || true` at the end is important. It prevents the hook from failing on files the formatter doesn't support. ### 2. Block Dangerous Commands Prevent Claude from running destructive shell commands, even in autonomous mode. ```json { "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "CMD=$(cat | jq -r '.tool_input.command // empty') && if echo \"$CMD\" | grep -qEi '(rm\\s+-rf\\s+/|DROP\\s+TABLE|DROP\\s+DATABASE|mkfs\\.|:\\(\\)\\{|chmod\\s+-R\\s+777\\s+/|dd\\s+if=.*of=/dev/)'; then echo \"BLOCKED: Dangerous command detected\" >&2; exit 2; fi" } ] } ] } } ``` Exit code `2` is the key. It tells Claude Code to block the operation and feed the stderr message back to Claude as an error. Claude sees the message, understands why the operation was blocked, and adjusts its approach. Blocked patterns include: - `rm -rf /` (recursive delete from root) - `DROP TABLE` / `DROP DATABASE` (SQL destruction) - `mkfs.` (format filesystem) - Fork bombs - `chmod -R 777 /` (recursive permission change on root) - `dd if=... of=/dev/` (raw disk writes) ### 3. Protect Sensitive Files Block Claude from touching files that should never be AI-modified. ```json { "hooks": { "PreToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && if echo \"$FILE\" | grep -qE '(\\.env|\\.lock|secrets\\.yaml|credentials|id_rsa|\\.pem)'; then echo \"BLOCKED: Cannot modify protected file: $FILE\" >&2; exit 2; fi" } ] } ] } } ``` Customize the grep pattern for your project. Add migration files, CI configs, or anything else that shouldn't change without human review. ### 4. Desktop Notifications Get notified when Claude needs your attention or finishes a long task. Essential if you multitask while Claude works. **macOS:** ```json { "hooks": { "Notification": [ { "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"Claude needs your attention\" with title \"Claude Code\"'" } ] } ] } } ``` **Linux:** ```json { "hooks": { "Notification": [ { "hooks": [ { "type": "command", "command": "notify-send 'Claude Code' 'Claude needs your attention'" } ] } ] } } ``` Put this in `~/.claude/settings.json` so it works across all projects. ### 5. Run Tests Before Stopping Force Claude to verify its own work before it finishes. This is the hook that changed how I use Claude Code. ```json { "hooks": { "Stop": [ { "hooks": [ { "type": "command", "command": "npm test 2>&1 || (echo 'Tests are failing. Please fix before finishing.' >&2; exit 2)" } ] } ] } } ``` If tests fail, the `Stop` hook returns exit code 2, which forces Claude to continue working. Claude sees the test output and attempts to fix the failures. This creates an automatic test-fix loop. For a smarter version, use a prompt hook that evaluates whether the task is actually complete: ```json { "hooks": { "Stop": [ { "hooks": [ { "type": "prompt", "prompt": "Analyze this context: $ARGUMENTS. Were all requested tasks completed? Were tests run and passing? If not, respond with {\"decision\": \"block\", \"reason\": \"explanation\"}. If everything looks good, respond with {\"decision\": \"approve\"}." } ] } ] } } ``` ### 6. Git Auto-Stage Automatically stage every file Claude modifies, so changes are always ready to commit. ```json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && [ -n \"$FILE\" ] && [ -f \"$FILE\" ] && git add \"$FILE\" 2>/dev/null || true" } ] } ] } } ``` Pair this with a solid `.gitignore`. You do not want to accidentally stage build artifacts or node_modules. ### 7. Inject Project Context on Session Start Load project-specific context automatically when Claude Code starts. ```json { "hooks": { "SessionStart": [ { "hooks": [ { "type": "command", "command": "echo \"Current branch: $(git branch --show-current). Last 3 commits: $(git log --oneline -3). Open issues: $(gh issue list --limit 5 --json title -q '.[].title' 2>/dev/null || echo 'N/A')\"" } ] } ] } } ``` The stdout from `SessionStart` hooks gets injected as context for Claude. Every session starts with awareness of your current branch, recent commits, and open issues. No more explaining where you left off. ### 8. ESLint Auto-Fix Run ESLint with auto-fix on JavaScript/TypeScript files after every edit. ```json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && [ -n \"$FILE\" ] && [[ \"$FILE\" =~ \\.(js|ts|jsx|tsx)$ ]] && npx eslint --fix \"$FILE\" 2>/dev/null || true" } ] } ] } } ``` The regex check prevents ESLint from running on files it can't handle. ## Input and Output ### What Hooks Receive Hooks receive JSON on stdin with context about the current event. The structure varies by event type. **Base fields (all events):** ```json { "session_id": "abc123", "transcript_path": "/Users/you/.claude/projects/my-project/conversation.jsonl", "cwd": "/Users/you/my-project", "hook_event_name": "PostToolUse" } ``` **Tool events add:** ```json { "tool_name": "Edit", "tool_input": { "file_path": "/Users/you/my-project/src/index.ts", "old_string": "...", "new_string": "..." } } ``` `PostToolUse` also includes `tool_response` with the result. Use `jq` to extract specific fields in your hook commands: ```bash # Get the file path cat | jq -r '.tool_input.file_path' # Get the bash command cat | jq -r '.tool_input.command' # Get the tool name cat | jq -r '.tool_name' ``` ### Exit Codes For `PreToolUse` hooks, exit codes control flow: | Exit Code | Effect | |-----------|--------| | `0` | Allow the operation | | `2` | Block the operation. stderr is sent to Claude as feedback | | Other | Hook error. Operation proceeds, error is logged | For `PostToolUse` hooks, the operation already happened, so the exit code doesn't block anything. But stderr output still gets sent to Claude as context. ### Structured JSON Output `PreToolUse` hooks can return structured JSON on stdout for fine-grained control: ```json { "hookSpecificOutput": { "hookEventName": "PreToolUse", "permissionDecision": "allow" } } ``` Valid values for `permissionDecision`: - `"allow"` - skip the permission prompt, auto-approve - `"deny"` - block the operation (same as exit code 2) - `"ask"` - show the normal permission prompt to the user This is useful for auto-allowing safe operations while still prompting for anything risky. ## Setting Up Hooks Two ways to configure hooks. ### Interactive: The /hooks Command Type `/hooks` in Claude Code. Choose the event, add a new hook, set your matcher, enter the command, save. Claude Code updates your settings file and reloads the configuration. This is the easiest way to get started. ### Manual: Edit settings.json Open `.claude/settings.json` in your project (or `~/.claude/settings.json` for global hooks) and add the hooks configuration directly. ```json { "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "your-command-here" } ] } ], "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "another-command-here" } ] } ] } } ``` Restart Claude Code or use `/hooks` to reload after manual edits. ## Tips and Gotchas ### Keep hooks fast Every hook adds latency. A 200ms formatter is fine. A 30-second test suite on every file edit is not. Save heavy operations for `Stop` hooks, not `PostToolUse`. ### Use `|| true` to prevent cascading failures If your hook command fails on certain files (like running Prettier on a binary), the error can confuse Claude. Append `|| true` to commands that might fail on edge cases. ### Format on commit, not on every edit Auto-formatting on every `PostToolUse` works, but each format change triggers a system reminder to Claude about the file modification. This eats into your context window. For large projects, a better pattern is formatting on `Stop` or through a git pre-commit hook rather than on every individual edit. ### Test hooks before deploying Ask Claude to write a test file and verify your hook triggers. Check Claude Code's transcript (Ctrl+O) for error messages if a hook doesn't seem to work. ### Mid-session edits don't apply Claude Code snapshots hook configuration at startup. If you edit your settings.json while a session is running, the changes won't take effect until you start a new session. ### Matcher regex is case-sensitive `"Bash"` matches. `"bash"` does not. Tool names are PascalCase: `Bash`, `Edit`, `Write`, `Read`, `Glob`, `Grep`. ### Exit code 2 blocks, everything else doesn't Only exit code 2 blocks a `PreToolUse` operation. Exit code 1 or any other non-zero code is treated as a hook error and logged, but the operation still proceeds. ### Hooks run in parallel when multiple match If you have three `PostToolUse` hooks with the same matcher, all three run simultaneously. They don't run sequentially. ### Use the timeout field for slow commands Hooks have a default timeout of 60 seconds. For commands that might take longer, set the `timeout` field explicitly (in milliseconds): ```json { "type": "command", "command": "npm test", "timeout": 120000 } ``` ### Don't block stdin in command hooks Your hook command receives JSON on stdin. If your command doesn't read stdin (like a simple `echo`), that's fine. But if it reads stdin and then hangs waiting for more input, the hook will timeout. Always consume stdin completely or ignore it. ## Combining Hooks for a Full Workflow Here's a production-ready configuration that combines multiple hooks into a cohesive workflow: ```json { "hooks": { "SessionStart": [ { "hooks": [ { "type": "command", "command": "echo \"Branch: $(git branch --show-current). Last commit: $(git log --oneline -1). Node: $(node -v)\"" } ] } ], "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "CMD=$(cat | jq -r '.tool_input.command // empty') && if echo \"$CMD\" | grep -qEi '(rm\\s+-rf\\s+/|DROP\\s+TABLE|DROP\\s+DATABASE)'; then echo \"BLOCKED: Dangerous command\" >&2; exit 2; fi" } ] }, { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && if echo \"$FILE\" | grep -qE '(\\.env|\\.lock)'; then echo \"BLOCKED: Protected file\" >&2; exit 2; fi" } ] } ], "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "FILE=$(cat | jq -r '.tool_input.file_path // empty') && [ -n \"$FILE\" ] && npx prettier --write \"$FILE\" 2>/dev/null || true" } ] } ], "Notification": [ { "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"Claude needs your attention\" with title \"Claude Code\"'" } ] } ], "Stop": [ { "hooks": [ { "type": "command", "command": "npm test 2>&1 | tail -20" } ] } ] } } ``` This gives you: project context on start, dangerous command blocking, sensitive file protection, auto-formatting, desktop notifications, and test output on completion. Six hooks covering the full development lifecycle. ## Hooks vs. CLAUDE.md Rules | | CLAUDE.md | Hooks | |-|-----------|-------| | **Enforcement** | Probabilistic (model may ignore) | Deterministic (always runs) | | **Speed** | Zero overhead | Adds latency per hook | | **Flexibility** | Natural language, very flexible | Structured, requires JSON config | | **Blocking** | Cannot block operations | Can block with exit code 2 | | **Best for** | Coding style, conventions, preferences | Safety, formatting, verification | Use both. CLAUDE.md for soft guidance ("prefer named exports"). Hooks for hard requirements ("never touch .env files"). ## FAQ **How do I set up my first hook?** Type `/hooks` in Claude Code. Choose an event, set a matcher, enter a command. Or edit `.claude/settings.json` directly. **Can hooks modify tool inputs before execution?** Yes. `PreToolUse` hooks can return an `updatedInput` field in their JSON output to modify tool arguments before execution. Useful for path correction or secret redaction. **Do hooks work in headless mode (`claude -p`)?** Yes. Hooks fire in both interactive and headless mode. **What happens if a hook times out?** The hook is killed and treated as a non-blocking error. The operation proceeds normally. **Can I use hooks to auto-approve permissions?** Yes. A `PreToolUse` hook returning `{"hookSpecificOutput": {"permissionDecision": "allow"}}` on stdout will skip the permission prompt. This is a safer alternative to `--dangerously-skip-permissions` because you control exactly which operations get auto-approved. **How do I debug hooks that aren't working?** Press Ctrl+O in Claude Code to open the transcript. Hook errors and output appear there. Common issues: wrong case in matcher names, commands not found in PATH, and syntax errors in the JSON config. **Can I have multiple hooks for the same event?** Yes. Multiple hook entries under the same event run in parallel. Multiple matchers for the same event each fire independently when their pattern matches. **Are there community hook collections?** Yes. The `disler/claude-code-hooks-mastery` repo on GitHub has configurations for all events including security validation and observability. The `lasso-security/claude-hooks` repo focuses on prompt injection defense. **How do hooks compare to Cursor's hook system?** Cursor added hooks in v1.7 with 6 events and command-only handlers. Claude Code has 15 events and three handler types (command, prompt, agent). The prompt and agent hook types are unique to Claude Code. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Code AI Coding Automation <![CDATA[How to Use Claude Code with Next.js]]> https://www.developersdigest.tech/blog/claude-code-nextjs-tutorial https://www.developersdigest.tech/blog/claude-code-nextjs-tutorial tags. - Use next/link for all internal navigation. - CSS: Tailwind utility classes only. No CSS modules, no styled-components. - File naming: kebab-case for files, PascalCase for components. ## Component Patterns - Pages export default async function (Server Component) - Client components go in separate files with "use client" directive - Shared layouts use layout.tsx with children prop - Loading states use loading.tsx (Suspense boundary) - Error boundaries use error.tsx with "use client" ## Testing - Vitest for unit tests - Playwright for e2e tests - Run: npm run test (unit), npm run test:e2e (e2e) - All new features need at least one test ## Common Gotchas - Don't import server-only code in client components - Don't use useState/useEffect in server components - Always handle loading and error states - Use dynamic imports for heavy client components - Environment variables: NEXT_PUBLIC_ prefix for client-side access ``` Adapt this to your actual stack. The key sections are Architecture (so Claude knows where files go), Conventions (so it follows your patterns), and Common Gotchas (so it doesn't make mistakes you've already solved). You can also create nested CLAUDE.md files. Drop one in `app/api/` with API-specific conventions. Drop one in `components/ui/` with component patterns. Claude reads the nearest CLAUDE.md relative to the files it's working on. ## Common Workflows ### Adding a New Page This is the most frequent task. Tell Claude what the page should do and it handles the App Router conventions. ``` Add a /pricing page with three tiers (Free, Pro, Enterprise). Use the existing Card component from components/ui. Server component, no client-side state needed. ``` Claude creates `app/pricing/page.tsx` with proper metadata exports, the right imports, and follows your Tailwind patterns. It knows to use `generateMetadata` for SEO because it read your other pages. For dynamic routes: ``` Add a blog detail page at /blog/[slug]. Fetch the post from the database using the slug param. Include generateStaticParams for the 20 most recent posts. Add a loading.tsx skeleton and error.tsx boundary. ``` Claude generates all four files: `page.tsx`, `loading.tsx`, `error.tsx`, and updates any shared types. It uses `generateStaticParams` correctly because your CLAUDE.md says "App Router." ### Creating API Routes ``` Create a POST /api/webhooks/stripe route handler that verifies the Stripe signature, handles checkout.session.completed events, and updates the user's subscription status in the database. ``` Claude creates `app/api/webhooks/stripe/route.ts` with proper Next.js route handler syntax. It uses `NextRequest`, returns `NextResponse`, handles the raw body correctly for Stripe signature verification, and follows your Prisma patterns. The important detail: Claude knows the difference between Pages Router API routes (`pages/api/`) and App Router route handlers (`app/api/.../route.ts`). If your CLAUDE.md says App Router, it won't generate the wrong format. ### Building Components ``` Create a DataTable component that takes generic typed data, supports sorting, pagination, and column filtering. Server-side rendering for the initial data, client-side interactivity for sort/filter/paginate. ``` Claude splits this correctly: a server component wrapper that fetches data and passes it to a client component that handles interactivity. It adds "use client" only to the interactive part. It types the generic properly with TypeScript. For simpler components: ``` Build a command palette component (Cmd+K). Search across pages, blog posts, and docs. Use the existing search index from lib/search.ts. ``` Claude creates the client component with proper keyboard event handling, focus management, and accessibility attributes. It imports from your existing code rather than reinventing things. ## Sub-Agents for Frontend and Backend Work Claude Code supports [sub-agents](/blog/claude-code-sub-agents) - spawning focused agents for parallel work. This is powerful for full-stack Next.js projects where frontend and backend changes are independent. ### The Pattern When you have a feature that touches both the API layer and the UI, tell Claude to parallelize: ``` Build a user settings page. For the backend: - Create a GET and PATCH /api/settings route handler - Add a Zod schema for settings validation - Write a Prisma query for updating user preferences For the frontend: - Create app/(dashboard)/settings/page.tsx - Build a SettingsForm client component with react-hook-form - Add optimistic updates with useOptimistic - Include loading.tsx and error.tsx ``` Claude spawns sub-agents: one handles the API routes and database layer, another builds the UI components. They work in parallel, and Claude coordinates the shared types between them. ### When to Use Sub-Agents - **New features with API + UI**: settings pages, CRUD interfaces, dashboards - **Refactors across layers**: renaming a data model that touches schema, API, and components - **Test writing**: one agent writes unit tests, another writes e2e tests - **Migration work**: one agent updates the database schema, another updates the TypeScript types and components ### When Not to Use Them - Simple single-file changes - Changes where files depend on each other sequentially (the migration must finish before the component update makes sense) - Debugging, where you need to trace through the full stack ## MCP Servers Useful for Next.js [MCP servers](/blog/what-is-mcp) extend Claude Code's capabilities beyond reading and writing files. Here are the ones that matter for Next.js development. ### Database: Prisma / Postgres MCP If you use Prisma, the Prisma MCP server lets Claude query your database directly. Instead of guessing at your schema, it reads it. Instead of writing queries blind, it can test them. ```json { "mcpServers": { "prisma": { "command": "npx", "args": ["prisma-mcp-server"] } } } ``` Claude can now inspect your schema, run test queries, and verify that its Prisma code actually works against your database. ### Browser Testing: Playwright MCP The Playwright MCP server lets Claude interact with your running dev server. It can navigate pages, click buttons, fill forms, and take screenshots. ```json { "mcpServers": { "playwright": { "command": "npx", "args": ["@anthropic-ai/mcp-playwright"] } } } ``` This is useful for: - Visual verification after building a component - Testing form submission flows end-to-end - Catching layout issues Claude can't see from code alone - Verifying responsive behavior at different viewport sizes ### Filesystem + Git: Built-in Claude Code already has filesystem and git capabilities built in. No MCP server needed. It can read files, write files, run shell commands, and commit changes. For Next.js specifically, this means it can: - Run `npm run build` to verify no TypeScript errors - Run `npm run lint` to check ESLint rules - Run your test suite after making changes - Check `next build` output for route analysis ### Fetch / HTTP: For API Testing The fetch MCP server lets Claude make HTTP requests to your running dev server. Test your API routes without leaving the terminal. ```json { "mcpServers": { "fetch": { "command": "npx", "args": ["@anthropic-ai/mcp-fetch"] } } } ``` Start your dev server, tell Claude to hit your endpoints, and it verifies the responses match expectations. Faster feedback loop than writing test files for exploratory work. ## TypeScript + Next.js Tips ### Strict Mode Is Your Friend Enable strict mode in `tsconfig.json`. Claude Code works significantly better with strict TypeScript because the type errors give it clear signals about what's wrong. ```json { "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true } } ``` When Claude writes code that violates a type constraint, it sees the error immediately and fixes it. Without strict mode, subtle bugs slip through. ### Tell Claude About Your Type Patterns Add a section to CLAUDE.md about how you handle types: ```markdown ## Type Patterns - API responses use shared types from lib/types/api.ts - Form data validated with Zod, inferred types with z.infer - Database types auto-generated by Prisma (never edit manually) - Component props defined inline for simple cases, extracted to types/ for shared ones - Use satisfies for type-safe object literals - Prefer Record over {[key: string]: T} ``` This prevents Claude from defining types in random places or using inconsistent patterns. ### Server vs. Client Type Boundaries The server/client boundary in Next.js is where most type bugs live. Claude handles this well if you're explicit about the pattern: ```markdown ## Server/Client Boundary - Server Components receive data as props from parent server components or fetch it directly. No "use client" unless absolutely needed. - Client Components receive serializable props only. No passing functions, classes, or Maps across the boundary. - Server Actions are defined with "use server" and accept FormData or serializable arguments. - Use separate type files for server-only and shared types. ``` ### Path Aliases Configure path aliases in your `tsconfig.json` so Claude uses clean imports: ```json { "compilerOptions": { "paths": { "@/*": ["./src/*"], "@/components/*": ["./src/components/*"], "@/lib/*": ["./src/lib/*"] } } } ``` Claude picks these up automatically and uses `@/components/Button` instead of `../../../components/Button`. Cleaner code, fewer merge conflicts. ### Leverage next build One of the most underused workflows: tell Claude to run `next build` after making changes. The build output catches: - Type errors across the entire project - Invalid server/client component boundaries - Missing "use client" directives - Dead code and unused imports (with the right ESLint config) - Route conflicts and missing pages ``` Run next build and fix any errors. ``` Claude iterates until the build passes. This single command catches more bugs than most manual review processes. ## Putting It All Together Here's a real workflow. You want to add a dashboard page with charts and data tables. 1. Start Claude Code in your project root 2. Claude reads your CLAUDE.md automatically 3. You describe the feature ``` Build a /dashboard page that shows: - Monthly revenue chart (line chart) - Recent transactions table (sortable, paginated) - KPI cards at the top (revenue, users, conversion rate) Use the existing Prisma schema for transactions. Chart library: recharts. Already installed. This needs to be a mix of server and client components. ``` 4. Claude plans the approach: server component page that fetches data, client components for the chart and interactive table, KPI cards as server components since they're static 5. It creates the files, following your conventions from CLAUDE.md 6. It runs `next build` to verify everything compiles 7. If you have the Playwright MCP server, it navigates to `/dashboard` and takes a screenshot for visual verification The whole thing takes minutes. Not hours. And it follows your patterns because you told it your patterns. ## FAQ **Do I need Claude Max or does Pro work?** Both work. Max gives you more usage and access to Opus, which handles complex multi-file changes better. Pro with Sonnet is fine for everyday Next.js work. Use Opus for large refactors, architectural changes, or when sub-agents are involved. **Does Claude Code work with Pages Router?** Yes. Put "Pages Router" in your CLAUDE.md and it generates `pages/` directory files, `getServerSideProps`, `getStaticProps`, and `pages/api/` routes. But honestly, if you're starting a new project, use App Router. Claude Code handles it better because the conventions are more explicit. **How does it handle next/image and next/font?** Well, as long as you specify it in CLAUDE.md. Tell it which image loader you use, whether you have a custom `next.config.ts` for remote patterns, and which fonts you've set up. Claude follows the config. **Can it set up a Next.js project from scratch?** Yes. `npx create-next-app@latest` with your preferred options, then Claude can scaffold the entire project structure: authentication, database, layouts, components, the works. But it's more effective on existing projects where it has context to match. **What about Next.js middleware?** Claude handles middleware well. Specify in CLAUDE.md that you use middleware for auth redirects, rate limiting, or whatever your case is, and it generates `middleware.ts` at the root with the right matcher config. **How do I prevent Claude from adding "use client" everywhere?** Put it in your CLAUDE.md: "Server Components by default. Only add 'use client' when you need interactivity, browser APIs, or React hooks." Claude follows this consistently. If it adds "use client" unnecessarily, point it out once and it corrects. **Does Claude understand Next.js caching and revalidation?** Yes. It generates `revalidatePath`, `revalidateTag`, and fetch cache options correctly. If you use ISR, specify your revalidation strategy in CLAUDE.md so it matches your patterns. **What if my project uses a monorepo (Turborepo)?** Create a CLAUDE.md at the monorepo root describing the workspace structure, plus one in each app/package with specific conventions. Claude reads the nearest one relative to the files it's editing. This works well for `apps/web`, `apps/api`, `packages/ui` patterns. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Code Next.js TypeScript AI Coding <![CDATA[Claude Code vs Cursor vs Codex: Which Should You Use?]]> https://www.developersdigest.tech/blog/claude-code-vs-cursor-vs-codex-2026 https://www.developersdigest.tech/blog/claude-code-vs-cursor-vs-codex-2026 instead of raw T. Update imports, calls, error handlers, and tests. Run tsc after each batch." ``` **CI and automation.** Claude Code runs where your code runs - terminals, SSH sessions, CI containers, GitHub Actions. You can wire it into a pipeline that self-heals failing builds or generates code from specs. **Skills and custom workflows.** Claude Code supports [skills](/blog/self-improving-skills-claude-code) - reusable prompt templates that encode domain knowledge. A skill for your project's conventions means the agent follows your patterns automatically. Browse available skills at [skills.developersdigest.tech](https://skills.developersdigest.tech). **Sub-agent delegation.** Claude Code can spawn [sub-agents](/blog/claude-code-sub-agents) for parallel work. Need to update tests, docs, and implementation simultaneously? Three sub-agents handle it concurrently. ### Where it falls short No visual diff review. You see the results after the agent finishes, not during. If you prefer approving each change before it lands, the terminal workflow requires more trust in the agent's output. No inline completions. Claude Code does not complete your code as you type. It is a task-oriented tool, not a typing assistant. ### Pricing Claude Code requires a Claude Max subscription at $100/month (5x usage) or $200/month (20x usage). There is no free tier. The cost is justified if you are using it daily for autonomous work - the time savings on large refactors alone can pay for it in a single session. ## Cursor: The IDE Agent Cursor is the tool you use when you want AI integrated into every part of your editing experience. It is the closest to how most developers already work - inside an editor, with visual feedback on every change. ### Where it excels **Inline completions.** Cursor predicts what you are about to type and suggests completions in real time. Not just single lines - multi-line blocks, function bodies, and pattern completions based on surrounding code. Tab to accept, keep typing to ignore. **Visual diff review.** When Composer edits files, you see green and red lines. Accept individual hunks, reject others, re-prompt for adjustments. This granular control is valuable when the agent gets 90% right and you need to fix the other 10%. **Chat with context.** Highlight code, ask a question, get an answer grounded in your actual implementation. The chat panel understands your open files and project structure. **Rapid iteration.** Cursor's feedback loop is the tightest of the three. Prompt, see the diff, accept, prompt again. For exploratory development where requirements are fuzzy, this speed matters. ### Where it falls short Desktop-only. Cursor cannot run in CI, SSH sessions, or headless environments. It is fundamentally a GUI application. Context limitations. Cursor works best with the files you have open. Large refactors that span hundreds of files require multiple Composer sessions and manual batching. Claude Code handles this better. No long-running autonomy. Composer edits files in response to prompts, but it does not run tests, fix errors, and re-iterate automatically. You are the loop. ### Pricing $20/month for Pro. Includes fast premium model requests and unlimited slow requests. The best value in AI coding tools for developers who spend most of their time in an editor. ## Codex: The Cloud Agent Codex is the tool you use when you want to parallelize work across your team. It runs in a cloud sandbox, so you can assign it multiple tasks simultaneously without tying up your local machine. ### Where it excels **Parallel task execution.** Spin up five Codex agents on five different issues. Each one clones the repo, works independently, and submits a PR. Your local machine stays free for manual work. **Safe sandboxing.** Codex cannot break your local environment. It operates in an isolated container with a fresh copy of your repo. If it produces bad code, you reject the PR. No mess to clean up. **PR-based workflow.** Teams that do thorough code review already have a process for evaluating PRs. Codex slots into that workflow naturally. The AI-generated PR gets the same review treatment as any human PR. **Background work.** Assign Codex a task before a meeting. Come back to a ready PR. It does not need your attention while it works. ### Where it falls short No local access. Codex cannot read files outside the repo, access local databases, run integration tests against your dev environment, or use local tools. It operates in a hermetically sealed sandbox. Slower feedback. The round trip - assign task, wait for agent, review PR - takes longer than Cursor's inline editing or Claude Code's direct file manipulation. Not ideal for rapid iteration. GPT-5.3 only. No model choice. If GPT-5.3 struggles with your codebase's patterns, you cannot swap to Claude or another model. ### Pricing Included with ChatGPT Pro ($200/month) or available through API credits. The per-task cost depends on complexity and runtime, but typical tasks run $0.50-5.00. ## When to Use Each ### Use Claude Code when: - You need autonomous refactors across many files - You are working in CI/CD pipelines or headless environments - You want sub-agent delegation for parallel work - You trust the agent to make good decisions without visual approval - You have a Claude Max subscription and want maximum autonomy ### Use Cursor when: - You are actively writing code and want inline completions - You prefer visual diff review before accepting changes - You are doing exploratory development with unclear requirements - You want the tightest feedback loop possible - You spend most of your time in VS Code already ### Use Codex when: - You want to parallelize work across multiple tasks - You prefer PR-based review workflows - You need safe sandboxed execution with no local side effects - You want to assign tasks and walk away - Your team already does thorough PR review ## Using Multiple Tools Together The real unlock is combining them. Here is a workflow that uses all three: 1. **Cursor** for active development - writing new features, exploring APIs, iterating on UI components. The inline completions and visual diffs keep you in flow. 2. **Claude Code** for maintenance and refactoring - migrating dependencies, updating patterns across the codebase, running automated fixes. Let it work autonomously while you focus on the creative work in Cursor. 3. **Codex** for backlog parallelization - assign five low-priority issues to Codex before lunch. Review the PRs when you get back. None of them required your active attention. This is not theoretical. Developers who use all three report shipping 3-5x more code per week than those who use only one. The key is matching the tool to the task's characteristics: how much oversight it needs, where it runs, and whether it can happen in the background. For tracing and debugging your AI coding workflows across tools, [traces.developersdigest.tech](https://traces.developersdigest.tech) provides visibility into what each agent did, which files it touched, and where it spent tokens. ## The Decision Flowchart Ask yourself three questions: **Do I need to see every change before it lands?** - Yes: Cursor - No: Claude Code or Codex **Does the task require local environment access?** - Yes: Claude Code or Cursor - No: Codex is fine **Will I be actively working while the agent runs?** - Yes, on this task: Cursor - Yes, on something else: Claude Code or Codex - No, I am stepping away: Codex If you only pick one, pick the one that matches how you spend most of your coding time. If you write code all day in an editor, Cursor. If you manage large codebases and value autonomy, Claude Code. If you want background parallelization, Codex. But most developers do all three types of work. That is why the multi-tool approach wins. ## Frequently Asked Questions ### Can I use Claude Code and Cursor together? Yes. Many developers run Claude Code in a terminal alongside Cursor in the editor. Claude Code handles large autonomous tasks while Cursor handles interactive editing. They operate on the same filesystem, so changes from one are immediately visible to the other. ### Which tool has the best model? Claude Code uses Claude Opus 4.6 and Sonnet 4.6, which lead on coding benchmarks. Cursor uses its in-house Composer 2 model supplemented by frontier models. Codex uses GPT-5.3. In practice, the model matters less than the workflow. A good tool with a slightly weaker model often outperforms a raw API call to the best model because the tooling handles context, error recovery, and iteration. ### Is Cursor worth it if I already have Claude Code? Yes, for different reasons. Cursor gives you inline completions that speed up active typing - something Claude Code does not do. And the visual diff review is genuinely useful for exploratory work where you want to approve each change. They complement rather than replace each other. ### What about other tools like Windsurf, Aider, or Augment? The market has more options. [Windsurf](/blog/windsurf-vs-cursor) is another IDE agent similar to Cursor. [Aider](/blog/aider-vs-claude-code) is an open-source terminal agent. Augment focuses on large codebases with deep indexing. Claude Code, Cursor, and Codex represent the three dominant architectures, but the specific tools within each category continue to evolve. For the full landscape, see [Best AI Coding Tools 2026](/blog/best-ai-coding-tools-2026). ## Bottom Line There is no single best AI coding tool. There are three good tools built on three different architectures, each optimized for a different workflow. Pick the one that matches your primary use case. Then add the others as your work demands it. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Code Cursor Codex AI Coding Comparison <![CDATA[Claude Computer Use: AI That Controls Your Desktop]]> https://www.developersdigest.tech/blog/claude-computer-use https://www.developersdigest.tech/blog/claude-computer-use Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Code Anthropic Computer Use AI <![CDATA[Claude Haiku 4.5: Near-Frontier Intelligence at a Fraction of the Cost]]> https://www.developersdigest.tech/blog/claude-haiku-4-5 https://www.developersdigest.tech/blog/claude-haiku-4-5 Opus plans the refactor # -> Multiple Haiku 4.5 sub-agents execute file changes in parallel ``` **Real-time applications.** Chat assistants, customer service agents, pair programming tools - anything where latency matters. Haiku 4.5 responds fast enough that the AI feels instant rather than sluggish. **Computer use.** Surprisingly, Haiku 4.5 surpasses Sonnet 4 on [computer use](/blog/claude-computer-use) tasks. If you are building desktop automation, the small model is actually the better choice. **High-volume batch processing.** At 3x cheaper than Sonnet, running Haiku 4.5 on thousands of files, PRs, or code reviews becomes economically viable in ways that frontier models are not. ## How to Use It Through the API, just swap the model name: ```python import anthropic client = anthropic.Anthropic() response = client.messages.create( model="claude-haiku-4-5", max_tokens=1024, messages=[ {"role": "user", "content": "Review this function for bugs..."} ] ) ``` In Claude Code, Haiku 4.5 is already integrated as the default sub-agent model. You do not need to configure anything - it handles the fast, parallel execution tasks while the primary model (Opus or Sonnet) handles planning and complex reasoning. On [claude.ai](https://claude.ai), Haiku 4.5 is available in the model selector for all users, including free tier. ## When to Use Haiku vs. Sonnet vs. Opus The model lineup has a clear hierarchy now: - **Haiku 4.5** - fast, cheap, good enough for most coding tasks. Use for sub-agents, batch processing, real-time apps, and any task where you need speed over maximum intelligence. - **Sonnet** - the balanced option. Better at complex reasoning and multi-step planning. Use as your primary coding model when you need reliability on hard problems. - **Opus** - maximum intelligence. Use for architecture decisions, complex debugging, and tasks where getting it right the first time matters more than cost. The practical pattern most teams settle on: Opus or Sonnet as the orchestrator, Haiku 4.5 as the executor. Planning happens once at the top. Execution happens many times in parallel at the bottom. This gives you the best of both worlds. ## What the Industry Says Augment reported that Haiku 4.5 achieves 90% of Sonnet 4.5's performance in their agentic coding evaluation. Warp called it "a leap forward for agentic coding, particularly for sub-agent orchestration." Vercel noted that "just six months ago, this level of performance would have been state-of-the-art on our internal benchmarks." The consensus is the same from every direction: the speed-intelligence tradeoff that used to define small models is disappearing. Haiku 4.5 is not a compromise. It is a genuinely capable model that happens to be fast and cheap. ## The Bigger Picture Haiku 4.5 represents a pattern in AI development. Today's frontier becomes tomorrow's commodity. The model that was cutting-edge in May is the small, cheap option by October. This compression benefits developers enormously - the capabilities you are building against keep getting cheaper to run. For teams building on Claude, the practical takeaway is straightforward: audit your model usage. Anything running on Sonnet 4 that does not require frontier reasoning can likely drop to Haiku 4.5 with no quality loss and 3x cost savings. ## FAQ ### Is Haiku 4.5 good enough for production coding tasks? Yes. It matches Sonnet 4 on SWE-bench Verified, which tests real-world GitHub issue resolution. For most coding tasks - code review, bug fixes, test generation, refactoring - Haiku 4.5 delivers results that are indistinguishable from what the larger models produce. ### How does Haiku 4.5 compare to GPT-4o-mini or Gemini Flash? Haiku 4.5 outperforms both on coding benchmarks while maintaining competitive pricing. Its particular strength is agentic workflows - multi-step tasks where the model needs to use tools, navigate codebases, and make sequential decisions. ### Can I use Haiku 4.5 as my only model? You can, but you will hit its limits on complex architectural reasoning and novel problem-solving. The recommended pattern is to use it alongside a larger model - let Sonnet or Opus handle the hard thinking, and Haiku handles the execution. ### What is the context window? Haiku 4.5 supports a 200K token context window, same as the larger Claude models. This means it can process entire codebases, long documents, and extended conversation histories without truncation. ### Does Haiku 4.5 support tool use and function calling? Yes. Full tool use, function calling, computer use, and all Claude API features are supported. There are no capability restrictions compared to larger models - only differences in reasoning depth on complex tasks. ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Claude Anthropic AI Models <![CDATA[The Complete Guide to MCP Servers]]> https://www.developersdigest.tech/blog/complete-guide-mcp-servers https://www.developersdigest.tech/blog/complete-guide-mcp-servers { const tasks = await fetchTasks({ status, limit }); return { content: [ { type: "text", text: JSON.stringify(tasks, null, 2), }, ], }; } ); // Define a tool for creating tasks server.tool( "create_task", "Create a new task with a title and optional description", { title: z.string().describe("Task title"), description: z.string().optional().describe("Task description"), priority: z.enum(["low", "medium", "high"]).default("medium") .describe("Task priority level"), assignee: z.string().optional().describe("Email of the assignee"), }, async ({ title, description, priority, assignee }) => { const task = await createTask({ title, description, priority, assignee }); return { content: [ { type: "text", text: `Created task ${task.id}: ${task.title}`, }, ], }; } ); // Define a tool for updating task status server.tool( "update_task_status", "Update the status of an existing task", { taskId: z.string().describe("The task ID"), status: z.enum(["open", "in_progress", "done"]) .describe("New status"), }, async ({ taskId, status }) => { const task = await updateTask(taskId, { status }); return { content: [ { type: "text", text: `Updated task ${task.id} to ${status}`, }, ], }; } ); // Start the server const transport = new StdioServerTransport(); await server.connect(transport); ``` Build and test: ```bash npx tsc echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"test","version":"1.0.0"}}}' | node dist/index.js ``` If you see a JSON response with the server's capabilities, it is working. ### Adding Resources Resources let you expose read-only data that the model can access without calling a tool: ```typescript server.resource( "project-readme", "file:///project/README.md", async (uri) => { const content = await readFile("./README.md", "utf-8"); return { contents: [ { uri: uri.href, mimeType: "text/markdown", text: content, }, ], }; } ); ``` ### Error Handling Tools should return errors as content, not throw exceptions. This gives the model information it can reason about: ```typescript server.tool( "query_database", "Execute a read-only SQL query", { sql: z.string() }, async ({ sql }) => { try { if (!sql.trim().toUpperCase().startsWith("SELECT")) { return { content: [{ type: "text", text: "Error: Only SELECT queries are allowed.", }], isError: true, }; } const result = await pool.query(sql); return { content: [{ type: "text", text: JSON.stringify(result.rows, null, 2), }], }; } catch (err) { return { content: [{ type: "text", text: `Query failed: ${(err as Error).message}`, }], isError: true, }; } } ); ``` The `isError: true` flag tells the client that this response represents a failure, which helps the model decide whether to retry or take a different approach. ### Publishing Your Server Package it for npm: ```json { "name": "mcp-server-project-manager", "version": "1.0.0", "bin": { "mcp-server-project-manager": "dist/index.js" }, "files": ["dist"] } ``` Add a shebang to your entry point: ```typescript #!/usr/bin/env node // src/index.ts import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; // ... ``` Publish: ```bash npm publish ``` Users can now configure it with: ```json { "project-manager": { "command": "npx", "args": ["-y", "mcp-server-project-manager"] } } ``` ## Best MCP Servers by Category The ecosystem has hundreds of servers. These are the ones that solve real problems. For the full searchable directory with working configurations, visit [mcp.developersdigest.tech](https://mcp.developersdigest.tech). ### Databases **Postgres** (`@anthropic-ai/mcp-server-postgres`) - the gold standard. Read-only by default, which is exactly right for AI agents writing SQL against your data. Supports query execution, schema inspection, and EXPLAIN ANALYZE. **SQLite** (`@anthropic-ai/mcp-server-sqlite`) - same capabilities as Postgres, for SQLite databases. Good for local development and embedded applications. **Redis** (`mcp-server-redis`) - key-value operations, pub/sub inspection, and cache management. Useful for debugging caching issues without switching to a Redis CLI. ### Code and Version Control **GitHub** (`@anthropic-ai/mcp-server-github`) - the second server most developers install. Search repos, read and create issues, open PRs, comment on code reviews. Scope your token to minimum required permissions. **Git** (`mcp-server-git`) - local git operations. Diff inspection, log browsing, branch management. Useful when your agent needs git context without shelling out to the CLI. ### Web and Search **Firecrawl** (`firecrawl-mcp`) - scrape web pages, extract structured data, crawl entire sites. The best web scraping server in the ecosystem. Handles JavaScript-rendered pages that simpler scrapers miss. **Brave Search** (`@anthropic-ai/mcp-server-brave-search`) - web search with clean, structured results. Requires a Brave Search API key (free tier available). ### Productivity **Slack** (`mcp-server-slack`) - read channels, send messages, search history. Useful for agents that need to pull context from team conversations. **Linear** (`mcp-server-linear`) - issue tracking integration. Create, update, and search issues. Good for agents that manage engineering workflows. **Notion** (`mcp-server-notion`) - read and write Notion pages and databases. Useful for agents that need to reference documentation or update project wikis. ### Infrastructure **Docker** (`mcp-server-docker`) - list containers, read logs, manage images. Useful for debugging deployment issues without switching to a terminal. **Kubernetes** (`mcp-server-kubernetes`) - pod management, log access, resource inspection. Read-only by default - do not give an AI agent write access to production clusters. **AWS** (`mcp-server-aws`) - S3, Lambda, CloudWatch, and other AWS service interactions. Scope your IAM credentials tightly. ### Files and Data **Filesystem** (`@anthropic-ai/mcp-server-filesystem`) - the most fundamental server. Read, write, search, and manage files. Restrict access to specific directories. This is the first server you should install. **Google Drive** (`mcp-server-google-drive`) - read and search files in Google Drive. Useful for agents that need to reference documents, spreadsheets, or presentations. ## Security Best Practices MCP servers run with the permissions of the user who starts them. This means they can potentially access anything on your machine. Follow these practices: **Principle of least privilege.** Give each server only the access it needs. The filesystem server takes directory paths as arguments - pass only the directories the agent should read. GitHub tokens should use minimum required scopes. **Read-only defaults.** When possible, configure servers for read-only access. The Postgres server is read-only by default. If your server supports write operations, make them opt-in rather than default. **No secrets in server configs.** Use environment variables for API keys and tokens, not hardcoded values in configuration files. If your config is checked into version control, anyone with repo access can see your secrets. ```json { "github": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-github"], "env": { "GITHUB_TOKEN": "${GITHUB_TOKEN}" } } } ``` **Audit tool calls.** Monitor what your agent is doing with MCP tools. Most hosts provide logging of tool calls and their results. Review these logs regularly, especially when first deploying a new server. **Sandbox destructive operations.** If an MCP server can modify data (write files, update databases, create issues), add confirmation mechanisms. The agent should preview what it intends to do before executing destructive actions. ## Debugging MCP Servers When a server is not working, the issue is usually in one of three places. ### Server will not start Check that the command and arguments are correct. Test by running the command manually: ```bash npx -y @anthropic-ai/mcp-server-filesystem /Users/you/projects ``` If it fails, the error message usually tells you what is wrong - missing dependency, invalid arguments, or permissions issue. ### Server starts but tools are not visible The client and server might have a protocol version mismatch. Check the server's package version and update if needed: ```bash npm info @anthropic-ai/mcp-server-filesystem version ``` ### Tools fail at runtime Add logging to your custom servers: ```typescript server.tool("my_tool", "description", { param: z.string() }, async ({ param }) => { console.error(`[my_tool] Called with param: ${param}`); try { const result = await doSomething(param); console.error(`[my_tool] Success: ${JSON.stringify(result)}`); return { content: [{ type: "text", text: JSON.stringify(result) }] }; } catch (err) { console.error(`[my_tool] Error: ${err}`); return { content: [{ type: "text", text: `Error: ${err}` }], isError: true }; } }); ``` Logs go to stderr (not stdout, which is reserved for the JSON-RPC protocol). In Claude Code, check the MCP server logs with `/mcp` to see server status and recent errors. ## Frequently Asked Questions ### What is MCP? Model Context Protocol (MCP) is an open standard created by Anthropic that defines how AI agents connect to external tools and data sources. It provides a universal interface so that any MCP client (like Claude Code or Cursor) can work with any MCP server (like a database connector or GitHub integration) without custom code. ### Do I need MCP to use Claude Code? No. Claude Code works without any MCP servers configured. MCP extends what the agent can access beyond the local filesystem and shell. Without MCP, Claude Code reads files and runs commands. With MCP, it can also query databases, search the web, manage GitHub issues, and interact with any service that has an MCP server. ### How many MCP servers can I run at once? There is no hard limit, but each server is a running process that consumes memory. Most developers run 3-8 servers. Start with filesystem and one or two domain-specific servers, then add more as needed. ### Are MCP servers secure? MCP servers run with your user permissions. They are as secure as you configure them to be. Follow the principle of least privilege - restrict filesystem access to specific directories, use read-only database connections, and scope API tokens to minimum required permissions. The protocol itself does not add security vulnerabilities, but misconfigured servers can expose sensitive data. ### Can I use MCP servers with models other than Claude? Yes. MCP is model-agnostic. Any AI tool that implements the MCP client protocol can use MCP servers. Cursor (which uses multiple models), the Claude desktop app, and several open-source tools all support MCP. The protocol does not care which model is making the tool calls. ### What is the difference between MCP tools and resources? Tools are functions the model can call - they perform actions and return results. Resources are data the model can read - they provide context passively. Use tools for operations (query a database, create an issue) and resources for reference data (project documentation, configuration files). ### How do I find MCP servers for a specific service? The [MCP Server Directory](https://mcp.developersdigest.tech) catalogs 184+ servers with working configurations and category-based browsing. You can also search npm for `mcp-server-*` packages or browse the community repositories on GitHub. ## What to Build Next If you are new to MCP, start with two servers: filesystem and one that connects to a service you use daily (GitHub, Postgres, Slack). Configure them, restart your AI tool, and try prompts that require cross-service context. If you have hit the limits of existing servers, build your own. The TypeScript SDK gets you from zero to a working server in under an hour. Start with a single tool, verify it works, and add more capabilities incrementally. For the quick-start conceptual overview, see [What Is MCP](/blog/what-is-mcp). For configuration details specific to Claude Code and Cursor, see [How to Use MCP Servers](/blog/how-to-use-mcp-servers). For a ranked list of the best servers, see [Best MCP Servers 2026](/blog/best-mcp-servers-2026). And for the full searchable directory, visit [mcp.developersdigest.tech](https://mcp.developersdigest.tech). ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest MCP Model Context Protocol Claude Code AI Tools TypeScript <![CDATA[DD Traces: Beautiful Local OpenTelemetry for AI Development]]> https://www.developersdigest.tech/blog/dd-traces-local-otel https://www.developersdigest.tech/blog/dd-traces-local-otel ): { experimental_telemetry: TelemetrySettings } { return { experimental_telemetry: { isEnabled: true, functionId, metadata: meta, }, }; } // Usage in any route or server action: const result = await generateText({ model: openai("gpt-4o"), prompt: "Summarize this document", ...aiTelemetry("summarize", { userId: "u-123" }), }); ``` You can also skip the explicit exporter URL by setting an environment variable: ```env OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318 ``` The `@vercel/otel` package reads this automatically. ## What You See Once traces flow in, DD Traces gives you several views designed for AI development workflows. ### Waterfall Timeline The main trace view is a waterfall timeline showing every span in a trace as a horizontal bar. Parent-child relationships are rendered as nested indentation, so you can see the full call hierarchy at a glance. A typical AI trace looks like this: ``` POST /api/chat ============================== 4,217ms auth.middleware == 23ms ai.generateText (chat) ========================== 3,102ms ai.generateText.doGenerate =================== 2,100ms ai.toolCall: searchDocs ====== 340ms ai.generateText.doGenerate ======= 620ms db.insert (save response) === 45ms ``` Each bar is color-coded by type: pink for LLM calls, amber for tool calls, emerald for HTTP spans, blue for database queries. Duration bars scale proportionally so slow spans are immediately obvious. ### Span Detail Panel Click any span and a detail panel shows everything the AI SDK reported: - **Model info** - which model, which provider, finish reason - **Token usage** - prompt tokens, completion tokens, total - **Cost estimate** - calculated from a built-in pricing table covering GPT-4o, Claude Sonnet, Gemini Pro, and others - **Timing** - duration, time to first chunk (for streaming), throughput in tokens per second - **Content** - the actual prompt and response text (when `recordInputs` and `recordOutputs` are enabled) - **Tool calls** - tool name, arguments, and results for each tool invocation For streaming calls, you also see `msToFirstChunk` and `avgCompletionTokensPerSecond` so you can measure perceived latency separately from total duration. ### Token and Cost Tracking DD Traces calculates costs per span and per trace using a built-in model pricing table. You see exactly how many tokens each LLM call consumed and what it cost. Totals are aggregated at the trace level so you can answer "how much did this agent session cost?" in one glance. The dashboard also tracks running totals across all traces in a session: total tokens per service, total cost per model, and the most expensive traces. ### Service Map The service map renders a visual graph of how your services connect. For AI applications, this shows the flow from your HTTP endpoint through model calls, tool executions, and database writes. Nodes are color-coded by health status and annotated with request rates and error percentages. ### Search and Filter Filter traces by status (success, error, slow), search by trace ID, service name, or operation. Real-time updates stream in via WebSocket so you do not need to refresh. ## DD Traces vs LangSmith vs Langfuse The AI observability space is growing. Here is an honest comparison. **LangSmith** is the most mature option. It has deep LangChain integration, team features, and a polished cloud dashboard. But it requires an account, sends data to Anthropic's servers, and is primarily designed for LangChain workflows. If you are using the Vercel AI SDK or building without LangChain, the integration is less natural. **Langfuse** is open source and can be self-hosted. It has a first-class AI SDK plugin and good cost tracking. The self-hosted path requires Docker and Postgres, which is more setup than most developers want for local work. **DD Traces** is different in three ways: 1. **Local-first.** Your data never leaves your machine. There is no account to create, no API key to configure, no cloud service to trust with your prompts and responses. 2. **Zero config.** `npx dd-traces` and you are running. No Docker, no database, no environment variables beyond the OTLP endpoint. 3. **Standard OTLP.** DD Traces speaks native OpenTelemetry. It is not a proprietary SDK wrapper. Any tool that exports OTLP traces works out of the box - the AI SDK, Next.js auto-instrumentation, Express, Fastify, or your own custom spans. The trade-off is clear. LangSmith and Langfuse are better for teams that need persistent storage, collaboration features, and managed infrastructure. DD Traces is better for individual developers who want fast local observability during development without any overhead. ## Beyond the AI SDK DD Traces accepts standard OTLP, so it works with anything that exports traces. **Next.js auto-instrumentation** gives you HTTP request spans, server-side rendering spans, and fetch spans for free when you add `@vercel/otel`. Combined with AI SDK telemetry, a single trace shows the full request lifecycle from HTTP request to model call to tool execution to response. **Express and Fastify** work through the standard `@opentelemetry/instrumentation-http` and framework-specific instrumentation packages. **Database queries** from Prisma, Drizzle, or raw `pg` show up as child spans when instrumented with their respective OTEL packages. The AI SDK spans are the headline feature, but DD Traces is a general-purpose local OTLP viewer. If it emits OTLP, you can see it. ## Getting Started The full setup takes about 60 seconds. **Terminal 1 - Start DD Traces:** ```bash npx dd-traces ``` **Terminal 2 - In your Next.js project:** ```bash npm install @vercel/otel @opentelemetry/exporter-trace-otlp-proto ``` Create `instrumentation.ts`: ```typescript import { registerOTel } from "@vercel/otel"; import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto"; export function register() { registerOTel({ serviceName: "my-app", traceExporter: new OTLPTraceExporter({ url: "http://localhost:4318/v1/traces", }), }); } ``` Add `experimental_telemetry: { isEnabled: true }` to your AI SDK calls. Start your dev server. Open `http://localhost:6006`. Traces appear as requests come in. ## What Is Next DD Traces is actively being developed. The roadmap includes native integrations for Claude Code, Codex, and OpenCode trace formats, agent decision tree visualization, trace comparison (diff two traces side by side), and a cloud mode at [traces.developersdigest.tech](https://traces.developersdigest.tech) for team sharing and persistent storage. The local-first experience is the foundation. Everything else builds on top of it. If you build AI applications and want to actually see what is happening during development, give it a try. One command, and you have observability. ```bash npx dd-traces ``` ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest DD Traces OpenTelemetry AI Developer Tools Observability <![CDATA[How to Build an AI Agent in 2026: A Practical Guide]]> https://www.developersdigest.tech/blog/how-to-build-ai-agent-2026 https://www.developersdigest.tech/blog/how-to-build-ai-agent-2026 { const res = await fetch( `https://api.github.com/search/repositories?q=${query}&sort=${sort}` ); return await res.json(); }, }), }, maxSteps: 8, }); ``` The `maxSteps` parameter is what turns a single API call into an agent loop. Without it, the model makes one tool call and stops. With it, the model can chain multiple calls, react to intermediate results, and converge on an answer. Strengths: streaming to the browser, React integration, structured output with Zod, model-agnostic (swap between Claude, GPT, Gemini with one line). Limitations: designed for request-response web patterns. Less suited for long-running background agents or complex multi-agent orchestration. If you are building an agent that runs inside a web app and needs to stream results to a UI, start here. The [Vercel AI SDK guide](/blog/vercel-ai-sdk-guide) covers the full API. ### LangChain Best for: complex workflows with pre-built integrations. LangChain provides the largest ecosystem of pre-built components - document loaders, vector stores, retrieval chains, output parsers, and agent executors. If your agent needs to interact with specific services (Notion, Slack, Confluence, various databases), LangChain probably has a community integration for it. ```typescript import { ChatAnthropic } from "@langchain/anthropic"; import { createReactAgent } from "@langchain/langgraph/prebuilt"; import { TavilySearch } from "@langchain/community/tools/tavily_search"; import { Calculator } from "@langchain/community/tools/calculator"; const model = new ChatAnthropic({ model: "claude-sonnet-4-20250514", }); const tools = [new TavilySearch(), new Calculator()]; const agent = createReactAgent({ llm: model, tools, }); const result = await agent.invoke({ messages: [ { role: "user", content: "What is the current market cap of NVIDIA divided by Tesla's?", }, ], }); ``` LangGraph, the graph-based agent framework built on top of LangChain, is where the real power lives. It lets you define agent workflows as state machines with conditional edges, parallel branches, and human-in-the-loop checkpoints. Strengths: massive integration ecosystem, LangGraph for complex stateful workflows, good observability with LangSmith. Limitations: heavier abstraction layer, steeper learning curve, can feel over-engineered for simple agents. ### Claude Agent SDK Best for: autonomous agents with delegation and sub-agent patterns. The Claude Agent SDK is Anthropic's framework for building agents that run autonomously - not inside a web request, but as standalone processes that can run for minutes or hours. It is the framework behind Claude Code's agent capabilities. ```typescript import { Agent, tool } from "claude-agent-sdk"; import { z } from "zod"; const researchAgent = new Agent({ name: "researcher", model: "claude-sonnet-4-20250514", instructions: "Research the given topic thoroughly using available tools.", tools: [ tool({ name: "web_search", description: "Search the web for information", parameters: z.object({ query: z.string() }), execute: async ({ query }) => { // Search implementation }, }), ], }); const result = await researchAgent.run( "What are the most significant advances in AI agent frameworks this year?" ); ``` The SDK's distinguishing feature is delegation. An agent can spawn sub-agents, assign them tasks, and synthesize their results. This enables multi-agent architectures where a planning agent coordinates specialist agents - one for research, one for code generation, one for testing. Strengths: built for long-running autonomous work, native sub-agent delegation, designed for Claude's strengths. Limitations: Claude-specific (no model swapping), newer ecosystem with fewer community integrations. For hands-on agent generation with the Claude Agent SDK, try the [Agent Generator](https://agentgen.developersdigest.tech) - it scaffolds agent projects from natural language descriptions. ### The Decision Matrix | Factor | AI SDK | LangChain | Claude Agent SDK | |--------|--------|-----------|-----------------| | Web app integration | Best | Good | Manual | | Streaming to UI | Native | Supported | Manual | | Pre-built integrations | Few | Many | Few | | Multi-agent patterns | Basic | LangGraph | Native | | Learning curve | Low | High | Medium | | Long-running agents | Limited | Good | Best | | Model flexibility | Any model | Any model | Claude only | **Pick the AI SDK** if your agent lives in a web app and streams to a React UI. **Pick LangChain** if you need pre-built integrations with specific services or complex graph-based workflows. **Pick the Claude Agent SDK** if you are building autonomous agents that run independently, delegate work, or operate for extended periods. ## Building Your First Agent Let's build a practical agent: a codebase analyzer that reads a project, identifies architectural patterns, and produces a structured report. This is useful, non-trivial, and demonstrates the core agent concepts. We will use the Vercel AI SDK because it has the lowest setup friction, but the patterns translate to any framework. ### Step 1: Define Your Tools Tools are functions the model can call. Every tool needs a clear description (the model reads this to decide when to use it), typed parameters, and an execute function. ```typescript import { tool } from "ai"; import { z } from "zod"; import { readdir, readFile } from "fs/promises"; import { join, extname } from "path"; const listDirectory = tool({ description: "List files and directories at a given path", parameters: z.object({ path: z.string().describe("Directory path relative to project root"), }), execute: async ({ path }) => { const entries = await readdir(join(PROJECT_ROOT, path), { withFileTypes: true, }); return entries.map((e) => ({ name: e.name, type: e.isDirectory() ? "directory" : "file", extension: e.isFile() ? extname(e.name) : null, })); }, }); const readSourceFile = tool({ description: "Read the contents of a source file", parameters: z.object({ path: z.string().describe("File path relative to project root"), }), execute: async ({ path }) => { const resolved = join(PROJECT_ROOT, path); if (!resolved.startsWith(PROJECT_ROOT)) { return { error: "Path traversal not allowed" }; } const content = await readFile(resolved, "utf-8"); return { path, content: content.slice(0, 8000), // Limit context size lines: content.split("\n").length, }; }, }); const searchFiles = tool({ description: "Search for files matching a glob pattern", parameters: z.object({ pattern: z.string().describe("Glob pattern like '**/*.ts' or 'src/**/*.tsx'"), }), execute: async ({ pattern }) => { const { glob } = await import("glob"); const files = await glob(pattern, { cwd: PROJECT_ROOT }); return { matches: files.slice(0, 50), total: files.length }; }, }); ``` Notice the safety boundary in `readSourceFile` - the path traversal check prevents the model from reading files outside the project. Always constrain what your tools can access. ### Step 2: Wire Up the Agent ```typescript import { generateObject } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; const analysisSchema = z.object({ framework: z.string().describe("Primary framework detected"), language: z.string().describe("Primary language"), architecture: z.string().describe("Architecture pattern"), entryPoints: z.array(z.string()).describe("Main entry point files"), dependencies: z.object({ runtime: z.array(z.string()), dev: z.array(z.string()), }), patterns: z.array( z.object({ name: z.string(), description: z.string(), files: z.array(z.string()), }) ), recommendations: z.array(z.string()), }); async function analyzeProject(projectPath: string) { const { object } = await generateObject({ model: anthropic("claude-sonnet-4-20250514"), schema: analysisSchema, system: `You are a senior software architect. Analyze the given project by exploring its file structure, reading key configuration files, and examining source code. Produce a thorough architectural analysis.`, prompt: `Analyze the project at: ${projectPath}`, tools: { listDirectory, readSourceFile, searchFiles }, maxSteps: 20, }); return object; } ``` The `generateObject` function forces the model to return data matching your Zod schema. No string parsing. No hoping the JSON is valid. The SDK handles validation and retries automatically. With `maxSteps: 20`, the agent can explore the file tree, read package.json, examine tsconfig, look at source files, and build a complete picture before producing its analysis. ### Step 3: Add Guardrails Production agents need boundaries. Without them, you get runaway loops, excessive API costs, and unpredictable behavior. ```typescript const TOKEN_BUDGET = 100_000; const MAX_TOOL_CALLS = 50; let toolCallCount = 0; // Wrap each tool with accounting function withGuardrails(originalTool: T): T { const wrapped = { ...originalTool }; const originalExecute = (wrapped as any).execute; (wrapped as any).execute = async (...args: any[]) => { toolCallCount++; if (toolCallCount > MAX_TOOL_CALLS) { return { error: "Tool call limit reached. Produce your final answer." }; } return originalExecute(...args); }; return wrapped; } ``` Other guardrails to consider: - **Timeouts**: kill the agent after a maximum wall-clock time - **Read-only tools**: if the agent should only analyze, do not give it write tools - **Token budgets**: track cumulative token usage and stop before you blow past limits - **Human-in-the-loop**: for destructive actions, require confirmation before executing ## Tool Integration Patterns The tools you give your agent determine what it can do. Here are patterns that work well across frameworks. ### API wrappers with error handling ```typescript const fetchAPI = tool({ description: "Call an external REST API endpoint", parameters: z.object({ url: z.string().url(), method: z.enum(["GET", "POST"]), body: z.string().optional(), }), execute: async ({ url, method, body }) => { try { const res = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body, signal: AbortSignal.timeout(10_000), }); if (!res.ok) { return { error: `HTTP ${res.status}: ${res.statusText}` }; } const data = await res.json(); return { status: res.status, data }; } catch (err) { return { error: `Request failed: ${(err as Error).message}` }; } }, }); ``` Always return errors as structured data instead of throwing. When a tool throws, the agent loses context about what went wrong. When it returns an error object, the model can reason about the failure and try a different approach. ### Database queries with safety constraints ```typescript const queryDatabase = tool({ description: "Run a read-only SQL query against the application database", parameters: z.object({ sql: z.string().describe("SQL SELECT query"), }), execute: async ({ sql }) => { const normalized = sql.trim().toUpperCase(); if (!normalized.startsWith("SELECT")) { return { error: "Only SELECT queries are allowed" }; } if (normalized.includes("DROP") || normalized.includes("DELETE")) { return { error: "Destructive operations are not permitted" }; } const result = await pool.query(sql); return { rows: result.rows.slice(0, 100), rowCount: result.rowCount, truncated: result.rowCount > 100, }; }, }); ``` Limit result sizes. An agent that pulls 10,000 rows into its context window is going to produce garbage output and burn through your token budget. ### MCP server connections If you are using [MCP servers](/blog/how-to-use-mcp-servers), your agent gets tools for free. Configure a Postgres MCP server and the agent can query your database without you writing any tool code. Configure a GitHub MCP server and it can read issues, open PRs, and manage repos. This is where the agent ecosystem is heading - standardized tool interfaces through MCP rather than custom tool definitions for every integration. ## Testing Your Agent Agent testing is different from unit testing. The model's behavior is non-deterministic. The same input can produce different tool call sequences. You need to test at multiple levels. ### Tool-level tests Test each tool in isolation. These are standard unit tests - given specific inputs, verify the outputs. ```typescript describe("listDirectory", () => { it("returns files and directories with correct types", async () => { const result = await listDirectory.execute({ path: "src" }); expect(result).toContainEqual( expect.objectContaining({ type: "directory" }) ); expect(result).toContainEqual( expect.objectContaining({ type: "file", extension: ".ts" }) ); }); }); ``` ### Agent-level tests For the agent itself, test with deterministic inputs and verify the output structure rather than exact content. ```typescript describe("analyzeProject", () => { it("identifies a Next.js project correctly", async () => { const result = await analyzeProject("./fixtures/nextjs-app"); expect(result.framework).toContain("Next"); expect(result.language).toBe("TypeScript"); expect(result.entryPoints.length).toBeGreaterThan(0); }); it("stays within tool call budget", async () => { toolCallCount = 0; await analyzeProject("./fixtures/large-monorepo"); expect(toolCallCount).toBeLessThanOrEqual(MAX_TOOL_CALLS); }); }); ``` ### Evaluation sets For production agents, build an evaluation set - a collection of inputs with expected outputs that you run against every code change. Track metrics like task completion rate, average tool calls per task, and output quality scores. The [DevDigest Academy](https://academy.developersdigest.tech) covers agent evaluation in depth, including how to build automated eval pipelines that catch regressions before they ship. ## From Single Agent to Multi-Agent Once your single agent works reliably, the next step is composition. A planning agent that delegates to specialist agents. A research agent that spawns parallel search agents. A code generation agent that hands off to a review agent. Multi-agent patterns are where the Claude Agent SDK shines. Its delegation model lets you define agents with distinct roles and have a coordinator route tasks between them. But start simple. One agent. A handful of well-defined tools. Clear guardrails. Get that working in production before you add complexity. ## Frequently Asked Questions ### What is the best language for building AI agents? TypeScript and Python are the two dominant choices. TypeScript has the Vercel AI SDK, the Claude Agent SDK, and strong typing through Zod schemas. Python has LangChain, CrewAI, and the broadest ecosystem of ML libraries. For web-integrated agents, TypeScript is the stronger choice. For data science and ML-heavy agents, Python wins. ### How much does it cost to run an AI agent? Costs depend on the model, the number of steps, and the context window size. A simple agent running Claude Sonnet for 5-10 steps typically costs $0.01-0.05 per execution. Complex agents running 50+ steps with large context can cost $0.50-2.00 per run. Use token budgets and step limits to control costs. ### Can AI agents run in production? Yes. Companies are running agents in production for customer support, code review, data analysis, and content generation. The keys are guardrails (tool call limits, timeouts, budget caps), observability (log every tool call and model response), and graceful degradation (handle failures without crashing). ### What is the difference between an AI agent and a chatbot? A chatbot processes one message and returns one response. An agent operates in a loop - it receives a goal, breaks it into steps, takes actions, observes results, and keeps going until the goal is met. The model controls the execution flow. For a deeper conceptual overview, see [AI Agents Explained](/blog/ai-agents-explained). ### Do I need MCP to build an agent? No. MCP is a protocol for standardizing tool connections, but you can build agents with custom tool definitions. MCP becomes valuable when you want to reuse tool integrations across multiple agents and clients without duplicating code. See the [MCP guide](/blog/complete-guide-mcp-servers) for details. ## What to Build Next You have the foundation: a framework choice, tool patterns, guardrails, and testing strategies. The next step is picking a real problem and solving it. Good first agents to build: - **Documentation search agent** - indexes your docs and answers questions with citations - **Code review agent** - reads diffs, checks for issues, produces structured feedback - **Data analysis agent** - connects to your database and answers business questions - **Deployment agent** - checks CI status, runs tests, and manages releases Start narrow, add tools incrementally, and test at every step. The [Agent Generator](https://agentgen.developersdigest.tech) can scaffold a starting point from a plain-English description of what you want to build. For the complete TypeScript implementation details, see [How to Build AI Agents in TypeScript](/blog/how-to-build-ai-agents-typescript). For the broader landscape of agent tooling, see [Multi-Agent Systems](/blog/multi-agent-systems). ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Agents TypeScript Claude Agent SDK Vercel AI SDK LangChain <![CDATA[How to Build MCP Servers in TypeScript]]> https://www.developersdigest.tech/blog/how-to-build-mcp-servers https://www.developersdigest.tech/blog/how-to-build-mcp-servers ({ content: [{ type: "text", text: `Hello, ${name}! Welcome to MCP.` }], }) ); // Connect via stdio and start listening const transport = new StdioServerTransport(); await server.connect(transport); ``` Four things happening here: 1. **`McpServer`** is the main class. The `name` and `version` identify your server to clients. 2. **`server.tool()`** registers a tool. It takes the tool name, a description (the AI reads this to decide when to use it), a Zod schema for input validation, and an async handler. 3. **`StdioServerTransport`** means the server communicates over stdin/stdout. This is the transport used by Claude Code, Claude Desktop, and Cursor. 4. **`server.connect(transport)`** starts listening for JSON-RPC messages. Build and verify: ```bash npx tsc ``` No errors? You have a working MCP server. It just does not do much yet. ## Step 3: Add Real Tools A useful server exposes multiple tools. Here is a more practical example. A server that manages bookmarks: ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { z } from "zod"; import { readFileSync, writeFileSync, existsSync } from "node:fs"; import { join } from "node:path"; import { randomUUID } from "node:crypto"; // --- Types --- interface Bookmark { id: string; url: string; title: string; tags: string[]; createdAt: string; } // --- Data Layer --- const DATA_FILE = join(process.cwd(), "bookmarks.json"); function loadBookmarks(): Bookmark[] { if (!existsSync(DATA_FILE)) return []; try { return JSON.parse(readFileSync(DATA_FILE, "utf-8")) as Bookmark[]; } catch { return []; } } function saveBookmarks(bookmarks: Bookmark[]): void { writeFileSync(DATA_FILE, JSON.stringify(bookmarks, null, 2), "utf-8"); } // --- Server --- const server = new McpServer({ name: "bookmarks-server", version: "1.0.0", }); // Tool: Add a bookmark server.tool( "add_bookmark", "Save a new bookmark with a URL, title, and optional tags", { url: z.string().url().describe("The URL to bookmark"), title: z.string().describe("A short title for the bookmark"), tags: z .array(z.string()) .optional() .describe("Optional tags for categorization, e.g. ['dev', 'reference']"), }, async ({ url, title, tags }) => { const bookmarks = loadBookmarks(); const bookmark: Bookmark = { id: randomUUID(), url, title, tags: tags ?? [], createdAt: new Date().toISOString(), }; bookmarks.push(bookmark); saveBookmarks(bookmarks); return { content: [ { type: "text", text: `Bookmark saved.\n\nID: ${bookmark.id}\nTitle: ${bookmark.title}\nURL: ${bookmark.url}\nTags: ${bookmark.tags.join(", ") || "none"}`, }, ], }; } ); // Tool: Search bookmarks server.tool( "search_bookmarks", "Search bookmarks by keyword in title or URL", { query: z.string().describe("Search keyword or phrase"), }, async ({ query }) => { const bookmarks = loadBookmarks(); const lower = query.toLowerCase(); const matches = bookmarks.filter( (b) => b.title.toLowerCase().includes(lower) || b.url.toLowerCase().includes(lower) || b.tags.some((t) => t.toLowerCase().includes(lower)) ); if (matches.length === 0) { return { content: [{ type: "text", text: `No bookmarks match "${query}".` }], }; } const results = matches .map((b) => `- **${b.title}**\n ${b.url}\n Tags: ${b.tags.join(", ") || "none"}`) .join("\n\n"); return { content: [ { type: "text", text: `Found ${matches.length} bookmark(s):\n\n${results}`, }, ], }; } ); // Tool: List all bookmarks server.tool( "list_bookmarks", "List all saved bookmarks, optionally filtered by tag", { tag: z .string() .optional() .describe("Filter by tag. Omit to return all bookmarks."), }, async ({ tag }) => { let bookmarks = loadBookmarks(); if (tag) { bookmarks = bookmarks.filter((b) => b.tags.some((t) => t.toLowerCase() === tag.toLowerCase()) ); } if (bookmarks.length === 0) { return { content: [ { type: "text", text: tag ? `No bookmarks with tag "${tag}".` : "No bookmarks yet. Use add_bookmark to save one.", }, ], }; } const list = bookmarks .sort((a, b) => b.createdAt.localeCompare(a.createdAt)) .map((b) => `- **${b.title}** - ${b.url} [${b.tags.join(", ")}]`) .join("\n"); return { content: [ { type: "text", text: `${bookmarks.length} bookmark(s):\n\n${list}` }, ], }; } ); // Tool: Delete a bookmark server.tool( "delete_bookmark", "Delete a bookmark by its ID", { id: z.string().describe("The UUID of the bookmark to delete"), }, async ({ id }) => { const bookmarks = loadBookmarks(); const index = bookmarks.findIndex((b) => b.id === id); if (index === -1) { return { content: [{ type: "text", text: `Bookmark "${id}" not found.` }], isError: true, }; } const deleted = bookmarks.splice(index, 1)[0]; saveBookmarks(bookmarks); return { content: [ { type: "text", text: `Deleted: "${deleted.title}" (${deleted.url})`, }, ], }; } ); ``` Key patterns to notice: - **Zod validation** - `z.string().url()` validates that the input is actually a URL. The AI sees these constraints and provides valid input. - **Error handling** - when a delete fails, the response includes `isError: true`. This tells the AI the operation did not succeed so it can report the failure or retry. - **Descriptive parameters** - `.describe()` on every field. The AI reads these descriptions to decide what values to pass. Be specific. "The URL to bookmark" is better than "URL". - **Focused tools** - each tool does one thing. `add_bookmark`, `search_bookmarks`, `list_bookmarks`, `delete_bookmark`. Not a single `manage_bookmarks` tool with a mode flag. ## Step 4: Add Resources Resources expose read-only data to the AI. Unlike tools (which perform actions), resources provide context. Config files, documentation, status information. Add these below your tools: ```typescript // Resource: All bookmarks as a readable document server.resource( "all-bookmarks", "bookmarks://all", async (uri) => { const bookmarks = loadBookmarks(); const document = bookmarks.length === 0 ? "No bookmarks saved yet." : bookmarks .sort((a, b) => b.createdAt.localeCompare(a.createdAt)) .map( (b) => `## ${b.title}\n- URL: ${b.url}\n- Tags: ${b.tags.join(", ") || "none"}\n- Added: ${b.createdAt}` ) .join("\n\n"); return { contents: [ { uri: uri.href, mimeType: "text/markdown", text: document, }, ], }; } ); // Resource: Server stats server.resource( "stats", "bookmarks://stats", async (uri) => { const bookmarks = loadBookmarks(); const allTags = bookmarks.flatMap((b) => b.tags); const uniqueTags = [...new Set(allTags)]; const stats = { totalBookmarks: bookmarks.length, totalTags: uniqueTags.length, topTags: uniqueTags .map((tag) => ({ tag, count: allTags.filter((t) => t === tag).length, })) .sort((a, b) => b.count - a.count) .slice(0, 5), }; return { contents: [ { uri: uri.href, mimeType: "application/json", text: JSON.stringify(stats, null, 2), }, ], }; } ); ``` The first argument is a display name. The second is a URI that clients use to request the resource. The handler returns the data. You can also create **resource templates** for dynamic data using URI template parameters: ```typescript // Dynamic resource - look up bookmarks by tag server.resource( "bookmarks-by-tag", "bookmarks://tags/{tag}", async (uri, { tag }) => { const bookmarks = loadBookmarks().filter((b) => b.tags.some((t) => t.toLowerCase() === (tag as string).toLowerCase()) ); return { contents: [ { uri: uri.href, mimeType: "application/json", text: JSON.stringify(bookmarks, null, 2), }, ], }; } ); ``` ## Step 5: Add Prompts Prompts are reusable templates that guide the AI's behavior for specific workflows. Unlike tools (called by the AI model) and resources (read by the AI), prompts are typically selected by the user to start a structured interaction. ```typescript // Prompt: Organize bookmarks server.prompt( "organize_bookmarks", "Analyze all bookmarks and suggest a better tagging system", {}, () => { const bookmarks = loadBookmarks(); const bookmarkList = bookmarks.length === 0 ? "No bookmarks saved." : bookmarks .map((b) => `- ${b.title} (${b.url}) [tags: ${b.tags.join(", ") || "none"}]`) .join("\n"); return { messages: [ { role: "user" as const, content: { type: "text" as const, text: [ "Here are all my bookmarks:", "", bookmarkList, "", "Please:", "1. Identify common themes", "2. Suggest a consistent tagging taxonomy", "3. Flag any duplicates or dead-looking URLs", "4. Recommend which bookmarks to re-tag using the new taxonomy", ].join("\n"), }, }, ], }; } ); ``` ## Step 6: Wire Up the Transport and Build Add the transport connection at the bottom of your file: ```typescript // Start the server const transport = new StdioServerTransport(); await server.connect(transport); ``` Build the project: ```bash npx tsc ``` Your compiled server lives at `dist/index.js`. Time to connect it to something. ## Step 7: Connect to Claude Code Claude Code reads MCP configuration from `.claude/settings.json` in your project directory (or `~/.claude/settings.json` for global servers). Add your server: ```json { "mcpServers": { "bookmarks": { "command": "node", "args": ["/absolute/path/to/my-mcp-server/dist/index.js"] } } } ``` Replace `/absolute/path/to/my-mcp-server/dist/index.js` with the actual path to your compiled file. Restart Claude Code. It will spawn your server process, perform the MCP handshake, and discover your tools. Now you can use them in conversation: - "Save this article as a bookmark: https://example.com/great-article" - "Show me all my bookmarks tagged with 'typescript'" - "Search my bookmarks for anything about MCP" - "Organize my bookmarks and suggest better tags" Claude Code calls the right tool automatically based on your request. ## Connecting to Claude Desktop The process is similar. Open your Claude Desktop config: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` - **Linux**: `~/.config/Claude/claude_desktop_config.json` Add the same server entry: ```json { "mcpServers": { "bookmarks": { "command": "node", "args": ["/absolute/path/to/my-mcp-server/dist/index.js"] } } } ``` Restart Claude Desktop. You will see a hammer icon in the chat input. Click it to see your tools. ## Testing with the MCP Inspector You do not need Claude to test your server. The MCP project provides an official testing tool: ```bash npx @modelcontextprotocol/inspector node dist/index.js ``` This opens a web UI (usually at `http://localhost:5173`) where you can: - See all registered tools, resources, and prompts - Call tools with custom inputs and inspect responses - Read resources and view their contents - Test prompts with different parameters - Monitor the JSON-RPC messages flowing between client and server Use the Inspector during development to verify schemas, test edge cases, and debug issues before connecting to Claude. ## Debugging Tips Things not working? Check these: 1. **Logs.** Claude Desktop writes MCP logs to `~/Library/Logs/Claude/mcp*.log` (macOS) or `%APPDATA%\Claude\logs\mcp*.log` (Windows). Claude Code logs appear in its terminal output. 2. **Absolute paths.** The `args` path in your config must be absolute and point to the compiled `.js` file, not the `.ts` source. 3. **Module type.** Make sure `"type": "module"` is in your `package.json`. Without it, Node.js cannot import the MCP SDK's ES modules. 4. **Manual test.** Pipe a JSON-RPC initialize message directly to your server: ```bash echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"test","version":"1.0.0"}}}' | node dist/index.js ``` If the server works, you will see a JSON-RPC response with its capabilities. ## Production Patterns Once you have the basics working, here are patterns that make your server production-ready. ### Structured Error Handling Always return `isError: true` on failure. Wrap handlers in try/catch: ```typescript server.tool("risky_operation", "Do something that might fail", { input: z.string(), }, async ({ input }) => { try { const result = await doSomething(input); return { content: [{ type: "text", text: result }] }; } catch (error) { return { content: [{ type: "text", text: `Error: ${(error as Error).message}` }], isError: true, }; } }); ``` ### Write Good Descriptions The AI reads your descriptions to decide when and how to use tools. Be specific: ```typescript // Vague - the AI has to guess { date: z.string().describe("Date") } // Specific - the AI knows exactly what to provide { date: z.string().describe("Date in YYYY-MM-DD format, e.g. 2026-04-02") } ``` Same goes for tool descriptions. "Query the database" is worse than "Run a read-only SQL query against the production PostgreSQL database. Returns up to 100 rows." ### HTTP Transport for Remote Servers stdio is great for local development. For production or team deployments, use Streamable HTTP transport: ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js"; import express from "express"; const app = express(); app.use(express.json()); const server = new McpServer({ name: "remote-bookmarks", version: "1.0.0", }); // ... register tools, resources, prompts ... app.post("/mcp", async (req, res) => { const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined, }); res.on("close", () => transport.close()); await server.connect(transport); await transport.handleRequest(req, res); }); app.listen(3001, () => { console.log("MCP server running at http://localhost:3001/mcp"); }); ``` Clients connect to your server over HTTP instead of spawning a local process. This is how you deploy MCP servers for teams or as public services. ### Keep Tools Focused One tool, one job. This makes it easier for the AI to pick the right tool and reduces the chance of invalid input combinations. Instead of: ```typescript server.tool("manage_bookmarks", "Manage bookmarks", { action: z.enum(["add", "delete", "search", "list"]), // ... conditional params }); ``` Use separate tools: ```typescript server.tool("add_bookmark", "Save a new bookmark", { /* ... */ }); server.tool("delete_bookmark", "Delete a bookmark by ID", { /* ... */ }); server.tool("search_bookmarks", "Search bookmarks by keyword", { /* ... */ }); server.tool("list_bookmarks", "List all bookmarks", { /* ... */ }); ``` ## The Complete Server Here is the full `src/index.ts` with everything wired together. Copy this, build it, and you have a working MCP bookmarks server: ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { z } from "zod"; import { readFileSync, writeFileSync, existsSync } from "node:fs"; import { join } from "node:path"; import { randomUUID } from "node:crypto"; interface Bookmark { id: string; url: string; title: string; tags: string[]; createdAt: string; } const DATA_FILE = join(process.cwd(), "bookmarks.json"); function loadBookmarks(): Bookmark[] { if (!existsSync(DATA_FILE)) return []; try { return JSON.parse(readFileSync(DATA_FILE, "utf-8")) as Bookmark[]; } catch { return []; } } function saveBookmarks(bookmarks: Bookmark[]): void { writeFileSync(DATA_FILE, JSON.stringify(bookmarks, null, 2), "utf-8"); } const server = new McpServer({ name: "bookmarks-server", version: "1.0.0", }); server.tool( "add_bookmark", "Save a new bookmark with a URL, title, and optional tags", { url: z.string().url().describe("The URL to bookmark"), title: z.string().describe("A short title for the bookmark"), tags: z.array(z.string()).optional().describe("Optional tags, e.g. ['dev', 'reference']"), }, async ({ url, title, tags }) => { const bookmarks = loadBookmarks(); const bookmark: Bookmark = { id: randomUUID(), url, title, tags: tags ?? [], createdAt: new Date().toISOString(), }; bookmarks.push(bookmark); saveBookmarks(bookmarks); return { content: [{ type: "text", text: `Saved: ${bookmark.title} (${bookmark.url}) [${bookmark.tags.join(", ") || "none"}]`, }], }; } ); server.tool( "search_bookmarks", "Search bookmarks by keyword in title, URL, or tags", { query: z.string().describe("Search keyword or phrase") }, async ({ query }) => { const lower = query.toLowerCase(); const matches = loadBookmarks().filter( (b) => b.title.toLowerCase().includes(lower) || b.url.toLowerCase().includes(lower) || b.tags.some((t) => t.toLowerCase().includes(lower)) ); if (matches.length === 0) { return { content: [{ type: "text", text: `No bookmarks match "${query}".` }] }; } const results = matches .map((b) => `- **${b.title}**\n ${b.url}\n Tags: ${b.tags.join(", ") || "none"}`) .join("\n\n"); return { content: [{ type: "text", text: `Found ${matches.length}:\n\n${results}` }] }; } ); server.tool( "list_bookmarks", "List all bookmarks, optionally filtered by tag", { tag: z.string().optional().describe("Filter by tag. Omit for all.") }, async ({ tag }) => { let bookmarks = loadBookmarks(); if (tag) { bookmarks = bookmarks.filter((b) => b.tags.some((t) => t.toLowerCase() === tag.toLowerCase()) ); } if (bookmarks.length === 0) { return { content: [{ type: "text", text: tag ? `No bookmarks tagged "${tag}".` : "No bookmarks yet.", }], }; } const list = bookmarks .sort((a, b) => b.createdAt.localeCompare(a.createdAt)) .map((b) => `- ${b.title} - ${b.url} [${b.tags.join(", ")}]`) .join("\n"); return { content: [{ type: "text", text: `${bookmarks.length} bookmark(s):\n\n${list}` }] }; } ); server.tool( "delete_bookmark", "Delete a bookmark by its ID", { id: z.string().describe("The UUID of the bookmark to delete") }, async ({ id }) => { const bookmarks = loadBookmarks(); const index = bookmarks.findIndex((b) => b.id === id); if (index === -1) { return { content: [{ type: "text", text: `Bookmark "${id}" not found.` }], isError: true, }; } const deleted = bookmarks.splice(index, 1)[0]; saveBookmarks(bookmarks); return { content: [{ type: "text", text: `Deleted: "${deleted.title}" (${deleted.url})` }], }; } ); server.resource("all-bookmarks", "bookmarks://all", async (uri) => { const bookmarks = loadBookmarks(); const doc = bookmarks.length === 0 ? "No bookmarks." : bookmarks .map((b) => `## ${b.title}\n${b.url}\nTags: ${b.tags.join(", ") || "none"}`) .join("\n\n"); return { contents: [{ uri: uri.href, mimeType: "text/markdown", text: doc }] }; }); server.resource("stats", "bookmarks://stats", async (uri) => { const bookmarks = loadBookmarks(); const allTags = bookmarks.flatMap((b) => b.tags); const uniqueTags = [...new Set(allTags)]; return { contents: [{ uri: uri.href, mimeType: "application/json", text: JSON.stringify({ total: bookmarks.length, tags: uniqueTags.length, topTags: uniqueTags .map((tag) => ({ tag, count: allTags.filter((t) => t === tag).length })) .sort((a, b) => b.count - a.count) .slice(0, 5), }, null, 2), }], }; }); server.prompt( "organize_bookmarks", "Analyze bookmarks and suggest a better tagging system", {}, () => { const bookmarks = loadBookmarks(); const list = bookmarks .map((b) => `- ${b.title} (${b.url}) [${b.tags.join(", ") || "none"}]`) .join("\n"); return { messages: [{ role: "user" as const, content: { type: "text" as const, text: `Here are my bookmarks:\n\n${list || "None yet."}\n\nPlease suggest a consistent tagging taxonomy, flag duplicates, and recommend re-tags.`, }, }], }; } ); const transport = new StdioServerTransport(); await server.connect(transport); ``` Build and run: ```bash npx tsc npx @modelcontextprotocol/inspector node dist/index.js ``` ## FAQ ### How is MCP different from function calling? Function calling is a feature of individual AI models. You define functions in the API request, and the model can choose to call them. MCP is a protocol layer above that. It standardizes how servers expose tools so any MCP-compatible client can discover and use them. You build the server once. Every client (Claude Code, Cursor, Claude Desktop, VS Code Copilot) can use it. ### Do I need to use TypeScript? No. MCP has official SDKs for [TypeScript](https://github.com/modelcontextprotocol/typescript-sdk), [Python](https://github.com/modelcontextprotocol/python-sdk), [Java](https://github.com/modelcontextprotocol/java-sdk), [Kotlin](https://github.com/modelcontextprotocol/kotlin-sdk), and [C#](https://github.com/modelcontextprotocol/csharp-sdk). There are also community SDKs for Rust, Go, Ruby, and others. This guide uses TypeScript because most web developers are already comfortable with it. ### Can I use the new `@modelcontextprotocol/server` package? Yes. The SDK is being consolidated into a single `@modelcontextprotocol/server` package with a flatter import structure. If you are starting fresh and want the latest API, install `@modelcontextprotocol/server` instead and use `import { McpServer, StdioServerTransport } from '@modelcontextprotocol/server'`. The `server.tool()` API becomes `server.registerTool()` with a slightly different signature. Both packages work. This tutorial uses `@modelcontextprotocol/sdk` because it is the most widely documented and deployed version as of April 2026. ### How do I publish my server for others to use? Package it as an npm module. Add a `bin` field to `package.json` pointing to your compiled entry file. Users install it globally (`npm install -g your-mcp-server`) and configure it in their MCP client. For discoverability, list it in the [MCP Servers Directory](https://github.com/modelcontextprotocol/servers) or community registries. ### What about authentication for remote servers? For HTTP-transport servers that need auth, add standard authentication middleware (API keys, OAuth, JWT) to your Express/Fastify server before the MCP handler. The MCP protocol itself does not define auth. It is up to your HTTP layer. ### How do I handle long-running operations? For tools that take more than a few seconds, use progress reporting. The MCP SDK supports progress tokens that let clients show progress indicators. Return partial results when possible rather than blocking for minutes. ### Can I expose a database directly? You can, but be careful. Always use read-only connections for resource access. For write operations through tools, add validation, rate limiting, and audit logging. Never expose raw SQL execution to the AI. Instead, create specific tools like `run_saved_query` or `insert_record` with constrained inputs. ## What to Build Next Now that you know the pattern, here are practical servers worth building: - **Git server** - expose commit history, diffs, and branch management as tools - **Database server** - read-only queries, schema inspection, and explain plans - **Deployment server** - trigger deploys, check status, roll back - **Monitoring server** - query metrics, check alerts, pull logs - **Internal API server** - wrap your company's REST API as MCP tools The best MCP servers solve a specific problem you hit daily. Start there. For more on using existing servers, read [How to Use MCP Servers](/blog/how-to-use-mcp-servers). For the protocol fundamentals, start with [What is MCP](/blog/what-is-mcp). ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest MCP TypeScript Claude Code AI <![CDATA[The Best MCP Servers in 2026: A Complete Directory]]> https://www.developersdigest.tech/blog/mcp-servers-directory-2026 https://www.developersdigest.tech/blog/mcp-servers-directory-2026 Thu, 02 Apr 2026 00:00:00 GMT Developers Digest MCP AI Tools Claude Code Directory <![CDATA[Ship Code While You Sleep: The Overnight Agent Workflow]]> https://www.developersdigest.tech/blog/overnight-agents-workflow https://www.developersdigest.tech/blog/overnight-agents-workflow = 90 7. All new components have TypeScript types, no `any` 8. Loading state shows a skeleton matching the final layout 9. Error state handles billing API timeout with a retry button ``` Nine requirements. Each one is a yes/no check. The agent knows exactly what success looks like, and so do you when you review in the morning. ### 4. Constraints What the agent must not do. Boundaries are as important as instructions. ``` Constraints: - Do not modify the auth middleware or session handling - Do not add new npm dependencies without documenting why - Do not change the database schema - Keep all changes in the app/settings/ directory - Do not use inline styles - Tailwind only ``` Constraints prevent scope creep. Without them, an agent solving a performance problem might "helpfully" refactor the database layer. ### 5. Verification Steps How should the agent check its own work before declaring the task complete? This is the most important section. It turns the agent from an executor into a self-verifying system. ``` Verification: 1. Run `npm run build` - must succeed with zero errors 2. Run `npm run test` - all existing tests must pass 3. Run `npm run test -- --testPathPattern=profile` - new tests must pass 4. Start dev server, navigate to /settings/profile, take a screenshot 5. Check screenshot: avatar, name, email, tier badge, and usage bar are visible 6. Run `npx lighthouse /settings/profile --output=json` - performance >= 90 7. Run `npx tsc --noEmit` - zero type errors ``` The verification steps are a checklist the agent runs after implementation. If any step fails, the agent fixes the issue and re-runs verification. This loop catches most problems before you ever see the code. ## The Execution Pipeline Once the spec is written, the overnight execution follows a predictable pipeline: **Phase 1: Codebase Analysis (5-15 minutes).** The agent reads relevant files, understands the project structure, identifies existing patterns, and maps dependencies. This is where context from the spec pays off - the agent knows which files matter. **Phase 2: Planning (5-10 minutes).** The agent creates an internal plan: which files to create or modify, in what order, and how the changes connect. Good agents document this plan in a scratch file you can review. **Phase 3: Implementation (30 minutes to 4 hours).** The agent writes code, creates files, modifies existing files, and iterates. Complex tasks involve multiple rounds of writing and revising as the agent discovers issues during implementation. **Phase 4: Verification (10-30 minutes).** The agent runs every verification step from the spec. Build, tests, type checking, visual checks. Failures loop back to Phase 3 for fixes. **Phase 5: Summary (2-5 minutes).** The agent writes a completion report: what it did, which files it changed, which verification steps passed, any issues it encountered and how it resolved them. This is your morning reading material. Total elapsed time for a medium-complexity task: 1 to 5 hours. You are asleep for all of it. ## The Morning Review Workflow Your alarm goes off. Coffee happens. Then: **1. Read the summary.** The agent's completion report tells you whether the task succeeded, partially succeeded, or failed. Most mornings it succeeded. Some mornings there are notes about edge cases the agent flagged but did not resolve. **2. Check the verification results.** Build passed? Tests passed? Type checking clean? If all verification steps are green, you are looking at code that already meets the spec. Your review can focus on design decisions and code quality instead of correctness. **3. Review the diff.** This is a normal code review. Read the changes, check that the approach makes sense, verify the code is maintainable. The difference from a regular review is that you are well-rested and the code is already verified. **4. Merge or iterate.** If the code is good, merge it. If it needs changes, write a follow-up spec or make the edits yourself. Most overnight runs produce mergeable code on the first pass. Some need a 15-minute polish. The entire morning review takes 15 to 30 minutes for a task that would have taken 4 to 8 hours of hands-on development. ## What Works Overnight (and What Does Not) ### Good overnight tasks - **Feature implementation.** Building a new page, component, or API endpoint from a clear spec. The agent has everything it needs to work independently. - **Migration work.** Updating 50 files from one pattern to another (API version upgrades, framework migrations, dependency swaps). Tedious for humans, perfect for agents. - **Test coverage.** Writing tests for existing code. The agent reads the implementation, understands the behavior, and writes tests. You wake up with 80% coverage instead of 30%. - **Refactoring.** Extracting shared logic, renaming across the codebase, restructuring directories. Mechanical changes that require consistency, not creativity. - **Documentation generation.** API docs, README files, inline comments, architecture diagrams from code analysis. The agent reads the code and explains it. ### Bad overnight tasks - **Ambiguous requirements.** If you cannot write clear acceptance criteria, the agent cannot verify its own work. "Make the dashboard better" is not a spec. - **Design-heavy work.** Visual design requires human judgment about what looks right. The agent can implement a design, but it should not be making aesthetic decisions unsupervised. - **Security-critical changes.** Auth flows, encryption, access control. These need human review before any code runs in production, and the stakes of getting it wrong are too high for fully autonomous execution. - **Novel architecture decisions.** If you are choosing between fundamentally different approaches (monolith vs. microservices, SQL vs. NoSQL), that decision should not happen at 3 AM without you. ## Setting Up the Workflow The simplest version requires three things: **1. A spec file.** Write it in markdown with the five sections above. Save it somewhere the agent can read it. **2. An agent that runs unattended.** [Claude Code](/tools/claude-code) supports headless mode (`claude -p "read spec.md and execute it"`). Schedule it with cron, launchd, or any task scheduler. **3. A notification on completion.** The agent writes its summary to a file, commits to a branch, or sends a notification. You check it in the morning. [overnight.developersdigest.tech](https://overnight.developersdigest.tech) wraps this into a structured workflow: spec templates, execution monitoring, verification pipelines, and morning review dashboards. It is built for teams that want the overnight pattern without building the infrastructure themselves. ## Spec Writing Tips After running hundreds of overnight tasks, these patterns produce the best results: **Include example output.** If you want a specific file structure or API response format, include an example. The agent matches examples more reliably than it follows abstract descriptions. **Reference existing code.** "Follow the same pattern as app/settings/billing/page.tsx" is worth more than a paragraph of description. The agent reads the referenced file and replicates the approach. **Specify the negative space.** What should not change is as important as what should. If the agent is adding a feature to a page, list the existing elements that must remain untouched. **Write verification steps you would run yourself.** If you would check something manually after coding the feature, put it in the verification section. The agent should run every check you would. **Keep specs focused.** One spec per logical task. "Build the profile page" is one spec. "Build the profile page, refactor the auth system, and update the billing integration" is three specs that should run as three separate overnight tasks. ## The Compound Effect The overnight workflow compounds over a week. Monday night you spec a feature. Tuesday morning you review and merge it. Tuesday night you spec the tests. Wednesday morning they are done. Wednesday night you spec the migration. Thursday morning it is complete. Five days of overnight execution, combined with morning reviews, produces a week of output that would normally take two weeks of hands-on development. You spend your days on the work that requires human judgment - design decisions, user research, architecture planning - and let overnight agents handle the implementation. This is not about replacing developers. It is about using the 15 hours between closing your laptop and opening it again. Those hours were always there. Now they are productive. ## What to Read Next - [Claude Code Autonomous Hours](/blog/claude-code-autonomous-hours) - running agents in extended autonomous mode - [Claude Code Loops](/blog/claude-code-loops) - understanding the agent execution loop - [The Agentic Dev Stack in 2026](/blog/agentic-dev-stack-2026) - the full infrastructure picture - [Best AI Coding Tools in 2026](/blog/best-ai-coding-tools-2026) - which tools support overnight execution ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Agents Claude Code Autonomous Coding Productivity <![CDATA[State of AI Coding: April 2026]]> https://www.developersdigest.tech/blog/state-of-ai-coding-april-2026 https://www.developersdigest.tech/blog/state-of-ai-coding-april-2026 Thu, 02 Apr 2026 00:00:00 GMT Developers Digest AI Coding Industry Trends Developer Tools <![CDATA[Transformers.js: Run AI Models Directly in the Browser]]> https://www.developersdigest.tech/blog/transformers-js-guide https://www.developersdigest.tech/blog/transformers-js-guide sum + val * b[i], 0); } const queryVec = queryEmbedding.tolist()[0]; const scores = docEmbeddings.tolist().map((vec: number[], i: number) => ({ doc: docs[i], score: cosineSimilarity(queryVec, vec), })); scores.sort((a, b) => b.score - a.score); // "How to set up Claude Code with CLAUDE.md" ranks first ``` The user searches for "configure AI coding agent" and the Claude Code article ranks first, even though no keywords match. That is semantic search. ## Use Case: Speech Recognition Run OpenAI's Whisper model in the browser. Users record audio, and you transcribe it without sending anything to a server. ```typescript const transcriber = await pipeline( "automatic-speech-recognition", "onnx-community/whisper-tiny.en", { device: "webgpu" } ); const result = await transcriber(audioBlob); console.log(result.text); // "The quick brown fox jumps over the lazy dog" ``` The `whisper-tiny.en` model is 40MB. For better accuracy, use `whisper-small.en` at 240MB. Both run in real time on modern hardware with WebGPU. ## Use Case: Image Classification Classify images without uploading them to a server. Useful for content moderation, auto-tagging, or building visual search. ```typescript const classifier = await pipeline( "image-classification", "onnx-community/mobilenetv4_conv_small.e2400_r224_in1k", { device: "webgpu" } ); const result = await classifier(imageElement); // [{ label: "laptop", score: 0.87 }, { label: "keyboard", score: 0.06 }] ``` The MobileNet model is under 20MB and classifies images in milliseconds. ## Use Case: Text Generation Run small language models directly in the browser. This is not GPT-4 class, but it is useful for autocomplete, content suggestions, and creative features that do not need to be perfect. ```typescript import { pipeline } from "@huggingface/transformers"; const generator = await pipeline( "text-generation", "HuggingFaceTB/SmolLM2-360M-Instruct" ); const output = await generator("Explain WebGPU in one sentence:", { max_new_tokens: 50, temperature: 0.7, }); ``` SmolLM2 at 360M parameters is small enough for the browser and smart enough for light tasks. For the Vercel AI SDK, there is a dedicated provider: ```typescript import { streamText } from "ai"; import { transformersJS } from "@browser-ai/transformers-js"; const result = streamText({ model: transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct"), prompt: "Explain WebGPU in one sentence.", }); ``` ## Use Case: Zero-Shot Classification Classify text into categories you define at runtime, without any training data. ```typescript const classifier = await pipeline( "zero-shot-classification", "Xenova/mobilebert-uncased-mnli" ); const result = await classifier( "How do I deploy a Next.js app to Vercel?", ["deployment", "authentication", "database", "testing"] ); // { labels: ["deployment", ...], scores: [0.94, ...] } ``` This is useful for auto-routing support questions, categorizing user feedback, or building smart content filters. ## What to Know Before Shipping **Model size matters.** A 50MB model download on first visit is fine for a tool page. It is not fine for a landing page. Lazy-load models after the page renders, and show a loading state. **Cache aggressively.** Models are cached in the browser's Cache API after first download. Subsequent visits load from cache in milliseconds. Set proper cache headers if you are self-hosting models. **WebGPU is not everywhere.** Always provide a WebAssembly fallback. Transformers.js does this automatically, but inference will be slower on CPU. **Quantization reduces size.** Most models on Hugging Face Hub have quantized variants (q4, q8, fp16). Use the smallest quantization that meets your accuracy needs. ```typescript const pipe = await pipeline("feature-extraction", "model-name", { dtype: "q4", // Quantized to 4-bit }); ``` **Do not replace your API for complex tasks.** Transformers.js is excellent for embeddings, classification, and small generative tasks. For complex multi-step reasoning, you still want Claude or GPT on the server. That said, V4 demos are pushing the boundary - Hugging Face's community has shipped [1.2B parameter reasoning models](https://huggingface.co/spaces/LiquidAI/LFM2.5-1.2B-Thinking-WebGPU) and [real-time speech transcription](https://huggingface.co/spaces/mistralai/Voxtral-Realtime-WebGPU) running entirely in the browser. ## Practical Architecture The pattern that works for production web apps: 1. **Heavy reasoning** - Server-side (Claude API, GPT API) 2. **Search and similarity** - Client-side (Transformers.js embeddings) 3. **Classification and tagging** - Client-side (Transformers.js zero-shot) 4. **Speech input** - Client-side (Transformers.js Whisper) 5. **Image understanding** - Client-side (Transformers.js CLIP/MobileNet) This hybrid approach gives you the best of both worlds: powerful reasoning from cloud APIs and instant, private, zero-cost inference for everything else. ## Frequently Asked Questions ### Does Transformers.js work with Next.js? Yes. Import it in client components (`"use client"`) and load models after the component mounts. Server-side rendering will fail since the library needs browser APIs. Use dynamic imports with `ssr: false` for pages that depend on it. ### How big are the models? Model sizes range from 5MB (tiny classifiers) to 500MB+ (large language models). For most browser use cases, you want models under 100MB. Embedding models like `mxbai-embed-xsmall-v1` are around 30MB. Whisper tiny is 40MB. There are over 1,200 pre-converted models on the Hugging Face Hub ready to use. ### Is WebGPU required? No. Transformers.js falls back to WebAssembly automatically. WebGPU makes inference faster (often 5-10x), but everything works without it. Chrome and Edge support WebGPU today. ### Can I fine-tune models with Transformers.js? No. Transformers.js is inference-only. Fine-tune your model using the Python `transformers` library, then convert to ONNX format using [Optimum](https://github.com/huggingface/optimum) and load it in Transformers.js for inference. Many models on Hugging Face Hub are already converted and tagged with `transformers.js`. ### How does it compare to TensorFlow.js? Transformers.js focuses specifically on transformer models from Hugging Face Hub. TensorFlow.js is a general-purpose ML framework. If you want to run pretrained NLP, vision, or audio models, Transformers.js is simpler and has better model support. If you need custom model architectures or training in the browser, use TensorFlow.js. --- **Further Reading:** - [Transformers.js v3 Announcement](https://huggingface.co/blog/transformersjs-v3) - WebGPU support, 120 architectures, 1,200+ models - [Transformers.js V4 Demos](https://huggingface.co/collections/webml-community/transformersjs-v4-demos) - Live demos including reasoning models and real-time speech - [Transformers.js Documentation](https://huggingface.co/docs/transformers.js) - Official API reference and guides - [Compatible Models on Hugging Face Hub](https://huggingface.co/models?library=transformers.js) - Browse all models tagged for Transformers.js - [Run AI Models Locally with Ollama](/blog/run-ai-models-locally) - Server-side alternative for local inference - [Vercel AI SDK Guide](/blog/vercel-ai-sdk-guide) - Build AI apps with the Vercel AI SDK (has Transformers.js integration) ]]> Thu, 02 Apr 2026 00:00:00 GMT Developers Digest Transformers.js AI TypeScript Machine Learning WebGPU <![CDATA[Getting Started with Claude Code]]> https://www.developersdigest.tech/guides/claude-code-getting-started https://www.developersdigest.tech/guides/claude-code-getting-started Thu, 02 Apr 2026 00:00:00 GMT Developers Digest getting-started Guide <![CDATA[DeepSeek R1 and V3: The Developer's Guide to Open-Source AI]]> https://www.developersdigest.tech/blog/deepseek-r1-v3-guide https://www.developersdigest.tech/blog/deepseek-r1-v3-guide Thu, 26 Mar 2026 00:00:00 GMT Developers Digest DeepSeek Open Source AI Models Local AI <![CDATA[Llama 4: The Complete Developer's Guide to Meta's Open Source Models]]> https://www.developersdigest.tech/blog/llama-4-developers-guide https://www.developersdigest.tech/blog/llama-4-developers-guide Thu, 26 Mar 2026 00:00:00 GMT Developers Digest Llama Meta Open Source AI Models Local AI <![CDATA[Run AI Models Locally with Ollama]]> https://www.developersdigest.tech/guides/run-ai-models-locally https://www.developersdigest.tech/guides/run-ai-models-locally >> What is the time complexity of quicksort? Quicksort has an average-case time complexity of O(n log n) and a worst-case time complexity of O(n^2). The worst case occurs when the pivot selection consistently picks the smallest or largest element, leading to unbalanced partitions... ``` Type `/bye` to exit the session. ### Useful Ollama commands ```bash # List all downloaded models ollama list # Pull a model without starting a chat ollama pull qwen3.5-coder:32b # Remove a model to free disk space ollama rm llama4 # Show model details (parameters, quantization, size) ollama show llama4 # Run with a system prompt ollama run llama4 --system "You are a senior Python developer. Be concise." # Pipe input from a file cat bug-report.txt | ollama run llama4 "Summarize this bug report in 3 bullet points" # Run the API server explicitly (usually auto-started) ollama serve ``` ## Best models for coding Not all models are created equal for programming tasks. Here are the top choices for code generation, completion, and refactoring as of March 2026. ### Qwen 3.5 Coder The current leader for local code generation. Available in multiple sizes to fit your hardware. ```bash # 32B parameters - best quality, needs 20GB+ VRAM ollama run qwen3.5-coder:32b # 14B - great balance of quality and speed ollama run qwen3.5-coder:14b # 7B - fast, works on 8GB VRAM ollama run qwen3.5-coder:7b ``` Qwen 3.5 Coder excels at: - Multi-file code generation - Understanding complex codebases - TypeScript, Python, Rust, and Go - Following coding conventions from context ### DeepSeek Coder V3 Strong at code reasoning and multi-step problem solving. Particularly good at debugging. ```bash # 33B - full quality ollama run deepseek-coder-v3:33b # 7B - lightweight option ollama run deepseek-coder-v3:7b ``` Best for: - Debugging and error analysis - Algorithm implementation - Code review and suggestions - Mathematical and logical reasoning in code ### CodeLlama Meta's code-specialized Llama variant. Mature, well-tested, and widely supported by tools. ```bash # 34B - best quality ollama run codellama:34b # 13B - good middle ground ollama run codellama:13b # 7B - lightweight ollama run codellama:7b ``` Best for: - Code infilling (fill-in-the-middle) - Large context windows (up to 100K tokens) - Broad language support - Integration with older tooling that expects CodeLlama ### Quick comparison for coding models | Model | Size | VRAM Needed | Speed | Code Quality | |-------|------|-------------|-------|-------------| | Qwen 3.5 Coder 32B | 18GB | 24GB | Medium | Excellent | | Qwen 3.5 Coder 14B | 8GB | 12GB | Fast | Very Good | | DeepSeek Coder V3 33B | 19GB | 24GB | Medium | Excellent | | DeepSeek Coder V3 7B | 4GB | 8GB | Very Fast | Good | | CodeLlama 34B | 19GB | 24GB | Medium | Very Good | | CodeLlama 7B | 4GB | 8GB | Very Fast | Decent | ## Best models for general use For chat, writing, summarization, and general reasoning tasks, these models lead the pack. ### Llama 4 Meta's flagship open model. Strong across the board for general tasks. ```bash # Scout variant - lighter, faster ollama run llama4 # Maverick variant - larger, more capable ollama run llama4:maverick ``` Best for: - General chat and Q&A - Writing and editing - Summarization - Instruction following ### Mistral Mistral's models punch well above their weight class. Excellent efficiency-to-quality ratio. ```bash # Mistral Large - top quality ollama run mistral-large # Mistral Small - fast and capable ollama run mistral-small # Mistral 7B - lightweight classic ollama run mistral:7b ``` Best for: - Fast responses with good quality - Multilingual tasks (strong in European languages) - Structured output generation - Function calling and tool use ### Phi-4 Microsoft's compact model series. Surprisingly capable for its size. ```bash # Phi-4 14B - best in class for its size ollama run phi4:14b ``` Best for: - Machines with limited VRAM (runs well on 8GB) - Reasoning tasks - Math and science questions - Fast iteration when you need quick answers ### Quick comparison for general models | Model | Size | VRAM Needed | Speed | Quality | |-------|------|-------------|-------|---------| | Llama 4 Scout | 15GB | 20GB | Medium | Excellent | | Llama 4 Maverick | 25GB | 32GB | Slow | Outstanding | | Mistral Large | 22GB | 28GB | Medium | Excellent | | Mistral Small | 8GB | 12GB | Fast | Very Good | | Phi-4 14B | 8GB | 10GB | Fast | Very Good | ## Using local models with AI coding tools The real power of local models comes from integrating them into your existing development workflow. Here is how to connect Ollama to popular AI coding tools. ### Claude Code Claude Code can use local models as a backend through the OpenAI-compatible API that Ollama provides. ```bash # Set the environment variables to point at your local Ollama export OPENAI_API_BASE=http://localhost:11434/v1 export OPENAI_API_KEY=ollama ``` You can also configure a model alias in your shell profile: ```bash # Add to ~/.zshrc or ~/.bashrc alias claude-local='OPENAI_API_BASE=http://localhost:11434/v1 claude' ``` ### Cursor Cursor has built-in support for Ollama models. 1. Open Cursor Settings (Cmd+Shift+P on macOS, Ctrl+Shift+P on Linux/Windows) 2. Navigate to **Models** > **Model Provider** 3. Select **Ollama** as the provider 4. Choose your model from the dropdown (Cursor auto-detects running models) Alternatively, configure it in `~/.cursor/settings.json`: ```json { "ai.provider": "ollama", "ai.model": "qwen3.5-coder:32b", "ai.endpoint": "http://localhost:11434" } ``` ### Continue.dev Continue is an open-source AI coding assistant that runs in VS Code and JetBrains. It has excellent Ollama support. Install the Continue extension, then edit `~/.continue/config.yaml`: ```yaml models: - title: "Qwen 3.5 Coder 32B" provider: ollama model: qwen3.5-coder:32b apiBase: http://localhost:11434 - title: "Llama 4" provider: ollama model: llama4 apiBase: http://localhost:11434 tabAutocompleteModel: title: "Qwen Coder 7B" provider: ollama model: qwen3.5-coder:7b apiBase: http://localhost:11434 ``` This gives you a full local AI coding setup: the 32B model for chat and generation, and the fast 7B model for tab autocomplete. ### Using the Ollama API directly Ollama exposes an OpenAI-compatible REST API. You can call it from any language or tool. ```bash # Generate a completion curl http://localhost:11434/api/generate -d '{ "model": "qwen3.5-coder:32b", "prompt": "Write a Python function that finds all prime numbers up to n using the Sieve of Eratosthenes", "stream": false }' # Chat completion (OpenAI-compatible endpoint) curl http://localhost:11434/v1/chat/completions -d '{ "model": "qwen3.5-coder:32b", "messages": [ {"role": "system", "content": "You are a helpful coding assistant."}, {"role": "user", "content": "Explain async/await in JavaScript"} ] }' ``` Python example using the `openai` library: ```python from openai import OpenAI client = OpenAI( base_url="http://localhost:11434/v1", api_key="ollama", # required but unused ) response = client.chat.completions.create( model="qwen3.5-coder:32b", messages=[ {"role": "system", "content": "You are a senior developer."}, {"role": "user", "content": "Review this function for bugs"}, ], ) print(response.choices[0].message.content) ``` ## Performance tips Getting the best performance out of local models requires understanding a few key concepts. ### Quantization Models come in different quantization levels that trade quality for speed and memory usage. Ollama handles this automatically, but you can choose specific quantizations. ```bash # Q4_K_M - default, good balance (recommended) ollama run qwen3.5-coder:32b # Q8_0 - higher quality, more memory ollama run qwen3.5-coder:32b-q8_0 # Q2_K - smallest, fastest, lowest quality ollama run qwen3.5-coder:32b-q2_k ``` | Quantization | Quality | Size (32B model) | Speed | |-------------|---------|-------------------|-------| | Q2_K | Decent | ~12GB | Fastest | | Q4_K_M | Very Good | ~18GB | Fast | | Q5_K_M | Excellent | ~22GB | Medium | | Q8_0 | Near-Original | ~34GB | Slow | | FP16 | Original | ~64GB | Slowest | For coding tasks, Q4_K_M is the sweet spot. Below Q4, you start seeing noticeable quality degradation in code generation. Q8_0 is worth it if you have the VRAM. ### GPU vs CPU inference GPU inference is dramatically faster than CPU inference. If you have a dedicated GPU, make sure Ollama is using it. ```bash # Check if Ollama detects your GPU ollama ps # Force GPU layers (useful for partial offloading) OLLAMA_NUM_GPU=999 ollama run llama4 ``` Approximate speed comparison for a 14B model: | Hardware | Tokens/second | Time for 500-token response | |----------|--------------|----------------------------| | NVIDIA RTX 4090 | 80-100 t/s | ~5 seconds | | NVIDIA RTX 4070 | 40-60 t/s | ~10 seconds | | Apple M3 Max (GPU) | 30-50 t/s | ~12 seconds | | Apple M2 Pro (GPU) | 20-35 t/s | ~18 seconds | | CPU only (modern) | 5-10 t/s | ~60 seconds | ### Memory requirements The golden rule: you need enough VRAM (or unified memory on Apple Silicon) to fit the entire model. If the model does not fit in VRAM, it spills to system RAM, which is 10-20x slower. ```bash # Check current memory usage ollama ps # Set maximum VRAM usage OLLAMA_MAX_VRAM=20000 ollama serve # 20GB limit ``` **Apple Silicon users:** You are in a good position. The unified memory architecture means your GPU can access all system RAM. A MacBook Pro with 36GB of unified memory can run 32B parameter models comfortably. **NVIDIA users:** Your VRAM is the hard limit. A 24GB RTX 4090 fits most 32B quantized models. For 70B+ models, you need multi-GPU setups or significant CPU offloading. ### Context length optimization Longer context windows use more memory. If you are running tight on VRAM, reduce the context length. ```bash # Default context length is 2048 # Increase for larger codebases ollama run qwen3.5-coder:32b --num-ctx 8192 # Reduce to save memory ollama run qwen3.5-coder:32b --num-ctx 1024 ``` ### Running multiple models Ollama can keep multiple models loaded in memory simultaneously. This is useful when you want a fast small model for autocomplete and a large model for complex tasks. ```bash # Load two models at once OLLAMA_MAX_LOADED_MODELS=2 ollama serve ``` Just be sure your system has enough total memory for both models. ## Comparison: local vs cloud API Neither local nor cloud is universally better. The right choice depends on your specific situation. ### When local models win - **High-volume usage.** If you send hundreds of requests per day, local inference is essentially free after hardware costs. Cloud APIs charge per token. - **Privacy requirements.** Regulated industries, proprietary codebases, or personal preference for data sovereignty. Local means no third-party data processing. - **Offline workflows.** Traveling, unreliable connections, or air-gapped environments. - **Latency-sensitive tasks.** Tab autocomplete, inline suggestions, and real-time code generation benefit from zero network latency. - **Predictable costs.** No surprise bills. The hardware cost is fixed regardless of usage. ### When cloud APIs win - **Maximum capability.** The largest cloud models (Claude, GPT-4.5, Gemini Ultra) are still significantly more capable than anything you can run locally. For complex multi-step reasoning, architectural decisions, or nuanced code review, cloud models have the edge. - **No hardware investment.** You do not need an expensive GPU. A $20/month API subscription gives you access to frontier models. - **Always up to date.** Cloud providers update models continuously. Local models require manual pulls and version management. - **Scale to zero.** Pay only when you use it. If you have light, sporadic usage, cloud APIs are more cost-effective than dedicated hardware. - **Multi-modal capabilities.** Cloud models increasingly support images, audio, and video inputs that local models cannot match. ### The hybrid approach (recommended) The best setup for most developers is a hybrid approach: - **Local model for autocomplete and quick tasks.** Run a fast 7B model for tab completion, inline suggestions, and quick questions. This handles 80% of your daily AI interactions with zero latency and zero cost. - **Cloud API for complex tasks.** Use Claude or GPT-4.5 for architectural decisions, complex refactoring, multi-file changes, and deep code review. These tasks benefit from the larger model's superior reasoning. ```bash # Example hybrid setup # Terminal 1: Ollama running locally for autocomplete ollama serve # Terminal 2: Use Claude Code for complex tasks (cloud) claude # Your editor: Continue.dev with Ollama for autocomplete, # cloud model for chat ``` This gives you the best of both worlds: fast, free, private AI for routine tasks, and maximum capability when you need it. ## Next steps Now that you have Ollama running, here are some ways to go deeper: - **Explore the model library.** Browse [ollama.com/library](https://ollama.com/library) for hundreds of available models. - **Create custom models.** Write a `Modelfile` to create models with custom system prompts, parameters, and fine-tuning. - **Set up a team server.** Run Ollama on a shared machine so your whole team can access local models over the network. - **Try different quantizations.** Experiment with Q4 vs Q8 for your specific use case to find your quality-speed sweet spot. ```bash # Example Modelfile for a custom coding assistant cat > Modelfile << 'HEREDOC' FROM qwen3.5-coder:32b SYSTEM "You are a senior full-stack developer. You write clean, well-tested TypeScript and Python. Be concise. Show code, not explanations." PARAMETER temperature 0.2 PARAMETER num_ctx 8192 HEREDOC ollama create my-coder -f Modelfile ollama run my-coder ``` Local AI is not a replacement for cloud models. It is a complement that fills a different niche: fast, private, free, and always available. Set it up once, and it becomes a natural part of your development workflow. ]]> Thu, 26 Mar 2026 00:00:00 GMT Developers Digest getting-started Guide <![CDATA[The DevDigest App Ecosystem]]> https://www.developersdigest.tech/blog/devdigest-apps-ecosystem https://www.developersdigest.tech/blog/devdigest-apps-ecosystem Sun, 22 Mar 2026 00:00:00 GMT Developers Digest DevDigest Apps Tools <![CDATA[AI Agents Explained: A TypeScript Developer's Guide]]> https://www.developersdigest.tech/blog/ai-agents-explained https://www.developersdigest.tech/blog/ai-agents-explained { const res = await fetch(`https://wttr.in/${city}?format=j1`); return res.json(); }, }), searchWeb: tool({ description: "Search the web for information", parameters: z.object({ query: z.string().describe("Search query"), }), execute: async ({ query }) => { // Your search implementation return await search(query); }, }), }, prompt: "What's the weather in Tokyo and what events are happening there this week?", }); ``` Each step is one iteration of the ReAct loop. The model might call `getWeather` first, then `searchWeb` for events, then synthesize both results into a final answer. Setting `maxSteps: 10` gives it room to chain multiple tool calls without running forever. ## Building Agents with Claude Agent SDK The [Claude Agent SDK](https://github.com/anthropic-ai/claude-code/tree/main/packages/agent) takes a different approach. Instead of wrapping tool calls in a text generation function, it gives you a full agent runtime with built-in support for delegation, handoffs, and guardrails. ```typescript import { Agent, tool } from "@anthropic-ai/agent"; import { z } from "zod"; const researchAgent = new Agent({ name: "researcher", model: "claude-sonnet-4-5-20250514", instructions: "You research topics thoroughly using web search.", tools: [ tool({ name: "search", description: "Search the web", parameters: z.object({ query: z.string() }), execute: async ({ query }) => searchWeb(query), }), ], }); const response = await researchAgent.run( "Find the top 5 TypeScript ORMs by GitHub stars and compare their query APIs" ); ``` The SDK handles the ReAct loop internally. You define the agent's identity, tools, and constraints. The runtime manages context, retries, and tool execution. ## Multi-Agent Patterns Single agents hit a ceiling on complex tasks. The context window fills up. The model loses focus. Errors compound. [Multi-agent architectures](/blog/multi-agent-systems) solve this by splitting work across specialized agents, each with its own context and toolset. Three patterns dominate: ### 1. Orchestrator-Worker A central orchestrator agent breaks a task into subtasks and delegates each to a specialized worker. The orchestrator synthesizes results. This is the most common pattern for complex, multi-domain problems. ```typescript const orchestrator = new Agent({ name: "orchestrator", instructions: "Break tasks into subtasks. Delegate to specialists.", tools: [ delegateTo(researchAgent), delegateTo(codingAgent), delegateTo(reviewAgent), ], }); ``` ### 2. Pipeline Agents execute in sequence. The output of one becomes the input of the next. Good for workflows with clear stages: research, then draft, then review, then publish. ```typescript const research = await researchAgent.run(topic); const draft = await writerAgent.run(`Write about: ${research}`); const final = await editorAgent.run(`Review and improve: ${draft}`); ``` ### 3. Parallel Fan-Out Multiple agents work on independent subtasks simultaneously. Results are collected and merged. Best for tasks where subtasks do not depend on each other. ```typescript const [apiDocs, examples, benchmarks] = await Promise.all([ docsAgent.run("Extract API reference"), exampleAgent.run("Generate usage examples"), benchmarkAgent.run("Run performance benchmarks"), ]); ``` For a deeper look at these patterns with production examples, see the [patterns guide](https://subagent.developersdigest.tech/patterns) and the [frameworks comparison](https://subagent.developersdigest.tech/frameworks). ## When to Use an Agent vs. a Chain Not everything needs an agent. If the steps are known in advance and never change, a deterministic chain is simpler and more predictable. Use an agent when: - The number of steps is unknown ahead of time - The next step depends on the result of the previous step - The task requires dynamic decision-making - You need the system to recover from errors autonomously A good rule: if you can draw a fixed flowchart, use a chain. If the flowchart has conditional branches that depend on runtime data, use an agent. ## Practical Considerations **Token costs add up.** Every iteration of the ReAct loop is a full LLM call. A 10-step agent run with a large context can cost 10x a single completion. Set reasonable `maxSteps` limits and use smaller models for simple subtasks. **Observability matters.** Agents make opaque decisions. Log every tool call, every intermediate result, every reasoning step. When an agent produces a wrong answer, you need to trace which step went sideways. **Guardrails prevent runaway agents.** Set timeout limits. Restrict tool access to the minimum required. Validate tool inputs before execution. An agent with unrestricted shell access and no timeout is a production incident waiting to happen. **Start simple.** Build a single-agent system with two or three tools. Get it working reliably. Then add agents and complexity only when you hit real limitations. Most tasks that seem to need multi-agent coordination can be solved with a well-prompted single agent and good tools. ## What to Build Next The fastest way to internalize this is to build something. For a practical starting point, see our guide on [building apps with AI](/blog/build-apps-with-ai). Start with a research agent that searches the web and writes structured summaries. Add a code agent that can read files and run tests. Wire them together with an orchestrator. You will learn more about agent design in one afternoon of building than in a week of reading. The TypeScript ecosystem for agents is maturing fast. Vercel AI SDK, Claude Agent SDK, LangChain.js, and others all provide solid foundations. Tools like [Claude Code](/blog/what-is-claude-code) are themselves agents built on these patterns. Pick one, build something real, and ship it. ## Frequently Asked Questions ### What are AI agents? AI agents are programs that use large language models to autonomously complete multi-step tasks. You give an agent a goal, and it decides what steps to take, calls tools to interact with external systems, evaluates results, and keeps iterating until the objective is met. The key difference from traditional software is that the control flow is determined by the model at runtime, not hard-coded by the developer. ### How do AI agents work? Most AI agents follow the ReAct (Reason + Act) pattern. The model looks at the current state and decides what to do next (reason), executes an action like calling a tool or querying a database (act), then observes the result. This loop repeats until the goal is achieved. Each iteration adds new information to the model's context, enabling increasingly informed decisions across multiple steps. ### What is the difference between AI agents and chatbots? A chatbot processes a single user message and returns a single response in a request-response pattern. An AI agent operates in a goal-directed loop, making multiple LLM calls and tool invocations autonomously. Chatbots wait for user input between every message. Agents can chain dozens of operations together - searching, querying, writing files, running code - without human input between steps. See our guide on [how to build agents in TypeScript](/blog/how-to-build-ai-agents-typescript) for practical examples. ### What can AI agents do? AI agents can perform any task that can be broken into steps involving reasoning and tool use. Common applications include code review and refactoring, data analysis across multiple sources, research and report generation, customer support with database lookups, automated testing, and deployment management. The capabilities are determined by the tools you provide - file access, database queries, web search, API calls, and more. ### Are AI agents safe? AI agents are as safe as the guardrails you build around them. Best practices include restricting tool access to the minimum required permissions, setting timeout and step limits to prevent runaway execution, using read-only database connections for analytical tasks, adding confirmation tools for destructive actions, and logging every tool call for auditability. Start with narrow scope and expand only as you build confidence in the system's behavior. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Agents TypeScript Claude Agent SDK Vercel AI SDK <![CDATA[My AI Developer Workflow in 2026]]> https://www.developersdigest.tech/blog/ai-developer-workflow-2026 https://www.developersdigest.tech/blog/ai-developer-workflow-2026 Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Tools Workflow Claude Code Productivity <![CDATA[The Solo Developer's AI Toolkit in 2026]]> https://www.developersdigest.tech/blog/ai-tools-for-solo-developers https://www.developersdigest.tech/blog/ai-tools-for-solo-developers `, add the middleware, and your app has production-grade auth. The time from zero to "users can sign in with Google" is about five minutes. ### The Total | Service | Role | Monthly Cost | |---------|------|-------------| | Claude Code Max | AI coding agent | $200 | | Cursor Pro | AI IDE | $20 | | Vercel | Deployment + CDN | $0 | | Convex | Backend + database | $0 | | Clerk | Auth + user management | $0 | | **Total** | | **$220/mo** | A single senior developer costs $10,000-15,000/mo fully loaded. This stack gives you capabilities that overlap significantly with what that developer provides, at 2% of the cost. ## How I Ship a Full Product in a Weekend This is not a theoretical workflow. This is the actual sequence I follow when building a new SaaS product from scratch. ### Friday Evening: Architecture and Context Write the CLAUDE.md file. This is the highest-leverage hour of the entire project. Define the stack, the conventions, the data model, and the rules. The better this file is, the better every AI interaction will be for the rest of the build. Use [Claude Code's plan mode](/blog/ai-developer-workflow-2026) to think through the architecture before writing any code. Describe the product, the features, the user flows. Let the model poke holes in the plan and suggest improvements. Iterate until the plan is solid. Set up API keys. Clerk, Convex, any third-party services the product needs. Do this now so you never hit a "missing API key" error during the build. AI tools produce better code when they can validate against real endpoints. ```bash # Initialize the project npx create-convex@latest my-saas --template nextjs-clerk cd my-saas # Set up environment cp .env.example .env.local # Add Clerk keys, Convex URL, any API keys ``` ### Saturday Morning: Core Features This is where Claude Code earns its cost. Give it bounded, specific tasks and let it run autonomously. ``` Build the project dashboard: - Protected route, redirect to sign-in if not authenticated - List all projects for the current user from Convex - Create project form with name and description - Delete project with confirmation - Empty state for new users ``` Claude Code reads the Convex schema, the Clerk middleware, and the existing file structure. It produces the page, the components, the Convex queries, and the mutations. You review the output, test it, and move on. One prompt, thirty minutes, a complete feature. Stack three or four of these prompts across the morning. Each builds on the last. By lunch, you have a working application with auth, data persistence, and core functionality. ### Saturday Afternoon: UI and Polish Switch to Cursor. The core logic exists. Now you are in refinement mode. Adjust the layout. Fix the responsive breakpoints. Tweak the typography. Add loading states and error boundaries. This is where the Claude Code + Cursor split pays off. Claude Code built the right thing. Cursor makes it look right. The tight feedback loop of Cursor's editor means you can iterate on visual details at the speed you can form opinions about them. ### Sunday: Test, Deploy, Launch Push to main. Vercel deploys automatically. Test the production build. Write a landing page. Set up the custom domain. Announce on X. The total timeline from idea to live product: roughly 48 hours of elapsed time, maybe 16 hours of actual work. A year ago, this same project would have taken two to three weeks. ## The Multiplication Effect The real power of this stack is not that it makes you faster at one project. It makes you capable of maintaining multiple projects simultaneously. With AI tools, one developer can: **Write code at 3-5x speed.** The baseline improvement. Claude Code and Cursor handle the typing, the boilerplate, the repetitive patterns. You focus on decisions, not keystrokes. **Maintain multiple products.** Context switching between projects used to be expensive because you had to rebuild mental models. CLAUDE.md files store the context for you. Open a project, Claude Code reads the rules file, and it is up to speed instantly. You can work on three products in a single day without the cognitive overhead that used to make this impossible. **Ship features that used to need a team.** Real-time collaboration, role-based access, payment processing, email notifications. These are not weekend projects for a solo developer working manually. With AI tools and managed services, they are afternoon tasks. **Handle frontend, backend, and DevOps.** The stack boundaries blur when your AI tools understand all three layers. Claude Code refactors a React component, updates the Convex mutation it calls, and verifies the deployment configuration. One tool, one prompt, three layers handled. **Iterate based on user feedback daily.** When a user reports a bug or requests a feature, you can ship a fix in the same conversation. Open Claude Code, describe the issue, let it find and fix the problem, push to main, deployed. The cycle from "user reported a problem" to "fix is live" drops from days to minutes. ## Free Alternatives for Bootstrappers Not everyone starts at $220/mo. If you are pre-revenue and watching every dollar, here are tools that cost nothing. ### Gemini CLI - Free, Unlimited Google's terminal-based coding agent. It handles file reading, code generation, and multi-step reasoning. The model quality does not match Claude, but the price is unbeatable. For early prototyping and boilerplate generation, it is a solid starting point. ### Windsurf - Generous Free Tier A VS Code-based AI editor with a free tier that covers meaningful usage. It handles multi-file edits, understands project context, and provides inline suggestions. If Cursor's $20/mo is too much early on, Windsurf fills the same role at no cost. ### v0 - Free for UI Generation Vercel's UI generation tool creates React components from natural language descriptions. Describe a pricing page, a dashboard layout, or a form with validation. v0 produces a working component using shadcn/ui and Tailwind that you can drop into your project. ### Bolt - Free for Prototypes Bolt generates complete applications from descriptions. The trade-off is control. You get a working app fast, but the architecture is Bolt's, not yours. For validating ideas quickly before investing in a proper build, it saves time. ### The Bootstrap Path Start free. Ship the first version with Gemini CLI and Windsurf. Get to revenue. Then upgrade to Claude Code Max when the cost is covered by the product itself. The free tools are good enough to build something worth paying for. ## When to Hire vs. When to AI AI tools do not replace every kind of work. Knowing where the boundary is saves you from over-relying on tools that are not suited for certain tasks. ### Use AI When **Building features.** This is the core use case. Describe the feature, let the agent implement it, review the output. AI excels at translating clear requirements into working code. **Prototyping.** Speed matters more than perfection. AI tools let you test five approaches in the time it takes to manually build one. Throw away the bad ones and refine the good one. **Writing boilerplate.** Forms, CRUD operations, API routes, database schemas, test files. Repetitive code that follows patterns is exactly what AI handles best. **Refactoring.** "Convert this class component to a function component." "Add TypeScript types to this JavaScript file." "Extract this logic into a custom hook." Mechanical transformations with clear rules. **Content generation.** Documentation, README files, blog posts, marketing copy. AI produces a solid first draft that you edit into the final version. ### Hire When **You need domain expertise you do not have.** AI tools reflect the knowledge of their training data. If your product needs deep understanding of healthcare regulations, financial compliance, or specialized engineering, hire someone who has that knowledge. **Ongoing maintenance at scale.** One developer with AI tools can maintain several small products. But a product with thousands of users, complex infrastructure, and constant feature requests eventually needs more hands. The signal is when you are spending more time maintaining than building. **Regulatory compliance.** Security audits, SOC 2 certification, HIPAA compliance. These require human judgment and accountability that AI cannot provide. **Design that needs to be exceptional.** AI tools produce functional UIs. A skilled designer produces UIs that make people feel something. If design quality is a competitive advantage for your product, hire a designer. ## The Infrastructure Stack in Detail The zero-dollar infrastructure layer deserves a closer look because it is what makes the solo developer model viable. If you had to pay for hosting, databases, auth, and CDN separately, the economics would not work. **[Next.js](/tools/nextjs) 16** handles the frontend framework. Server components reduce client-side JavaScript. Server actions eliminate API route boilerplate. The App Router provides file-based routing that AI tools understand well because the file structure maps directly to the URL structure. **[Vercel](/tools/vercel)** deploys Next.js with zero configuration. Push to main, the site is live in under a minute. Preview deployments for branches. Automatic HTTPS. Edge functions for API routes that need low latency. The free tier is generous enough for products with real traffic. **[Convex](/tools/convex)** replaces the database, the ORM, the API layer, and the real-time infrastructure. One service instead of four. The TypeScript-first approach means your AI tools understand the schema, the queries, and the mutations as part of the same type system that powers your frontend. **Clerk** handles everything auth-related. OAuth providers, email magic links, multi-factor authentication, organization management, role-based access. The free tier covers thousands of users. You never write auth code. **Tailwind CSS** provides the styling layer. AI tools generate Tailwind classes more reliably than any other CSS approach because the utility class names are descriptive and deterministic. "Make this button blue with rounded corners and padding" translates directly to class names. ```typescript // Your entire backend is TypeScript // Same language, same types, same tooling // Schema (Convex) const schema = defineSchema({ products: defineTable({ name: v.string(), price: v.number(), userId: v.string(), }), }); // Query (Convex) export const list = query({ handler: async (ctx) => { const identity = await ctx.auth.getUserIdentity(); if (!identity) throw new Error("Not authenticated"); return ctx.db .query("products") .filter((q) => q.eq(q.field("userId"), identity.subject)) .collect(); }, }); // Frontend (Next.js + Convex) export default function Products() { const products = useQuery(api.products.list); return ; } ``` The total infrastructure cost for a production application with authentication, real-time database, and global CDN deployment: $0/mo. This is not a limited trial. These are production-grade free tiers that scale to meaningful usage. ## Building the Habit The tools only matter if you use them consistently. The developers who get the most from AI tools are the ones who have built a daily practice around them. **Start every session by reading your CLAUDE.md.** Update it with anything you learned yesterday. Add rules for mistakes the AI made. Refine your conventions. This file is your compound interest. **Commit after every feature.** Small commits, clear messages, frequent pushes. AI tools make it easy to generate large amounts of code quickly. Version control is how you maintain the ability to undo. **Ship something every week.** The tools are fast enough that weekly releases are realistic for a solo developer. A new feature, a bug fix batch, a UI improvement. Consistent output builds momentum and user trust. **Run multiple projects.** Once you are comfortable with the stack, start a second product. The CLAUDE.md system means context switching is cheap. The infrastructure stack means each new project adds near-zero cost. The AI tools mean development speed is not bottlenecked by typing speed. The solo developer with AI tools is not a compromise. It is a competitive advantage. You move faster than teams. You spend less than startups. You ship more than most companies with ten engineers. The tools exist. The stack is proven. The cost is $220/mo. The only remaining variable is whether you build something with it. ## Related Reading - [The 10 Best AI Coding Tools in 2026](/blog/best-ai-coding-tools-2026) - [AI Coding Tools Pricing Comparison 2026](/blog/ai-coding-tools-pricing-2026) - [The AI Developer Workflow in 2026](/blog/ai-developer-workflow-2026) - [The Complete Guide to Vibe Coding](/blog/vibe-coding-guide) - [How to Build Full-Stack TypeScript Apps With AI](/blog/build-apps-with-ai) - [Browse the full toolkit](/toolkit) - [What I use daily](/uses) ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Tools Indie Hacking Solo Developer Productivity <![CDATA[Aider vs Claude Code: Open Source vs Commercial AI Coding CLI]]> https://www.developersdigest.tech/blog/aider-vs-claude-code https://www.developersdigest.tech/blog/aider-vs-claude-code Add a POST /api/projects endpoint with Zod validation. > Follow the patterns in /api/users. Write tests in tests/api/. ``` Aider reads the referenced files, generates the code, and commits. If the generated code has type errors, you re-prompt and it fixes them. Each fix is another commit. The git history shows exactly what happened: "Add POST /api/projects endpoint," "Fix type error in project validation," "Add missing test assertion." You stay in the loop. You review each commit. You guide the process. ### Claude Code ``` Add a POST /api/projects endpoint. Use the existing patterns from /api/users for structure. Zod validation on the request body. Write tests using the existing test helpers in tests/. Run tsc and vitest to verify. Fix any failures. ``` Claude Code reads the codebase, writes the endpoint, creates the types, generates tests, runs the compiler, runs the tests, and fixes whatever breaks. You come back to a working feature. You stay out of the loop. The agent handles the full cycle. ## Where Each One Wins **Aider wins when:** - You want full model flexibility. Use Claude today, switch to GPT tomorrow, run DeepSeek locally on Friday. No lock-in. - Git history matters. Every change is a clean commit with a descriptive message. Rollback is trivial. - You want to control costs. Bring your own API keys. Use cheap models for simple edits, expensive ones for complex refactors. Run local models for free. - You need transparency. Aider shows exactly which files it is editing and why. No hidden sub-agent orchestration. - You are on a team with mixed tooling. Aider does not care about your editor, your OS, or your cloud provider. **Claude Code wins when:** - You want autonomous execution. Describe the outcome, walk away, come back to working code. - Your workflow needs external tool integration. MCP servers connect Claude Code to databases, browsers, APIs, and services. - You work on large codebases. Sub-agents parallelize work across modules. Memory persists your project context. - You need more than code editing. Claude Code writes docs, manages git branches, runs deployments, and chains multi-step workflows. - You want a maintained, commercial product with Anthropic's full support. ## Pricing **Aider:** Free and open source. You pay for the model API. Costs depend entirely on which model you choose and how much you use it. Running Claude Sonnet through the API might cost $5-30/month for moderate use. Running a local model costs nothing beyond electricity. **Claude Code:** $20/month for the Pro plan (limited usage). $100/month for Max 5x. $200/month for Max 20x (heavy usage). All plans use Claude models exclusively. The pricing model reflects the philosophical difference. Aider gives you the tool and lets you bring your own compute. Claude Code bundles the tool and the model into a single subscription. For a solo TypeScript developer writing a few features a day, Aider with a mid-tier API key might run $10-20/month. Claude Code Pro at $20/month gives you a comparable budget but locks you into Claude models. At the $200/month Max tier, Claude Code gives you heavy autonomous usage that would cost significantly more through raw API access. ## The Strategic Choice This is not a features comparison. It is a philosophy comparison. Aider bets on openness. Any model, any provider, full git integration, no lock-in. You own the workflow. The community builds extensions, model support, and integrations. If Anthropic raises prices or OpenAI ships a better model, you switch with a flag. Claude Code bets on integration. One model provider, deep agent capabilities, MCP ecosystem, persistent memory. The tradeoff for lock-in is a more capable autonomous agent that handles complex multi-step tasks without hand-holding. If you value flexibility and cost control, start with Aider. If you value autonomous execution and do not mind the Anthropic dependency, start with Claude Code. Both are CLIs. Both run in your terminal. Both write real TypeScript. Pick the one that matches how you work, not which one has more features on a spec sheet. For a full breakdown of every AI coding CLI available right now, check the [AI CLI Tools Directory](https://clis.developersdigest.tech). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Aider Claude Code AI Coding Open Source TypeScript <![CDATA[Astral Joins OpenAI: What It Means for Python Developers]]> https://www.developersdigest.tech/blog/astral-joins-openai https://www.developersdigest.tech/blog/astral-joins-openai Thu, 19 Mar 2026 00:00:00 GMT Developers Digest OpenAI Python Developer Tools Ruff uv <![CDATA[The 10 Best AI Coding Tools in 2026]]> https://www.developersdigest.tech/blog/best-ai-coding-tools-2026 https://www.developersdigest.tech/blog/best-ai-coding-tools-2026 void }) { const [query, setQuery] = useState(""); // Cursor rewrites this component in seconds // with debouncing, loading states, and keyboard shortcuts } ``` The Cursor Rules system lets you define project conventions that persist across sessions. Combined with its context-aware completions and inline editing, it handles the 80% of coding work that is incremental changes to existing code. **Best for:** Rapid prototyping, UI iteration, ambiguous requirements where speed beats precision. **Pricing:** Pro at $20/mo. The best value in AI coding right now. ## 3. Codex OpenAI's Codex CLI brings GPT-5.3 to the terminal. It follows the same pattern as Claude Code: a command-line agent that reads your project, reasons about changes, and executes them directly. ```typescript // Codex handles complex TypeScript refactoring well // Example: migrate an Express API to Hono with full type safety import { Hono } from "hono"; import { zValidator } from "@hono/zod-validator"; import { z } from "zod"; const app = new Hono(); app.post( "/api/users", zValidator("json", z.object({ email: z.string().email() })), async (c) => { const { email } = c.req.valid("json"); // Codex migrates route handlers, middleware, and error handling return c.json({ created: true }); } ); ``` The GPT-5.3 model is strong on TypeScript type inference and can handle complex generic patterns that trip up smaller models. The cloud execution mode is useful for long-running tasks where you want to close your laptop and check results later. For a deeper look at the CLI, see our [OpenAI Codex guide](/blog/openai-codex-guide). **Best for:** Complex refactoring, type-heavy TypeScript, long-running autonomous tasks. **Pricing:** Included with ChatGPT Pro. ## 4. Gemini CLI Google's Gemini CLI is free and surprisingly capable. It connects to the Gemini 2.5 Pro model, which has one of the largest context windows available. For TypeScript projects with massive codebases, the ability to load more files into context without truncation is a real advantage. ```typescript // Gemini CLI shines on large codebase analysis // Feed it your entire monorepo and ask architectural questions // Example: "Find all places where we handle auth tokens // and ensure they follow the same refresh pattern" // Gemini's large context window processes hundreds of files ``` The zero cost makes it the obvious choice for high-volume tasks where you would burn through usage limits on paid tools. Research, documentation generation, code review on large PRs. Use it for the work that does not need peak reasoning quality. We cover setup and advanced usage in our [Gemini CLI guide](/blog/gemini-cli-guide). **Best for:** Large codebase analysis, high-volume tasks, documentation generation. **Pricing:** Free. ## 5. GitHub Copilot Copilot is the incumbent. It works. It is everywhere. The latest iteration with agent mode in VS Code handles multi-file edits and terminal commands, closing the gap with Cursor and Claude Code. The strength is ecosystem integration. Copilot knows your GitHub issues, your PR history, your CI pipeline. When you reference an issue number in a prompt, it pulls the full context. The workspace agent can read your entire repository structure. ```typescript // Copilot's inline suggestions remain the gold standard // for line-by-line completion speed async function fetchUserPosts(userId: string): Promise { // Start typing and Copilot suggests the full implementation // based on your existing fetch patterns and types const res = await fetch(`/api/users/${userId}/posts`); if (!res.ok) throw new ApiError(res.status, await res.text()); return res.json(); } ``` The free tier is generous enough for individual developers. For teams already on GitHub Enterprise, Copilot is the path of least resistance. See our [GitHub Copilot guide](/blog/github-copilot-guide) for a full feature breakdown. **Best for:** Teams on GitHub, inline completions, CI-aware code generation. **Pricing:** Free tier available. Individual at $10/mo, Business at $19/mo. ## 6. Windsurf Windsurf (formerly Codeium) occupies interesting middle ground. The Cascade agent handles multi-step tasks with a flow-based approach that chains operations together. It reasons about what to do next based on the results of previous steps. ```typescript // Windsurf's Cascade flow for building a feature end-to-end: // 1. Read existing schema // 2. Add new table with relations // 3. Generate typed client functions // 4. Create API route with validation // 5. Build React component with form handling // Each step feeds context to the next // without you managing the chain manually ``` The SWE-1 model, trained specifically for software engineering tasks, handles TypeScript project structure well. It understands monorepo boundaries, package dependencies, and build configurations. The autocomplete is fast and the agent mode is competent. For a head-to-head comparison, see our [Windsurf vs Cursor](/blog/windsurf-vs-cursor) analysis. **Best for:** Multi-step feature development, developers who want agent capabilities in a familiar IDE. **Pricing:** Pro at $15/mo. ## 7. Aider Aider is the open-source terminal agent that connects to any model. It predates Claude Code and Codex as a CLI-first coding tool. The key advantage is model flexibility. Point it at Claude, GPT, Gemini, or a local model running on your own hardware. ```bash # Aider with any model backend aider --model claude-opus-4 --yes # Or use a local model for sensitive codebases aider --model ollama/qwen3.5:122b ``` The git integration is excellent. Aider creates atomic commits for each change with descriptive messages. The `/architect` mode uses a reasoning model for planning and a faster model for implementation, splitting the work the way you would split it manually. For TypeScript projects, Aider handles `tsconfig.json` paths, barrel exports, and module resolution correctly. It reads your project structure and respects existing patterns. **Best for:** Open-source enthusiasts, local model users, developers who want full control over their AI stack. **Pricing:** Free (bring your own API keys). ## 8. v0 Vercel's v0 generates production-ready UI components from natural language prompts. It outputs Next.js code with shadcn/ui, Tailwind, and proper TypeScript types. The components are not prototypes. They are copy-paste ready for production apps. ```typescript // v0 generates complete, typed components // Prompt: "A data table with sorting, filtering, pagination, // and row selection using shadcn/ui" // Output: A fully typed DataTable component with: // - Generic type parameter for row data // - Column definitions with sort handlers // - Debounced filter input // - Controlled pagination with page size selector // - Checkbox selection with bulk actions ``` The recent addition of full application generation means v0 can scaffold entire Next.js projects, not just individual components. For TypeScript developers who use the Next.js and shadcn stack, v0 is the fastest path from idea to working UI. **Best for:** UI component generation, Next.js prototyping, shadcn/ui projects. **Pricing:** Free tier with limits. Premium at $20/mo. ## 9. Lovable Lovable generates full-stack applications from prompts. You describe what you want, and it builds a complete project with frontend, backend, authentication, and database. The output is deployable code, not a walled-garden preview. ```typescript // Lovable generates entire application architectures // "Build a project management app with: // - Clerk auth // - Kanban board with drag-and-drop // - Real-time updates via Convex // - Team workspaces" // Result: A complete Next.js project with proper // TypeScript types, server components, and deployment config ``` The quality gap between Lovable's output and hand-written code has narrowed significantly. For MVPs, internal tools, and rapid validation of product ideas, it eliminates days of scaffolding work. The open-source alternative, [Open Lovable](https://open-lovable.dev), brings the same approach to self-hosted environments. **Best for:** MVPs, internal tools, rapid product validation, non-technical founders. **Pricing:** Free tier. Starter at $20/mo. ## 10. Devin Devin is the fully autonomous software engineer. You assign it a task through a Slack message or web interface, and it works independently. It sets up environments, writes code, runs tests, opens PRs, and iterates based on CI results. ```typescript // Devin handles end-to-end tasks asynchronously // "Migrate our authentication from next-auth to Clerk, // update all protected routes, and ensure tests pass" // Devin: // 1. Forks the repo // 2. Reads existing auth implementation // 3. Installs Clerk, configures middleware // 4. Updates every protected route // 5. Runs the test suite, fixes failures // 6. Opens a PR with a detailed description ``` The pricing is high and the autonomy means you need solid test coverage to catch mistakes. But for well-defined tasks with clear acceptance criteria, Devin handles work that would otherwise block your team for a full sprint. **Best for:** Delegating well-defined tasks, teams with strong test coverage, migration work. **Pricing:** Team plan at $500/mo per seat. ## How to Choose The right tool depends on how you work. **If you live in the terminal:** Claude Code. Nothing else comes close for autonomous, multi-step development with full project context. Pair it with [CLI tools](https://clis.developersdigest.tech) that extend its capabilities. **If you want the fastest IDE experience:** Cursor. The velocity advantage is real for iterative work. See our [Claude Code vs Cursor breakdown](/blog/claude-code-vs-cursor-2026) for a detailed comparison. **If you need to coordinate multiple agents:** Claude Code's [sub-agent architecture](https://subagent.developersdigest.tech) lets you decompose complex work across specialized workers running in parallel. **If budget is a constraint:** Gemini CLI (free) for heavy lifting, Copilot free tier for inline completions, Aider with a local model for everything else. **If you are building UIs:** v0 for components, Lovable for full applications. The meta-trend across all 10 tools is the same: coding is becoming coordination. You are not writing every line. You are describing intent, reviewing output, and orchestrating agents. The developers who ship the most in 2026 are the ones who pick the right tool for each task and let it run. The tools are ready. The question is whether your workflow is. ## Frequently Asked Questions ### What is the best AI coding tool in 2026? [Claude Code](/blog/what-is-claude-code) is the best AI coding tool available today for TypeScript developers. It runs in your terminal with full file system access, reasons about your entire codebase, and executes multi-step tasks autonomously. The sub-agent architecture lets you parallelize work across specialized agents, and the CLAUDE.md memory system means it learns your project conventions over time. ### Is Cursor better than Copilot? [Cursor](/tools/cursor) and GitHub Copilot serve different workflows. Cursor excels at multi-file agent-driven edits through its Composer mode and is faster for iterative prototyping. Copilot is better for inline completions and has deeper GitHub integration (issues, PRs, CI). Cursor costs $20/mo and delivers more agent capability. Copilot has a free tier and is the easier choice for teams already on GitHub Enterprise. ### Is Claude Code free? No. Claude Code requires an Anthropic subscription. The Pro plan ($20/mo) includes limited Claude Code access, and the Max plan ($200/mo) provides high usage limits for daily development. You can also use Claude Code with your own API key on a pay-per-use basis, but heavy usage adds up quickly. There is no free tier. ### What AI tool should beginners use? Start with GitHub Copilot's free tier for inline completions while you code. It works in VS Code with minimal setup and helps you learn patterns faster. Once you are comfortable, try [Cursor](/tools/cursor) ($20/mo) for agent-assisted development, or the free [Gemini CLI](/blog/gemini-cli-guide) for terminal-based AI coding. Move to Claude Code when you need autonomous multi-file reasoning. ### Can AI write production code? Yes, with caveats. Tools like Claude Code, Cursor, and Codex regularly produce code that ships to production. The quality depends on your prompts, your test coverage, and your review process. AI tools work best when you provide clear context (via CLAUDE.md or Cursor Rules), have type checking and linting enabled, and review every change before committing. They handle scaffolding, refactoring, and boilerplate exceptionally well. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Coding Developer Tools TypeScript Cursor <![CDATA[The 15 Best MCP Servers in 2026]]> https://www.developersdigest.tech/blog/best-mcp-servers-2026 https://www.developersdigest.tech/blog/best-mcp-servers-2026 Thu, 19 Mar 2026 00:00:00 GMT Developers Digest MCP Claude Code AI Tools <![CDATA[How to Build Full-Stack TypeScript Apps With AI in 2026]]> https://www.developersdigest.tech/blog/build-apps-with-ai https://www.developersdigest.tech/blog/build-apps-with-ai Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Coding TypeScript Next.js Full Stack <![CDATA[55 Claude Code Tips and Tricks for Power Users]]> https://www.developersdigest.tech/blog/claude-code-tips-tricks https://www.developersdigest.tech/blog/claude-code-tips-tricks Remember: always use named exports, never default exports ``` Claude stores this in its memory file and applies it to future sessions. Over weeks, your Claude Code instance becomes personalized to your exact coding style. This is the closest thing to a coding assistant that actually learns from you. The memory compounds. Each correction you persist means one fewer correction next session. After a month of active use, Claude Code knows your patterns cold. ### 3. Create Custom Slash Commands Slash commands are markdown files that define reusable prompts. Drop a file in `.claude/commands/` and it becomes available as a slash command in every session. ```markdown Review the staged git changes. Check for: - Type safety issues - Missing error handling - Security concerns (SQL injection, XSS) - Performance regressions Output a summary with severity levels. ``` Now type `/review` in any session and Claude executes that prompt. Build commands for your common workflows: code review, test generation, documentation updates, migration scripts. The file format is plain markdown, so version control them alongside your code. Project-level commands go in `.claude/commands/`. Global commands go in `~/.claude/commands/`. Both show up when you type `/` in a session. ### 4. Reference Files with @ Syntax Use `@` to include files or directories directly in your prompt without waiting for Claude to search for them. ``` Explain the logic in @src/utils/auth.js ``` This immediately loads the full file content into context. It works with directories too - `@src/components` provides a directory listing. You can reference multiple files in one message: `@file1.js and @file2.js`. File paths can be relative or absolute. Bonus: `@` references also load any `CLAUDE.md` files in that file's directory and parent directories, so you get contextual rules for free. ### 5. Use @ for MCP Resources The `@` syntax extends beyond local files. When you have MCP servers connected, you can reference their resources directly. ``` Show me the data from @github:repos/owner/repo/issues ``` This fetches data from connected MCP servers using the format `@server:resource`. It turns external data sources into first-class references in your prompts. ## Productivity ### 6. Use Sub-Agents for Parallel Work Single-threaded AI assistance is slow. [Sub-agents](/blog/claude-code-sub-agents) let you decompose work across multiple focused Claude instances running simultaneously. ``` Spawn three sub-agents: 1. Research agent: search the web for the latest Stripe API changes 2. Frontend agent: build the pricing page component 3. Backend agent: create the webhook handler Use worktree isolation for each. ``` Each agent gets its own context, its own tools, and its own git branch. The research agent fetches documentation while the frontend agent builds UI while the backend agent writes server code. No context pollution between them. Define reusable agent configurations in `.claude/agents/` as markdown files. Specify which tools each agent can access, which model it should use, and what system prompt governs its behavior. ### 7. Run in Headless Mode with -p Flag Claude Code does not require an interactive terminal. The `-p` flag runs a single prompt and exits, which makes it scriptable. ```bash claude -p "Add input validation to all API routes in src/app/api/" ``` This is how you integrate Claude Code into shell scripts, CI pipelines, and automation workflows. Combine it with cron jobs for scheduled maintenance tasks: ```bash # Daily dependency check claude -p "Check for outdated dependencies and security vulnerabilities. Output a summary." ``` Headless mode outputs to stdout by default. Pipe it wherever you need it. Combine with `--output` to write results directly to a file. ### 8. Pipe Output to Files with --output When you want Claude Code's response saved to disk rather than printed to the terminal, use the `--output` flag. ```bash claude -p "Generate a migration plan for upgrading from Next.js 15 to 16" --output migration-plan.md ``` This pairs well with headless mode for building content pipelines. Generate documentation, audit reports, or code analysis and route the output directly where it belongs. You can also use `--output-format` to control the response format. Options include `text`, `json`, and `stream-json` for programmatic consumption. ### 9. Use /compact to Manage Context Long sessions accumulate context. Eventually the model's context window fills up and performance degrades. The `/compact` command summarizes the conversation so far into a condensed form, freeing up space for more work. Run it proactively. Do not wait until you see degraded responses. A good rule of thumb: `/compact` after every major task completion within a session. If you just finished building a component and are about to start on something unrelated, compact first. You can also pass a focus hint: `/compact focus on the authentication changes` to tell Claude which parts of the conversation are most important to preserve. ### 10. Use /btw for Side Queries Mid-task, you sometimes need a quick answer that has nothing to do with what Claude is working on. The `/btw` command lets you ask a side question without polluting the main conversation thread. ``` /btw What's the syntax for a Zod discriminated union again? ``` You get a fast answer, the main context stays clean, and Claude resumes the primary task without confusion. This prevents the common problem of mixing unrelated thoughts into a session, which degrades output quality over time. ### 11. Set Up Hooks for Automated Workflows Hooks let you run shell commands at specific points in Claude Code's lifecycle. Define them in `.claude/settings.json` or your project settings. Claude Code provides eight hook events: 1. **SessionStart** - fires when a new session begins 2. **UserPromptSubmit** - fires when you submit a prompt, before processing 3. **PreToolUse** - fires before Claude executes any tool 4. **PostToolUse** - fires after successful tool completion 5. **Notification** - fires when Claude sends a notification 6. **Stop** - fires when Claude finishes responding 7. **SubagentStop** - fires when a sub-agent completes 8. **PreCompact** - fires before context compaction ```json { "hooks": { "PostToolUse": [{ "matcher": "Edit|Write", "hooks": [{ "type": "command", "command": "prettier --write \"$CLAUDE_FILE_PATHS\"" }] }] } } ``` Hooks have access to environment variables like `CLAUDE_PROJECT_DIR`, `CLAUDE_FILE_PATHS`, and `CLAUDE_TOOL_INPUT`. They can also return structured JSON to control whether Claude should continue, inject feedback, or modify behavior. ### 12. Block Dangerous Commands with PreToolUse Hooks The `PreToolUse` hook is a security gate. Use it to intercept and block dangerous operations before they execute. ```json { "hooks": { "PreToolUse": [{ "matcher": "Bash", "hooks": [{ "type": "command", "command": "if [[ \"$CLAUDE_TOOL_INPUT\" == *\"rm -rf\"* ]]; then echo 'Dangerous command blocked!' && exit 2; fi" }] }] } } ``` Exit code 2 tells Claude the operation was blocked. You can build progressively stricter guardrails: block force pushes, prevent writes to production config files, or require confirmation before database mutations. This is especially important for headless and automated workflows where no human is watching. ### 13. Auto-Format with PostToolUse Hooks After Claude edits a file, you probably want it formatted. The `PostToolUse` hook with a matcher on `Edit|Write` triggers automatically after every file modification. ```json { "hooks": { "PostToolUse": [{ "matcher": "Edit|Write", "hooks": [{ "type": "command", "command": "if [[ \"$CLAUDE_FILE_PATHS\" =~ \\.(ts|tsx)$ ]]; then prettier --write \"$CLAUDE_FILE_PATHS\"; fi" }] }] } } ``` This closes the gap between "AI wrote some code" and "AI wrote code that meets my quality bar." You can chain formatters, linters, and type checkers. Automate the verification loop and you never ship unchecked output. ### 14. Desktop Notifications with the Notification Hook When Claude needs your attention - a permission request, a question, or a completed task - the Notification hook can alert you even if you have switched to another window. ```json { "hooks": { "Notification": [{ "hooks": [{ "type": "command", "command": "osascript -e 'display notification \"Claude needs attention\" with title \"Claude Code\"'" }] }] } } ``` On Linux, swap `osascript` for `notify-send`. This is essential for long-running autonomous tasks where you start Claude working and switch to something else. ### 15. Use the SessionStart Hook for Context Loading The `SessionStart` hook runs when you begin a new session. Use it to pre-load context that Claude will need. ```json { "hooks": { "SessionStart": [{ "hooks": [{ "type": "command", "command": "git status > /tmp/claude-git-context.txt && echo 'Development context loaded'" }] }] } } ``` Populate a temp file with git status, recent commits, open PRs, or CI results. Claude picks up the context automatically. Every session starts from a higher baseline without you repeating the same questions. ## Advanced Patterns ### 16. Worktrees for Isolated Experiments [Git worktrees](/blog/claude-code-worktrees) let you run multiple Claude Code sessions on the same repo without conflicts. Each session gets its own branch and its own working directory. ```bash # Terminal 1 claude > Build a pricing page with monthly/annual toggle # Terminal 2 (same repo) claude > Build a pricing page with a slider-based UI ``` Claude Code automatically creates worktree branches. You end up with two independent implementations you can compare side by side. Merge the one you prefer, delete the other. This pattern is powerful for A/B testing approaches. Not sure whether to use a modal or a slide-over panel? Spawn two agents, get both built, and pick the winner. ### 17. Copy Gitignored Files to Worktrees Worktrees share the git repo but not gitignored files like `.env`, `node_modules`, or build artifacts. If your sub-agents need these, use a hook or script to copy them into new worktrees. Add a `PostToolUse` hook that detects worktree creation and copies essential files: ```bash # Copy .env and install dependencies in new worktrees cp .env ../my-project-worktree/.env cd ../my-project-worktree && npm install ``` Without this, agents in worktrees fail on their first command because environment variables or dependencies are missing. ### 18. Interview Mode for Guided Development Stop telling Claude what to build. Let it [ask you questions first](/blog/claude-code-interview-mode). ``` I want to add authentication to this app. Before writing any code, interview me about my requirements using the Ask User Question tool. Ask at least 10 questions about technical decisions, UX concerns, and trade-offs. Then write a spec. ``` Claude will ask about your auth provider preference, session strategy, role-based access needs, password requirements, and dozens of other decisions you would have glossed over. The resulting spec becomes a contract that Claude executes against. This front-loads decision-making when it is cheap. Rewriting code after 500 lines of implementation is expensive. Answering ten questions upfront is free. ### 19. Chain Agents with SendMessage When sub-agents need to communicate, the `SendMessage` tool passes structured data between them. Agent A finishes research and sends its findings to Agent B, which uses them to generate code. This turns sequential workflows into pipelines. Research feeds into implementation. Implementation feeds into testing. Testing feeds back into refinement. Each stage is handled by a specialist agent with the right context and tools. The key is structuring the handoff. Have Agent A output a well-defined format - a JSON object, a markdown spec, a list of requirements - that Agent B knows how to consume. Loose handoffs produce loose results. ### 20. Use Plan Mode for Complex Tasks Before Claude writes a single line of code, you can ask it to plan. Shift+Tab toggles plan mode in the interactive session. Claude outputs a structured plan - files to create, changes to make, tests to write - without executing anything. Review the plan. Adjust it. Then let Claude execute. This prevents the common failure mode where Claude charges ahead, builds something wrong, and then has to undo half the work. Plan mode is especially valuable for: - Large refactors touching many files - New feature implementations with unclear scope - Migrations between frameworks or libraries - Any change where the cost of getting it wrong is high You can also start a session in plan mode from the command line: `claude --permission-mode plan`. Or run a headless plan-only query: `claude --permission-mode plan -p "Analyze the auth system and suggest improvements"`. ### 21. Edit Plans with Ctrl+G After Claude generates a plan in Plan Mode, press `Ctrl+G` to open it in your default text editor. Edit the plan directly - remove steps you do not want, add constraints, reorder priorities - then save and close. Claude proceeds with your modified plan. This gives you surgical control over what gets built without having to re-prompt. Faster than explaining changes in natural language. ### 22. Configure Plan Mode as Default If you prefer Claude to always plan before acting, set it as the default in your project settings. ```json // .claude/settings.json { "permissions": { "defaultMode": "plan" } } ``` Every session starts in plan mode. Claude analyzes and proposes before writing code. You explicitly approve before any file gets touched. Teams that value code review and controlled changes benefit from this approach. ### 23. Custom Agents with Markdown Files Skills are reusable capability definitions stored as markdown. They live in `.claude/agents/` and define specialized AI agents with constrained tools and focused system prompts. A well-built agent includes: - A description of when to use it - Tool restrictions (read-only, no bash, specific MCP servers only) - A system prompt governing behavior - Isolation settings (worktree, container) ```markdown --- description: Reviews code for bugs, security issues, and style violations tools: [Read, Grep, Glob] isolation: none --- You are a code reviewer. Analyze the provided code for: 1. Security vulnerabilities (injection, XSS, CSRF) 2. Performance issues (N+1 queries, unnecessary re-renders) 3. Type safety problems 4. Missing error handling Never modify files. Only report findings with severity levels. ``` Use the `/agents` command to view and create agents interactively. Agents can [self-improve](/blog/self-improving-skills-claude-code) by reflecting on sessions and updating their own instructions over time. ### 24. Use /batch for Large-Scale Changes When you need the same type of change applied across many files - like a migration, a rename, or adding error handling everywhere - `/batch` is the command. Claude interviews you about the change, then fans out the work to as many worktree agents as needed. ``` /batch Add proper error boundaries to every page component in app/ ``` Claude creates a plan, spins up parallel agents in isolated worktrees, and each agent handles a subset of files. For large migrations or repetitive codebase-wide changes, this turns hours of work into minutes. ### 25. Session Forking with /branch Sometimes Claude is going in a useful direction, but you also want to explore an alternative path without losing your current context. ``` /branch ``` This forks your current session. You get two independent threads - the original continues where it was, and the fork starts from the same point. Test a risky approach in the fork. If it works, keep it. If not, go back to the original. From the command line, you can also fork when resuming: `claude --resume --fork`. ## Integration ### 26. Connect MCP Servers The [Model Context Protocol](/blog/what-is-mcp) lets Claude Code talk to external tools and services through a standardized interface. Database browsers, API clients, cloud dashboards, design tools - anything with an MCP server becomes accessible from your terminal. Use the [MCP Config Generator](/mcp-config) to build your configuration file, then drop it into `.claude/mcp.json`: ```json { "mcpServers": { "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres"], "env": { "DATABASE_URL": "postgresql://localhost:5432/mydb" } } } } ``` Now Claude can query your database directly. Ask it to inspect schema, run queries, or debug data issues without leaving your terminal session. See the full [MCP server guide](/blog/how-to-use-mcp-servers) for setup patterns across different services. ### 27. Add MCP Servers from the Command Line You do not need to edit JSON files by hand. The `claude mcp add` command registers servers directly. ```bash claude mcp add github -- npx @modelcontextprotocol/server-github claude mcp add postgres -- npx @modelcontextprotocol/server-postgres claude mcp add filesystem -- npx @modelcontextprotocol/server-filesystem ``` Each server becomes immediately available in your next session. Claude can create PRs, query databases, and perform enhanced file operations through these integrations. ### 28. Browser Automation with Chrome MCP The Chrome MCP server gives Claude Code eyes. It can navigate pages, read content, fill forms, take screenshots, and interact with web UIs directly from your terminal session. ``` Navigate to localhost:3000 and take a screenshot. Check if the pricing page renders correctly on mobile. ``` This is invaluable for frontend development. Claude builds a component, then visually verifies it looks right. No more switching between terminal and browser to check output. The [Chrome automation guide](/blog/claude-code-chrome-automation) covers the full setup. ### 29. Verification Workflows for Frontend The single most important tip for using Claude Code on frontend work: give Claude a way to verify its own output. Without visual verification, Claude is guessing whether a component looks correct. The Chrome MCP extension is the most reliable option. Claude writes CSS, takes a screenshot, sees the result, and iterates. The loop is: code, screenshot, evaluate, fix. Without it, the loop is: code, hope, discover the bug later. The Claude desktop app can also start web servers and test them in a built-in browser. For web work, this means you write code, launch the app, let Claude inspect the result, and iterate until things look right. ### 30. Linear and GitHub Issue Integration MCP servers for Linear and GitHub let Claude Code read issues, create tickets, update status, and link PRs - all from your coding session. ``` Read the open issues in Linear. Pick the highest priority bug. Fix it. Create a PR. Update the Linear issue status to "In Review." ``` This collapses the context switch between project management and implementation. You stop tab-switching between your issue tracker and your editor. Claude reads the requirements, implements the fix, and updates the tracker in one flow. ### 31. Resume Sessions from PRs When you create a PR using `gh pr create`, the session is automatically linked to that PR. Resume it later with: ```bash claude --from-pr 123 ``` This is powerful for code review workflows. Reviewer leaves comments on the PR, you resume the session that created it, and Claude has full context of what was built and why. No need to re-explain the feature. ### 32. VS Code Integration Claude Code runs in any terminal, including VS Code's integrated terminal. But dedicated extensions exist that add deeper integration: inline diff views, context sharing with open files, and keyboard shortcuts that bridge the IDE and the agent. The practical setup: open VS Code's terminal, run `claude`, and work. VS Code provides the file tree and editor. Claude Code provides the agent. You get the best of both worlds without committing to a fully AI-native IDE. For teams evaluating [Claude Code vs Cursor](/blog/claude-code-vs-cursor-2026), the VS Code integration is the middle ground. You keep your existing editor setup and add Claude Code's agent capabilities on top. ### 33. Work with Images Claude Code can analyze images directly. Drag and drop an image into the terminal, paste with `Ctrl+V`, or reference a file path. ``` Analyze this image: /path/to/screenshot.png What UI elements are in this design? Generate CSS to match this mockup: @designs/header.png ``` Use this for design-to-code workflows. Drop in a Figma export, ask Claude to implement it, then use the Chrome MCP to screenshot the result and compare. The image-to-code-to-verification loop is one of the most productive patterns for frontend work. When Claude references images in its responses (like `[Image #1]`), `Cmd+Click` (Mac) or `Ctrl+Click` (Windows/Linux) opens them in your default viewer. ### 34. Pipe In, Pipe Out Claude Code works as a Unix-style utility. Pipe data in, get results out. ```bash # Analyze a log file cat server.log | claude -p "Find the root cause of the 500 errors" # Generate types from an API response curl -s api.example.com/users | claude -p "Generate TypeScript types for this JSON" # Code review from git diff git diff main | claude -p "Review these changes for bugs and security issues" ``` This composability is what makes Claude Code infrastructure rather than just a tool. Chain it with any Unix utility. Feed it structured data. Route its output to files, other commands, or APIs. ## Session Management ### 35. Name Your Sessions Give sessions descriptive names so you can find them later. This is critical when juggling multiple features or tasks. ```bash # Name at startup claude -n auth-refactor # Rename during a session /rename auth-refactor ``` Named sessions show up clearly in the session picker. When you have ten open sessions across three projects, names are the difference between finding what you need in seconds and opening each one to check. ### 36. Resume Previous Conversations Three ways to continue where you left off: ```bash # Continue the most recent session in the current directory claude --continue # Open the session picker or resume by name claude --resume claude --resume auth-refactor # Resume from inside an active session /resume ``` Sessions are stored per project directory. The `/resume` picker shows sessions from the same git repository, including worktrees. ### 37. Navigate the Session Picker The `/resume` command opens an interactive session picker with keyboard shortcuts: | Shortcut | Action | |----------|--------| | Up/Down | Navigate between sessions | | Right/Left | Expand or collapse grouped sessions | | Enter | Select and resume | | P | Preview session content | | R | Rename the session | | / | Search and filter | | A | Toggle current directory vs. all projects | | B | Filter to current git branch | The preview feature (P) is especially useful. See what a session was about without opening it. ### 38. Teleport Sessions Between Devices Started a Claude Code session on your laptop but need to continue on your phone? The `/teleport` command moves sessions between devices. ``` /teleport ``` This generates a link you can open on the Claude mobile app (iOS or Android), the web interface, or another terminal. You pick up exactly where you left off - full context, full history. ### 39. Remote Control a Local Session The `/remote-control` command lets you control a locally running Claude Code session from your phone or a web browser. ``` /remote-control ``` This is different from teleport. The session stays running on your machine, but you interact with it remotely. Start a long task on your desktop, walk away, and monitor or steer it from your phone. The session uses your local machine's tools, file system, and MCP servers. ## Performance ### 40. Adjust Effort Level Not every prompt needs maximum reasoning. The effort level controls how deeply Claude thinks before responding. ``` /effort ``` On Opus 4.6 and Sonnet 4.6, this uses adaptive reasoning - the model dynamically allocates thinking tokens based on your setting. Lower effort for quick questions and mechanical changes. Higher effort for architecture decisions and complex debugging. You can also set it via environment variable: `CLAUDE_CODE_EFFORT_LEVEL`. ### 41. Use "ultrathink" for Deep Reasoning For one-off tasks that need maximum reasoning depth without permanently changing your effort setting, include "ultrathink" anywhere in your prompt. ``` ultrathink - Design a migration strategy for moving from REST to GraphQL across our entire API surface. Consider backward compatibility, client migration paths, and performance implications. ``` This sets effort to high for that single turn. Architecture decisions, complex debugging sessions, and multi-step planning benefit from the extra reasoning. Regular coding tasks do not need it. ### 42. Toggle Extended Thinking Extended thinking is enabled by default. Toggle it with `Option+T` (macOS) or `Alt+T` (Windows/Linux). When thinking is enabled, Claude reasons through problems step-by-step before responding. Press `Ctrl+O` to toggle verbose mode and see the thinking process displayed as gray italic text. For maximum control, set `MAX_THINKING_TOKENS` as an environment variable to cap the thinking budget. On Opus 4.6 and Sonnet 4.6, only `0` (disable) applies unless adaptive reasoning is also disabled. ### 43. Use Haiku for Simple Tasks Not every task needs the full Opus or Sonnet model. Claude Code's `--model` flag lets you switch to faster, cheaper models for routine work. ```bash claude --model haiku -p "Rename all instances of userId to accountId in src/" ``` Haiku is faster and costs less. Use it for mechanical changes: renaming, formatting, simple refactors, boilerplate generation. Save the heavy models for architecture decisions, complex debugging, and nuanced code review. Sub-agents can also be configured to use Haiku by default. Your research agent might need Opus for nuanced analysis, but your formatting agent works fine on Haiku. ### 44. Batch Operations with Parallel Agents When you have a list of independent tasks, do not run them sequentially. Spawn parallel agents. ``` I need to: 1. Add error boundaries to all page components 2. Write unit tests for the auth module 3. Update the API documentation 4. Fix the responsive layout on the dashboard Spawn four sub-agents and handle these in parallel. ``` Four agents, four tasks, one-quarter the wall-clock time. Each agent works independently, so there is no bottleneck. This is the single biggest productivity multiplier in Claude Code. The pattern scales. Ten independent tasks? Ten agents. The limit is your token budget, not your patience. ### 45. Cache Expensive Operations in CLAUDE.md If Claude spends tokens re-discovering your architecture every session, you are burning money. Put the answers in `CLAUDE.md`. ```markdown ## Architecture Notes - Auth: Clerk (middleware in src/middleware.ts) - Database: Convex (schema in convex/schema.ts) - API routes: None. We use server actions exclusively. - State: React Server Components + Convex reactive queries - Deployment: Vercel (auto-deploy on push to main) ``` Every fact in `CLAUDE.md` is a fact Claude does not need to rediscover by reading files. This reduces token usage, speeds up responses, and improves accuracy. Think of it as a cache for your agent's understanding of your codebase. Update it regularly. When you make architectural decisions during a session, add them to `CLAUDE.md` before ending. Future sessions start from a higher baseline. ### 46. Use --bare for Faster Scripted Runs By default, Claude Code loads local `.claude` files, settings, and MCP servers on startup. For non-interactive, scripted usage where you control the context explicitly, the `--bare` flag skips that automatic loading. ```bash claude --bare -p "Format this JSON: $(cat data.json)" ``` This reduces startup overhead significantly. If you are running dozens of programmatic Claude invocations in a script or CI pipeline, `--bare` makes each one faster. ### 47. Use --add-dir for Multi-Repo Work Real projects often span multiple repositories. The `--add-dir` flag lets Claude see and access more than one directory. ```bash claude --add-dir ../shared-lib --add-dir ../api-service ``` Now one Claude session understands your monorepo, shared library, and API service simultaneously. No more context-switching between sessions or manually copying code snippets between repos. ### 48. Manage Token Usage with /cost The `/cost` command shows your current session's token usage - input tokens, output tokens, and estimated cost. Run it periodically to stay aware of consumption. ``` > /cost Input: 45,231 tokens Output: 12,847 tokens Total: 58,078 tokens ``` If you see token counts climbing fast, it usually means Claude is re-reading large files repeatedly. That is a signal to `/compact` or to add key information to your `CLAUDE.md` so Claude does not need to grep through your codebase for context it already found. ## Automation and Scheduling ### 49. Automate Recurring Tasks with /loop The `/loop` command runs a prompt or slash command on a recurring interval. Set it and let Claude handle repetitive work. ``` /loop 30m Check for new PR review comments and address them ``` Use this for babysitting pull requests, rebasing branches, collecting feedback, sweeping missed review comments, and pruning stale PRs. This is where Claude Code stops feeling like a chat tool and starts feeling like an automated co-worker. The key insight: combine skills with loops. Turn a repeatable workflow into a skill, then loop it. Instead of manually checking the same thing every 30 minutes, Claude keeps doing it. ### 50. Schedule Agents with /schedule While `/loop` runs within a session, `/schedule` creates persistent agents that run on a cron schedule - even when you are not using Claude Code. ``` /schedule "0 9 * * *" "Check for failing CI runs and outdated dependencies. Post a summary to Slack." ``` Daily briefings, weekly code audits, nightly test runs - anything that should happen on a schedule without your involvement. Scheduled agents inherit your MCP servers and configuration, so they have full access to your tools. ### 51. Morning Briefing Automation Combine headless mode with cron jobs to build a daily development briefing. ```bash #!/bin/bash # morning-briefing.sh claude -p " Check the git log for yesterday's commits. List any open PRs that need review. Check for failing CI runs. Summarize what needs attention today. " --output ~/briefings/$(date +%Y-%m-%d).md ``` Schedule this with cron or launchd and you start every morning with a status report generated by Claude Code. It reads your repo state, checks CI, and surfaces what matters - before you open a single browser tab. ### 52. Content Pipeline with Scripts Claude Code's headless mode makes it a building block for content pipelines. Chain multiple invocations to produce structured output. ```bash #!/bin/bash # Generate a blog post from a topic TOPIC="$1" # Step 1: Research claude -p "Research the topic: $TOPIC. Output key points as bullet list." \ --output /tmp/research.md # Step 2: Draft claude -p "Using the research in /tmp/research.md, write a blog post. \ Follow the style guide in CLAUDE.md." \ --output /tmp/draft.md # Step 3: Review claude -p "Review /tmp/draft.md for technical accuracy, tone, and SEO. \ Output the final version." \ --output "content/blog/${TOPIC}.md" ``` Each step is a focused invocation with clear input and output. The pipeline is version-controlled, repeatable, and improvable. ### 53. Add Claude to Your CI Pipeline Use Claude Code as a verification step in CI. Run it in plan mode to analyze PRs without making changes. ```yaml # .github/workflows/claude-review.yml - name: Claude Code Review run: | git diff origin/main...HEAD | claude --bare --permission-mode plan \ -p "Review this diff for bugs, security issues, and style violations. \ Output a markdown report." --output review.md ``` This gives every PR an automated AI code review. Claude runs in plan mode (read-only), analyzes the diff, and outputs findings. No risk of unintended changes in CI. ## Keyboard Shortcuts and UI ### 54. Essential Keyboard Shortcuts These shortcuts work in the interactive Claude Code terminal: | Shortcut | Action | |----------|--------| | Shift+Tab | Cycle permission modes (Normal, Auto-Accept, Plan) | | Ctrl+O | Toggle verbose mode (see thinking process) | | Option+T / Alt+T | Toggle extended thinking | | Ctrl+G | Open plan in text editor | | Ctrl+V | Paste an image | | Cmd+Click / Ctrl+Click | Open referenced images | | Ctrl+C | Cancel current operation | | Up arrow | Previous command from history | Learn these. They are faster than typing commands and they keep you in flow. ### 55. Use Voice for Hands-Free Coding The `/voice` command lets you speak to Claude Code instead of typing. This sounds like a novelty, but power users report it changes their workflow fundamentally. ``` /voice ``` Describe architecture decisions while pacing. Dictate bug reports while looking at the screen. Explain complex requirements without the friction of typing. Claude processes spoken instructions the same as typed ones. Combine voice with remote control: start Claude on your desktop, control it from your phone via `/remote-control`, and speak your instructions. Full coding workflow without touching a keyboard. --- ## Start Compounding These 55 tips share a common thread: compounding returns. A `CLAUDE.md` file saves you five minutes every session. Multiplied by hundreds of sessions, that is days recovered. Sub-agents cut task time by 3-4x. Skills that self-improve get better every week. Hooks eliminate entire categories of errors permanently. The power users are not the ones who write the cleverest prompts. They are the ones who invest in configuration, automation, and tooling that pays dividends across every future session. Pick three tips from this list. Implement them today. Build from there. ## Frequently Asked Questions ### What is CLAUDE.md and why do I need one? CLAUDE.md is a markdown file in your project root that Claude Code reads automatically at session start. It tells Claude your stack, coding conventions, and hard rules so every prompt starts with the right context. Without one, you repeat the same instructions every session. ### How much does Claude Code cost? Claude Code is available on the Pro plan at $20/month with limited usage, the Max 5x plan at $100/month, and the Max 20x plan at $200/month for heavy autonomous usage. Some advanced features like extended sub-agent sessions require the Max tiers. ### Can Claude Code run without supervision? Yes. Using the `-p` flag (headless mode), Claude Code runs non-interactively and can be integrated into CI pipelines, cron jobs, and automation scripts. Combined with `/loop`, `/schedule`, and sub-agents, it can handle recurring tasks autonomously. ### What are Claude Code sub-agents? Sub-agents are specialized Claude instances that run in parallel on different parts of a task. You can spawn a frontend agent, a backend agent, and a research agent simultaneously, each with its own tools and context, to complete work faster than a single sequential session. ### Does Claude Code work with VS Code or other editors? Claude Code is terminal-native and does not require an IDE. It reads and writes files directly on disk. You can run it alongside any editor, including VS Code, Cursor, or Neovim. Many developers pair it with Cursor for the best of both worlds. ### What is the difference between /loop and /schedule? `/loop` runs within your current session on an interval - it requires Claude Code to be running. `/schedule` creates persistent cron-based agents that run independently, even when Claude Code is closed. Use `/loop` for in-session monitoring and `/schedule` for automated recurring tasks. ### How do I use Claude Code on mobile? Claude Code works on the Claude mobile app (iOS and Android). You can start sessions on mobile, or use `/teleport` to move a desktop session to your phone. The `/remote-control` command lets you steer a desktop session from mobile while keeping all local tools and MCP servers active. For more on Claude Code, check out the [complete guide](/blog/what-is-claude-code), the [sub-agents deep dive](/blog/claude-code-sub-agents), and the [tools directory](/tools/claude-code). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Claude Code AI Tools Productivity <![CDATA[Claude Code vs Cursor in 2026: Which Should You Use?]]> https://www.developersdigest.tech/blog/claude-code-vs-cursor-2026 https://www.developersdigest.tech/blog/claude-code-vs-cursor-2026 instead of raw T, and errors are typed as ApiError instead of Error. Update all imports, function calls, error handlers, and tests. Run tsc after each batch of changes to verify." ``` It reads every file, builds a plan, applies changes, runs `tsc` to catch type errors, fixes what breaks, and keeps going. You come back to a green build. No babysitting. This pattern scales. Rename a database column and update every query, resolver, and test that touches it. Swap out a logging library. Upgrade a major dependency. Claude Code handles the full loop: edit, check, fix, repeat. ### CI and Build Pipelines Claude Code runs where your code runs. Terminal. SSH. CI containers. That matters. ```bash # In a GitHub Action claude -p "The build is failing. Read the error log at /tmp/build.log, identify the issue, fix it, and push a commit." ``` This is not a theoretical workflow. You can wire Claude Code into a CI step that self-heals failing builds. It reads logs, understands the error, edits the source, and pushes. Cursor cannot do this because it requires a desktop GUI. ### Multi-Step Automation Claude Code chains operations naturally. A single prompt can: 1. Scaffold a new API route with proper TypeScript types 2. Generate Zod validation schemas from those types 3. Write integration tests 4. Run the tests 5. Fix any failures 6. Commit the result ``` claude -p "Add a POST /api/projects endpoint. Use the existing patterns from /api/users for structure. Zod validation on the request body. Write tests using the existing test helpers in __tests__/. Run vitest to verify. Fix any failures." ``` Each step informs the next. The agent sees test output, reads error messages, and adapts. This kind of sequential reasoning with tool use is where Claude Code's architecture pays off. ### Headless and Scripted Workflows Claude Code is a CLI tool. That means you can script it, pipe into it, schedule it, and compose it with other tools. ```bash # Review every PR in a repo gh pr list --json number,title | \ jq -r '.[].number' | \ xargs -I {} claude -p "Review PR #{} in this repo. Focus on type safety and error handling." ``` ```bash # Generate types from an OpenAPI spec, then build a client curl -s https://api.example.com/openapi.json | \ claude -p "Generate TypeScript types from this OpenAPI spec. Then build a type-safe client wrapper using fetch. Put types in src/api/types.ts and client in src/api/client.ts." ``` Cursor has no equivalent. It is an interactive desktop application. Another IDE-based tool worth considering is [Windsurf](/blog/windsurf-vs-cursor), which takes a flow-based approach to multi-step tasks. ## Where Cursor Wins ### Visual Editing and Inline Suggestions When you are writing new TypeScript code from scratch, Cursor's inline completions are hard to beat. You type a function signature, and it fills in the implementation. You start a type definition, and it predicts the shape. ```typescript // You type this: interface ProjectConfig { name: string; // Cursor autocompletes the rest based on your codebase context ``` The tab-complete flow keeps you in the editor. You see the suggestion, hit Tab, keep typing. The latency is low enough that it feels like pair programming rather than prompt engineering. Claude Code does not do inline completions. It operates at the prompt level, not the keystroke level. ### Reviewing Diffs Visually Cursor shows you exactly what changed with a visual diff. Green lines added, red lines removed. You click Accept or Reject on each hunk. For careful, line-by-line review of AI-generated code, this is faster than reading a `git diff` in the terminal. When Composer edits five files, you see all five diffs side by side. You can reject one change, accept the rest, and re-prompt. The feedback loop is tight and visual. Claude Code applies changes directly to files. You can review with `git diff` after the fact, but there is no interactive accept/reject step during generation. ### Onboarding and Exploration If you are new to a codebase, Cursor's chat panel is genuinely useful. Highlight a function, ask "what does this do," get an explanation with context from the surrounding files. Click through to related code. Ask follow-up questions. ``` // Highlight a complex TypeScript generic: type InferRouteParams = T extends `${string}:${infer Param}/${infer Rest}` ? { [K in Param]: string } & InferRouteParams : T extends `${string}:${infer Param}` ? { [K in Param]: string } : {}; // Right-click → "Explain this code" // Cursor walks through the recursive conditional type step by step ``` You could do this in Claude Code by pasting the code into a prompt. But the friction is higher. Cursor's integration with the editor makes exploratory questions feel natural. ### Rapid Prototyping with Immediate Feedback For the "build a quick component and see it" loop, Cursor's Composer plus a running dev server is fast. You describe what you want, Composer writes it, the dev server hot-reloads, you see the result. Tweak the prompt, iterate. Claude Code can do this too, but you are switching between terminal and browser rather than seeing everything in one window. ## The Hybrid Approach Most productive TypeScript developers in 2026 use both. **Claude Code for:** - Large refactors across many files - CI/CD automation and self-healing builds - Scripted, repeatable workflows - Tasks you want to run unattended - Anything that benefits from terminal composability **Cursor for:** - Writing new code with inline completions - Visual diff review - Exploring unfamiliar codebases - Quick UI iteration with hot reload - Pair-programming style sessions The tools are not competing for the same slot. Claude Code is an autonomous agent. Cursor is an augmented editor. One runs without you. The other runs with you. ## Cost Claude Code Max is $200/month. Cursor Pro is $20/month. Both have usage-based pricing beyond their base tiers. If you are building production TypeScript applications, both pay for themselves in the first week. The time savings on a single multi-file refactor covers the annual cost of Cursor. A single CI automation that catches and fixes a build failure at 2 AM justifies Claude Code. Running both costs $220/month. That is less than one hour of senior developer time in most markets. ## The Decision Framework Pick Claude Code if your work is mostly: - Backend TypeScript (APIs, services, infrastructure) - Maintaining and refactoring large codebases - Automation-heavy workflows - Team environments with CI/CD pipelines Pick Cursor if your work is mostly: - Frontend TypeScript (React, Next.js components) - Greenfield development - Visual, component-driven iteration - Exploring codebases you did not write Pick both if you ship full-stack TypeScript and want the fastest workflow available. For a wider view of the landscape, including Codex, Gemini CLI, and Windsurf, see our [best AI coding tools in 2026](/blog/best-ai-coding-tools-2026) roundup. ## Frequently Asked Questions ### Is Claude Code better than Cursor for coding? Neither is universally better. Claude Code excels at autonomous multi-file tasks, refactoring, and backend work from the terminal. Cursor excels at visual editing, UI iteration, and interactive refinement in an IDE. Most productive developers use both. ### Can I use Claude Code and Cursor together? Yes, and this is the recommended setup for full-stack TypeScript. Use Claude Code for autonomous tasks, large refactors, and CI automation. Use Cursor for visual UI work, quick edits, and exploring unfamiliar codebases. They do not conflict. ### How much do Claude Code and Cursor cost together? Claude Code Max runs $200/month and Cursor Pro runs $20/month, totaling $220/month. That is less than one hour of senior developer time in most markets. Both tools pay for themselves within the first week of use on production projects. ### Does Cursor use Claude models? Cursor gives you access to multiple AI models including Claude and GPT variants through its Pro plan. The specific models available change as Cursor updates its partnerships. Claude Code exclusively uses Anthropic's Claude models. Try them side by side. The [Developers Digest Arena](https://demos.developersdigest.tech/arena) lets you compare AI coding tools head to head with real tasks. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Claude Code Cursor AI Coding TypeScript <![CDATA[Claude vs GPT for Coding: Which Model Writes Better TypeScript?]]> https://www.developersdigest.tech/blog/claude-vs-gpt-coding https://www.developersdigest.tech/blog/claude-vs-gpt-coding = { success: true; data: T } | { success: false; error: string }; function processResult(result: Result): T { if (!result.success) { throw new Error(result.error); } return result.data; } // GPT tends to write this (also correct, different style): function processResult(result: Result): T { if (result.success) return result.data; throw new Error(result.error); } ``` Both approaches are valid. Claude leans toward explicit exhaustiveness. GPT leans toward brevity. ## Pricing | Plan | Price | What you get | |------|-------|-------------| | Claude Max | $200/mo | Opus 4.6 in Claude Code, high rate limits | | Claude Pro | $20/mo | Sonnet, limited Opus access | | GPT Plus | $20/mo | GPT-5.3 in ChatGPT | | Codex | Usage-based | GPT-5.3 via CLI | | Claude API | $15 / $75 per 1M tokens (in/out) | Pay per use | | GPT API | $10 / $40 per 1M tokens (in/out) | Pay per use | GPT is cheaper on the API. Claude Max is the premium option but includes unlimited Claude Code usage, which is hard to beat if you use a terminal agent as your primary coding tool. At the $20/mo tier, GPT Plus offers better value since you get the full GPT-5.3 model, while Claude Pro is limited to Sonnet for most interactions. ## When Claude wins - **Deep refactoring** across many files with complex dependencies - **Reasoning-heavy tasks** where correctness matters more than speed - **Long-running autonomous work** via Claude Code's sub-agent architecture - **Codebase-aware edits** where understanding project conventions is critical - **Type-heavy TypeScript** with advanced generics, conditional types, and inference If you are building production systems and need the model to reason about architecture, Claude is the better choice. ## When GPT wins - **Rapid prototyping** where iteration speed matters most - **Broad knowledge tasks** that reference many third-party libraries - **Large context needs** when you need 200K+ tokens in a single prompt - **Budget-sensitive work** where API costs need to stay low - **General-purpose coding** across many languages and frameworks If you are moving fast, testing ideas, and need the model to keep up with your pace, GPT is the better choice. ## The bottom line Use both. Seriously. Claude Opus 4.6 is the better model for serious TypeScript engineering. It reasons more carefully, produces more correct code on the first pass, and handles complex multi-file tasks with less supervision. If you only pick one model for production codebases, pick Claude. GPT-5.3 is the better model for speed and breadth. It generates faster, costs less on the API, and handles a wider range of tasks without specialized prompting. It is the better choice for prototyping, exploration, and high-volume work. The real power move is using both strategically. Claude for the hard problems, GPT for the fast ones. That is what the best developers are doing right now. ## Frequently Asked Questions ### Is Claude or GPT better for coding? Claude Opus 4.6 is better for serious TypeScript engineering - it reasons more carefully and produces more correct code on complex multi-file tasks. GPT-5.3 is better for speed, rapid prototyping, and tasks requiring broad general knowledge. The best approach is using both strategically. ### Which AI model is best for TypeScript? Claude Opus 4.6 currently leads for TypeScript-heavy work due to its superior reasoning on type inference, generics, and multi-file refactoring. GPT-5.3 is a close second and generates faster. Both outperform open-source alternatives on production TypeScript codebases. ### How much does Claude cost vs GPT for coding? Claude Code Max runs $200/month for heavy usage with Claude Opus 4.6. OpenAI's ChatGPT Pro is also $200/month and includes GPT-5.3 access through Codex. Both offer lower tiers starting at $20/month, though the flagship models require the premium plans. ### Can I use Claude and GPT together? Yes. Many developers use Claude for deep reasoning tasks like architecture decisions and complex refactors, and GPT for fast prototyping, exploration, and high-volume work. Tools like Aider and Cursor support switching between models within the same workflow. **Compare both models side by side on real tasks at [subagent.developersdigest.tech/compare](https://subagent.developersdigest.tech/compare).** ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Claude GPT AI Models TypeScript Comparison <![CDATA[Cursor Composer 2: Everything You Need to Know]]> https://www.developersdigest.tech/blog/cursor-composer-2 https://www.developersdigest.tech/blog/cursor-composer-2 Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Cursor AI Coding Composer IDE <![CDATA[Cursor vs Claude Code in 2026 - Which Should You Use?]]> https://www.developersdigest.tech/blog/cursor-vs-claude-code-2026 https://www.developersdigest.tech/blog/cursor-vs-claude-code-2026 {projects.map((p) => ( ))} ); } ``` For frontend work, especially React and Next.js components, this tight visual feedback loop is where Cursor earns its $20/month in the first hour. ### Tab Completions That Actually Work Cursor predicts what you are about to type. Not just variable names. Full function implementations, type definitions, test assertions. You start writing a function signature, and Cursor fills in the body based on your codebase patterns. ```typescript // You type the signature: async function getUserProjects(userId: string): Promise { // Cursor predicts the full implementation // based on your existing fetch patterns, error handling, and types ``` Claude Code does not do this. It operates at the prompt level, not the keystroke level. If you spend most of your day writing new code line by line, Cursor's inline predictions save real time. ### Reviewing AI-Generated Changes When Composer edits multiple files, you see visual diffs for each one. Green lines added, red lines removed. You accept or reject individual hunks. If one file looks good but another needs work, you keep one and re-prompt the other. This matters when you want to stay in control. You see exactly what the AI changed before anything hits your working tree. Claude Code applies changes directly to files. You can review with `git diff` afterward, but there is no interactive accept/reject step during generation. ### Exploring Unfamiliar Codebases Highlight a function you do not understand. Right-click, ask Cursor to explain it. It pulls context from surrounding files, follows imports, and walks through the logic. The chat panel stays open alongside your editor, so you can ask follow-up questions without switching windows. For onboarding to a new project or understanding someone else's TypeScript generics, this inline exploration is faster than pasting code into a terminal prompt. ### When You Want IDE Features Cursor is a VS Code fork. That means you get debugging, breakpoints, the integrated terminal, Git GUI, and the full VS Code extension ecosystem. If your workflow depends on specific extensions, Cursor gives you AI coding without giving up your editor. ## When Claude Code Is the Right Choice ### Autonomous Multi-File Refactors You need to rename a database column and update every query, resolver, type definition, test, and migration that references it. In Cursor, you would use Composer to handle batches of files, review each set, re-prompt, repeat. You are the bottleneck. In Claude Code, you describe the outcome and walk away. ```bash claude -p "Rename the 'userName' column to 'displayName' in the database schema. Update every query, resolver, type, and test that references it. Run tsc and vitest after changes to verify nothing is broken. Fix any failures." ``` Claude Code reads every relevant file, builds a plan, applies changes across dozens of files, runs the type checker, runs the tests, fixes what breaks, and keeps going until the build is green. You come back to a working codebase. For a deeper look at this workflow, see our guide on [Claude Code sub-agents](/blog/claude-code-sub-agents). ### CI/CD and Headless Workflows Claude Code runs in the terminal. That means it runs everywhere your code runs: SSH sessions, CI containers, cron jobs, GitHub Actions. ```bash # Self-healing CI: fix and push when a build breaks claude -p "The build is failing. Read the error log, identify the issue, fix the source code, and commit the fix." # Automated PR review gh pr list --json number | jq -r '.[].number' | \ xargs -I {} claude -p "Review PR #{} for type safety and error handling." ``` Cursor cannot do this. It requires a desktop GUI. If you want AI-assisted development that works in pipelines, servers, and automation scripts, Claude Code is the only option. ### Persistent Memory Across Sessions Claude Code uses [CLAUDE.md files](/blog/what-is-claude-code) to remember your project context. Architecture decisions, coding standards, deployment procedures, team conventions. You write them once, and every future session starts with that knowledge. ```markdown # CLAUDE.md ## Stack Next.js 16, Convex, Clerk, Tailwind ## Conventions - All API routes use Zod validation - Error responses follow the ApiError type - Tests use vitest with the test helpers in __tests__/utils ``` This compounds over time. After a few weeks of building a project with Claude Code, it knows your patterns cold. Every new feature follows your existing conventions without you having to explain them again. Cursor has Cursor Rules, which serve a similar purpose but are scoped to the IDE session. Claude Code's memory system integrates with the filesystem, making it portable across machines, team members, and CI environments. ### Scripted and Composable Workflows Claude Code is a CLI tool. You pipe into it, script around it, and compose it with other tools. ```bash # Generate types from an API spec and build a client curl -s https://api.example.com/openapi.json | \ claude -p "Generate TypeScript types from this OpenAPI spec. Build a type-safe client wrapper. Put types in src/api/types.ts and the client in src/api/client.ts." # Process multiple tasks in sequence claude -p "Read the TODO comments in src/ and create a GitHub issue for each one." ``` This composability is fundamental to how terminal tools work. Claude Code fits into shell pipelines, Makefiles, and automation scripts. Cursor is an interactive application. It does not compose. ### Long-Running Autonomous Tasks Some tasks take 30 minutes or more. Migrating a codebase from one framework to another. Generating comprehensive test coverage for an untested module. Updating every file to match a new API version. Claude Code handles these without supervision. You start the task, switch to other work (or close your laptop), and check the results later. The agent reads files, makes changes, runs checks, fixes problems, and keeps iterating until the task is complete. For more on this pattern, see [Claude Code autonomous hours](/blog/claude-code-autonomous-hours). Cursor expects you to be present. Composer generates changes, waits for your review, and continues after you accept. For long tasks, that means you are sitting and watching for the entire duration. ## Pricing Breakdown ### Cursor - **Free:** 2 weeks trial - **Pro ($20/month):** 500 fast requests, unlimited slow requests. Best value in AI coding - **Business ($40/month):** Admin controls, team management, centralized billing ### Claude Code - **Pro ($20/month):** Limited usage, good for light work - **Max 5x ($100/month):** Moderate usage, enough for daily development - **Max 20x ($200/month):** Heavy usage, unlimited-feeling for full-time development ### Cost Per Workflow | Workflow | Cursor Cost | Claude Code Cost | |----------|-------------|-----------------| | Light daily use | $20/mo (Pro) | $20/mo (Pro) | | Full-time individual dev | $20/mo (Pro) | $100-200/mo (Max) | | Team of 5 | $100-200/mo | $500-1000/mo | | CI/CD automation | Not possible | $100-200/mo (Max) | At the $20/month tier, both tools are priced identically. The difference shows up at heavy usage. Cursor stays at $20/month for most individual developers. Claude Code scales to $200/month for power users who run it autonomously throughout the day. Running both costs $220/month at the max tiers. That is less than one hour of senior developer time in most markets. ## The Ideal Setup: Use Both The most productive TypeScript developers in 2026 are not choosing one or the other. They use both tools for what each does best. **Start with Claude Code** for the heavy lifting: - Scaffold a new feature across multiple files - Run a complex refactor that touches dozens of files - Set up CI pipelines and automation - Handle tasks you want to run unattended **Switch to Cursor** for the finishing work: - Polish UI components with visual feedback - Write new code with inline tab completions - Review and fine-tune AI-generated changes - Debug with breakpoints and the integrated terminal The handoff is natural. Claude Code generates the bulk of the changes. You open the project in Cursor, review what changed, make visual adjustments, and polish the details. Each tool handles the part of the workflow it was designed for. ### A Real-World Example Building a new dashboard page for a Next.js app: 1. **Claude Code:** "Add a /dashboard page with a sidebar, header, and main content area. Use the existing layout patterns from /settings. Include a stats overview component with placeholder data. Add API routes for fetching dashboard stats with proper Zod validation and error handling. Write tests for the API routes." 2. **Cursor:** Open the generated components. Tweak spacing, colors, and responsive breakpoints using Composer with the dev server running. Add loading states and empty states with visual preview. Fine-tune the sidebar animation. Step 1 takes Claude Code five minutes of autonomous work. Step 2 takes you 20 minutes of interactive iteration in Cursor. The whole feature ships in under 30 minutes. ## Common Objections **"I do not want to pay for two tools."** Start with Cursor Pro at $20/month. Add Claude Code Pro at $20/month when you hit tasks that need autonomy. That is $40/month total, less than a single lunch meeting. If either tool saves you one hour per week, it pays for itself many times over. **"Claude Code is too expensive at $200/month."** The $200/month Max tier is for developers who use Claude Code as their primary tool, running it for hours daily. Most developers get plenty of value from the $20 or $100 tiers. Start low and upgrade when your usage justifies it. **"I already use GitHub Copilot."** Copilot and Cursor overlap significantly on inline completions. Cursor's Composer mode and agent capabilities go further than Copilot's current agent mode. Claude Code is a different category entirely. You could replace Copilot with Cursor and add Claude Code for autonomous work. See our [best AI coding tools](/blog/best-ai-coding-tools-2026) roundup for the full landscape. **"I prefer open-source tools."** Look at [Aider](/blog/aider-vs-claude-code). It is a free, open-source terminal agent that works with any model. It covers some of the same ground as Claude Code, though without sub-agents, MCP, or the persistent memory system. ## Verdict Cursor and Claude Code are not competing for the same job. Cursor is an augmented editor. Claude Code is an autonomous agent. One runs with you. The other runs without you. If you only pick one: - Pick **Cursor** if your work is mostly frontend, component-driven, and visual - Pick **Claude Code** if your work is mostly backend, automation-heavy, and multi-file If you can run both, run both. The combination is faster than either tool alone. ## Frequently Asked Questions ### Should I use Cursor or Claude Code in 2026? Use both if possible. Cursor is the best tool for visual UI editing and rapid frontend iteration. Claude Code is the best tool for autonomous multi-file tasks, backend work, and CI automation. They complement each other rather than compete. ### Can Claude Code replace Cursor completely? Not for most workflows. Claude Code runs in the terminal and has no visual diff interface, making it less ideal for UI work where you need to see changes in real time. Cursor's inline editing and visual feedback loop is faster for component-driven frontend work. Claude Code is stronger for autonomous, multi-step tasks that do not require visual review. ### Is Cursor worth $20/month if I already have Claude Code? Yes, for frontend and visual work. Cursor's Composer mode, inline completions, and visual diffs make UI iteration significantly faster than terminal-based workflows. The $20/month pays for itself within a single day of frontend development. ### What is the best AI coding setup for TypeScript developers? The most productive TypeScript setup in 2026 combines Claude Code Max ($200/month) for autonomous backend work and complex refactors with Cursor Pro ($20/month) for frontend iteration and visual editing. Add a free tier tool like Gemini CLI for overflow tasks. For a side-by-side feature comparison with ratings and scores, check the [Cursor vs Claude Code comparison page](/compare/claude-code-vs-cursor). For more on getting the most out of Claude Code specifically, read [What is Claude Code](/blog/what-is-claude-code). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Claude Code Cursor AI Tools Comparison <![CDATA[Cursor vs Codex: IDE Agent vs Cloud Agent for TypeScript]]> https://www.developersdigest.tech/blog/cursor-vs-codex https://www.developersdigest.tech/blog/cursor-vs-codex { const res = await fetch(url); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res; } // Composer 2 rewrites it inline: async function fetchData(url: string, maxRetries = 3): Promise { for (let attempt = 0; attempt < maxRetries; attempt++) { try { const res = await fetch(url); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res; } catch (err) { if (attempt === maxRetries - 1) throw err; await new Promise((r) => setTimeout(r, 2 ** attempt * 1000)); } } throw new Error("Unreachable"); } ``` You see both versions side by side. Green lines added, red lines removed. No context switching between terminal and editor. This is where Cursor's IDE integration pays off the most. ### Multi-File Composition Composer mode handles multi-file edits well. Describe a feature, and Cursor scaffolds across multiple files at once: ``` "Add a /api/notifications endpoint with Zod validation, a NotificationService class, and integration tests. Follow the patterns from the existing /api/users route." ``` Composer 2 reads your existing patterns, generates the route handler, service layer, types, and tests. You review each file's diff individually. If the service looks good but the tests need work, accept one and re-prompt the other. ### Speed and Iteration Composer 2 is fast. Most completions finish in under 30 seconds. In a prompt-heavy session where you send 20-30 requests, that speed compounds. You stay in flow. The pricing supports heavy iteration too. Composer 2 runs at $0.50/M input and $2.50/M output on the standard tier. You can also swap to Claude Sonnet 4.6 or GPT-5.3 mid-session for tasks that need deeper reasoning, then switch back to Composer 2 for the routine edits. ### Multi-Agent Parallel Work Cursor runs up to eight agents simultaneously using git worktree isolation. Each agent operates on an independent branch. Composer 2 is the cheapest frontier-quality model you can run in those parallel slots. ``` Agent 1: "Refactor the auth middleware to use the new session types" Agent 2: "Add pagination to the projects list endpoint" Agent 3: "Write unit tests for the billing module" ``` All three run concurrently. Each finishes with a branch you can review and merge. Running eight Codex tasks in parallel works too, but the cloud sandbox spin-up adds latency that Cursor avoids by running locally. ## Codex: The Cloud Agent ### Fire-and-Forget Tasks Codex is built for tasks you hand off and walk away from. Open a GitHub issue, tag Codex, and it clones your repo, creates a branch, implements the fix, runs tests, and opens a PR. You come back to a reviewable diff. ```bash # From the CLI codex exec "Fix the type error in src/api/billing.ts where SubscriptionPlan is missing the 'trialDays' field. Update the Zod schema and all tests." ``` Codex spins up a container, reads your `tsconfig.json`, identifies the type error, traces it through the codebase, fixes the schema, updates dependent code, and runs `tsc` and your test suite. The result is a clean PR. This workflow shines for backlogs. If you have 15 well-defined issues in GitHub, you can tag Codex on each one. It works through them asynchronously. You batch-review the PRs when they land. ### Sandbox Isolation Every Codex task runs in an isolated container. The agent has full shell access within that sandbox but cannot touch your local filesystem or running services. This is a security advantage. For TypeScript projects, this means Codex can: - Run `tsc` with your exact compiler settings - Execute `vitest` or `jest` test suites - Install dependencies via npm/pnpm/yarn - Run linters and formatters What it cannot do mid-task: - Hit your local dev server - Query a local database - Access services running on localhost - Make arbitrary network requests The tradeoff is clear. You get safety and reproducibility. You lose the ability to verify changes against a running application. ### GitHub-Native Workflow Codex integrates directly with GitHub issues and pull requests. For teams that manage work through GitHub, this feels natural: 1. Developer opens an issue: "Add rate limiting to POST /api/projects" 2. Codex picks it up, reads the codebase, implements rate limiting 3. PR lands with a summary of what changed and why 4. Team reviews, requests changes in PR comments 5. Codex reads the review comments and pushes fixes This is closer to how you interact with a junior developer than how you interact with a tool. You define the task, review the output, and iterate through comments. ### Handling Large Refactors Codex handles TypeScript refactors well because it can run the full build pipeline in its sandbox: ```bash codex exec "Migrate all API routes from the legacy express-validator to Zod schemas. Update the error handling to return typed error responses matching the ApiError interface. Run tsc and vitest after each file to verify. Do not change any endpoint behavior." ``` The sandbox means this runs without any risk to your local environment. If the agent makes a mess, the container tears down and nothing on your machine changed. The PR is your checkpoint. ## TypeScript-Specific Comparison Both tools handle TypeScript, but they handle it differently. | Capability | Cursor | Codex | |-----------|--------|-------| | Type checking | Runs `tsc` via integrated terminal | Runs `tsc` in sandbox | | Test execution | Local test runner, immediate results | Sandbox test runner, results in PR | | Hot reload verification | Yes, sees dev server output | No, sandbox is network-isolated | | tsconfig awareness | Reads from workspace | Reads from repo clone | | Monorepo support | Full workspace awareness | Navigates project references | | Type inference quality | Composer 2 is concise | GPT-5.3 sometimes over-annotates | | Zod/schema generation | Strong pattern matching | Strong but occasionally verbose | The type inference difference is worth noting. Composer 2 tends to write TypeScript the way an experienced developer would, leaning on inference where it is unambiguous. GPT-5.3 sometimes adds explicit type annotations that are technically correct but unnecessary: ```typescript // Composer 2 output const users = await db.query.users.findMany(); // GPT-5.3 output (same logic, more annotations) const users: Array> = await db.query.users.findMany(); ``` Both work. One is cleaner. This is a minor difference that surfaces mostly in review. ## Pricing | Plan | Monthly Cost | What You Get | |------|-------------|--------------| | Cursor Pro | $20 | Composer 2, model switching, multi-agent, 500 fast requests | | Cursor Ultra | $200 | Unlimited fast requests, priority access | | ChatGPT Pro (Codex) | $200 | Codex CLI, GPT-5.3, generous token allocation | Cursor Pro at $20/month is the cheapest entry point by a wide margin. You get Composer 2 plus the ability to use Claude and GPT models through Cursor's interface. Codex requires a ChatGPT Pro subscription at $200/month, which also includes ChatGPT, the API, and other OpenAI products. If you already pay for Pro, Codex is included. For TypeScript developers shipping production code, both pay for themselves quickly. A single refactor that would take a day of manual work justifies months of either subscription. ## When to Use Each **Use Cursor when:** - You are actively writing and editing code - You want visual diffs and inline suggestions - You need fast iteration with immediate feedback - You are building UI components with hot reload - You want to swap between models mid-session - Cost matters and $20/month fits better than $200/month **Use Codex when:** - You have a backlog of well-defined GitHub issues - You want async task completion while you do other work - You prefer PR-based review over inline diffs - Sandbox isolation matters for security or compliance - Your team already lives in GitHub issues and PRs - You want to hand off contained tasks completely **Use both when:** - You ship full-stack TypeScript and want every advantage - Cursor handles your active development sessions - Codex burns through your issue backlog asynchronously - You review Codex PRs between Cursor editing sessions ## The Bottom Line Cursor is a tool you work with. Codex is a tool you delegate to. Cursor keeps you in the loop at every step with inline diffs and visual feedback. Codex takes the task off your plate entirely and comes back with a PR. Neither replaces the other. The best TypeScript workflow in 2026 uses both: Cursor for the hands-on work where you need speed and control, Codex for the backlog items where you need throughput and isolation. Try them on the same task and compare. The [Developers Digest Arena](https://demos.developersdigest.tech/arena) lets you run AI coding tools head to head on real TypeScript challenges. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Cursor Codex AI Coding TypeScript Comparison <![CDATA[Gemini CLI: Free AI Coding With 1M Token Context]]> https://www.developersdigest.tech/blog/gemini-cli-guide https://www.developersdigest.tech/blog/gemini-cli-guide Refactor the auth module to use the new token format. > Update every file that imports from auth/types.ts. ``` For TypeScript specifically, this matters because the language is inherently cross-referential. Types flow through interfaces, generics propagate across module boundaries, and a change in one type definition can ripple through dozens of files. A model that can see all of those files simultaneously catches issues that a smaller context window misses entirely. ## Free Tier Breakdown The free tier runs on Gemini 2.5 Pro through Google AI Studio. The limits are generous: - **60 requests per minute** - more than enough for interactive coding sessions - **1,000 requests per day** - sufficient for a full workday of development - **1 million token context** - the full model capability, not a reduced version There is no credit card required. No trial period. No degraded model. You get the same Gemini 2.5 Pro that powers Google's paid API, accessed through your personal Google account. For comparison, [Claude Code](/tools/claude-code) on the Max plan runs $200/month. [Cursor](/tools/cursor) Pro is $20/month. Gemini CLI is $0/month with a context window that dwarfs both. ## TypeScript Workflow Gemini CLI picks up your project context automatically. Drop a `GEMINI.md` file in your project root (similar to `CLAUDE.md` for Claude Code) and define your conventions: ```markdown # GEMINI.md This is a Next.js 16 project with TypeScript strict mode. ## Conventions - Use Zod for all runtime validation - Prefer server components, use "use client" only when necessary - All API routes return typed responses using shared types from lib/types.ts - Tests use Vitest with React Testing Library ## Project Structure - app/ - Next.js App Router pages - lib/ - Shared utilities and types - components/ - React components - convex/ - Backend functions and schema ``` With this file in place, every Gemini session starts with your project's rules loaded. The CLI reads it automatically on startup. A typical TypeScript workflow looks like this: ```bash # Start a session in your project cd ~/Developer/my-app gemini # Generate a typed API client from your OpenAPI spec > Generate a fully typed API client from openapi.yaml. > Use Zod schemas for runtime validation. > Export all types from lib/api-types.ts. # Refactor across the codebase > Migrate all useState calls in the dashboard to useReducer. > Keep the same component interfaces. # Debug type errors > Fix all TypeScript errors in the project. > Run tsc --noEmit and resolve each one. ``` The CLI handles file reads, writes, and shell commands. It will run `tsc` to check its own work, fix errors, and iterate until the build passes. ## MCP Support Gemini CLI supports the [Model Context Protocol](/blog/what-is-mcp). You can connect external tools - databases, APIs, documentation servers - and the CLI will use them as part of its workflow. ```json // .gemini/settings.json { "mcpServers": { "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres"], "env": { "DATABASE_URL": "postgresql://localhost:5432/mydb" } } } } ``` This means you can query your database, fetch documentation, or interact with external services without leaving the Gemini session. The model calls the MCP tools as needed during code generation. ## Gemini CLI vs Claude Code Both are terminal-native AI coding agents. Both read your codebase, generate code, and run commands. The differences come down to model characteristics and pricing. **Context window.** Gemini wins here decisively. 1 million tokens vs Claude Code's 200K. For large TypeScript projects, this means fewer sessions where the model loses track of distant dependencies. **Code quality.** Claude Sonnet 4.6 and Opus 4.6 produce excellent TypeScript output - strong type inference, idiomatic patterns, minimal hallucination. Gemini 2.5 Pro is competitive but tends to be more verbose in its implementations. **Tool ecosystem.** Claude Code has a mature skill system, sub-agents, worktrees, and deep integration with Anthropic's model family. Gemini CLI is newer and still building out its feature set, but MCP support gives it extensibility from day one. **Price.** Gemini CLI is free. Claude Code Max is $200/month. If budget is a constraint, this is not a close comparison. **The practical move:** use both. Gemini CLI for large-context tasks, exploratory coding, and high-volume iteration where you would burn through a paid quota. Claude Code for precision work, complex refactors, and tasks where Anthropic's models have a quality edge. They are complementary tools, not competitors. ## Getting Started Three steps: ```bash # 1. Install npm install -g @google/gemini-cli # 2. Authenticate gemini # 3. Start coding > Scaffold a Next.js 16 app with TypeScript, Tailwind, and Convex. ``` Add a `GEMINI.md` to your project root with your conventions. Connect any MCP servers you use. Start building. For a curated directory of CLI coding tools including Gemini CLI, Claude Code, Codex, and others, check out [clis.developersdigest.tech](https://clis.developersdigest.tech). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Gemini Google CLI TypeScript Free <![CDATA[GitHub Copilot in 2026: Still Worth It for TypeScript Developers?]]> https://www.developersdigest.tech/blog/github-copilot-guide https://www.developersdigest.tech/blog/github-copilot-guide { // Copilot suggests: const user = await db.query.users.findFirst({ where: eq(users.id, id), }); return user ?? null; } ``` The completions feel natural in TypeScript because the type system gives Copilot extra signal. Compared to plain JavaScript, you get noticeably better suggestions when your types are well-defined. Where it falls short: large blocks of boilerplate. Copilot suggests line by line. If you need to scaffold an entire module, agent mode or a CLI tool is faster. ## Agent Mode: Multi-File Editing Copilot's agent mode arrived in late 2025 and has improved steadily. It works inside VS Code's Copilot Chat panel. You describe a task, and the agent reads files, proposes changes across multiple files, and applies them with your approval. For TypeScript projects, agent mode handles tasks like: - Adding a new API route with its types, handler, and tests - Refactoring a component and updating all its imports - Generating Zod schemas from existing TypeScript interfaces The agent uses GPT-4.1 by default but you can switch models. It runs in your editor, so it has access to your workspace context, your `tsconfig.json`, and your installed dependencies. The limitation is scope. Agent mode works best for changes that touch 2-5 files. Anything larger and it starts losing track of context. It also cannot run terminal commands, install packages, or execute tests. It edits code and that is it. ## Copilot Workspace: The Bigger Picture Workspace is the newest piece. It lives on github.com, not in your editor. You start from a GitHub Issue, and Workspace generates a plan: which files to change, what the changes should do, and a step-by-step execution path. The workflow looks like this: 1. Open a GitHub Issue 2. Click "Open in Workspace" 3. Workspace analyzes your repo and proposes a plan 4. You review and refine the plan 5. Workspace generates the code changes 6. You validate, iterate, then open a PR For TypeScript repos, Workspace understands your project structure and respects your existing patterns. It reads your `tsconfig.json`, your linter config, and your test setup. The plans it generates are usually reasonable for well-structured repos. The catch: Workspace is still best for issue-scoped work. "Fix this bug" or "add this feature" where the scope is clear. It is not a replacement for sitting down and architecting a new system. ## How It Compares to the Alternatives This is where the conversation gets interesting. Copilot is not the only option anymore. **[Cursor](/tools/cursor)** ($20/month Pro) runs a fork of VS Code with AI editing built into the core experience. Its Composer feature handles multi-file edits more fluidly than Copilot's agent mode. Tab completion in Cursor is competitive with Copilot. For TypeScript developers who live in VS Code, Cursor is the closest direct competitor. Cursor's advantage: deeper editor integration. The AI is not a sidebar panel. It is woven into the editing experience. You highlight code, hit Cmd+K, describe what you want, and it rewrites in place. For rapid iteration, this flow is faster. **[Claude Code](/tools/claude-code)** ($20/month Pro, $100-200/month for heavier use) takes a completely different approach. It is a CLI. You run it in your terminal, describe what you want, and it reads your codebase, makes changes, runs commands, and executes tests. It operates outside your editor entirely. For TypeScript projects, Claude Code is the strongest option for complex, multi-step tasks. It can: - Run `tsc` to catch type errors and fix them iteratively - Execute your test suite and fix failing tests - Install dependencies, update configs, and scaffold entire features - Work across dozens of files in a single session The trade-off: Claude Code has no inline completions. It is not helping you write code line by line. It is an agent you hand tasks to. Different workflow, different strengths. Here is how they break down for TypeScript work: | Task | Best Tool | |------|-----------| | Line-by-line completions | Copilot or Cursor | | Quick multi-file edits (2-5 files) | Cursor Composer | | Complex features (10+ files) | Claude Code | | Issue-to-PR workflow | Copilot Workspace | | Refactoring with tests | Claude Code | | Learning a new codebase | Copilot Chat or Claude Code | ## The Honest Take Copilot's biggest advantage is distribution. It is everywhere. VS Code, JetBrains, Neovim, GitHub.com. If you are already paying for GitHub, the $10/month add-on is easy to justify. The inline completions alone save enough time to cover the cost. But Copilot is no longer the best AI coding tool for TypeScript developers. It is the most convenient one. Cursor offers a better editing experience for the same class of tasks. Claude Code offers a better agent experience for complex work. Both produce higher-quality TypeScript output when the task involves multiple files, type safety, and test coverage. If you are choosing one tool: start with Claude Code for the agent workflow and use Copilot or Cursor for inline completions. They are complementary, not competing. The best setup for TypeScript in 2026 is a CLI agent for heavy lifting and an editor assistant for the moment-to-moment coding. If you want to go deeper on CLI-based AI tools for TypeScript development, check out the directory at [clis.developersdigest.tech](https://clis.developersdigest.tech) for a curated list of what is available. ## Should You Use Copilot? Yes, but know what you are getting. Copilot is a fast, reliable autocomplete engine with a growing set of agentic features. At $10/month, it is the cheapest entry point to AI-assisted coding. The inline completions are genuinely good for TypeScript. Agent mode and Workspace are useful but not best-in-class. The question is not "should I use Copilot?" The question is "should I use only Copilot?" For TypeScript developers shipping production code, the answer in 2026 is no. Pair it with a CLI agent. Use the right tool for each layer of the workflow. The autocomplete stays in your editor. The heavy thinking happens in the terminal. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest GitHub Copilot AI Coding TypeScript VS Code <![CDATA[How to Build AI Agents in TypeScript]]> https://www.developersdigest.tech/blog/how-to-build-ai-agents-typescript https://www.developersdigest.tech/blog/how-to-build-ai-agents-typescript { const res = await fetch( `https://api.github.com/search/repositories?q=${encodeURIComponent(query)}&sort=${sort}&per_page=10` ); const data = await res.json(); return data.items.map((r: any) => ({ name: r.full_name, stars: r.stargazers_count, description: r.description, })); }, }), getRepoDetails: tool({ description: "Get detailed information about a specific GitHub repository", parameters: z.object({ owner: z.string(), repo: z.string(), }), execute: async ({ owner, repo }) => { const res = await fetch(`https://api.github.com/repos/${owner}/${repo}`); return await res.json(); }, }), }, maxSteps: 8, }); ``` With `maxSteps: 8`, the model can search GitHub, inspect individual repos, compare results, and then write a synthesis. Each step feeds back into the context window. The model sees its own previous tool calls and their results, which lets it make increasingly informed decisions. ## Defining Tools with Zod Schemas Tools are where agents get their power. A tool is a function the model can call, with a typed schema that defines its inputs. The AI SDK uses Zod for this, which means your tool parameters are validated at runtime and fully typed at compile time. Here is a tool definition pattern that scales well: ```typescript import { tool } from "ai"; import { z } from "zod"; const databaseQuery = tool({ description: "Execute a read-only SQL query against the application database", parameters: z.object({ query: z.string().describe("SQL SELECT query to execute"), params: z.array(z.string()).optional().describe("Parameterized values"), }), execute: async ({ query, params }) => { if (!query.trim().toUpperCase().startsWith("SELECT")) { return { error: "Only SELECT queries are allowed" }; } const result = await db.query(query, params); return { rows: result.rows, rowCount: result.rowCount }; }, }); const readFile = tool({ description: "Read the contents of a file from the project directory", parameters: z.object({ path: z.string().describe("Relative file path from project root"), }), execute: async ({ path }) => { const resolved = resolve(PROJECT_ROOT, path); if (!resolved.startsWith(PROJECT_ROOT)) { return { error: "Path traversal not allowed" }; } const content = await readFile(resolved, "utf-8"); return { content, path }; }, }); const writeFile = tool({ description: "Write content to a file in the project directory", parameters: z.object({ path: z.string().describe("Relative file path from project root"), content: z.string().describe("File content to write"), }), execute: async ({ path, content }) => { const resolved = resolve(PROJECT_ROOT, path); if (!resolved.startsWith(PROJECT_ROOT)) { return { error: "Path traversal not allowed" }; } await writeFileSync(resolved, content, "utf-8"); return { success: true, path }; }, }); ``` A few things to notice. Every tool has a clear `description` - this is what the model reads to decide when to use it. The Zod schemas include `.describe()` annotations on each field, which give the model context about what values to provide. And the `execute` function includes safety checks before doing anything destructive. If you are working with complex schemas, the [JSON to TypeScript converter](/json-to-typescript) on this site can generate Zod schemas from sample JSON payloads. Useful when you are wrapping an existing API and need the schema fast. ## Multi-Step Reasoning The real power of agents shows up when tasks require multiple steps. Consider a code review agent that needs to read files, understand the project structure, check for issues, and produce a structured report. ```typescript import { generateObject, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; import { readdir, readFile } from "fs/promises"; import { join } from "path"; const reviewSchema = z.object({ summary: z.string(), issues: z.array( z.object({ file: z.string(), line: z.number().optional(), severity: z.enum(["error", "warning", "info"]), message: z.string(), suggestion: z.string(), }) ), score: z.number().min(0).max(100), }); type CodeReview = z.infer; async function reviewCode(projectPath: string): Promise { const { object } = await generateObject({ model: anthropic("claude-sonnet-4-20250514"), schema: reviewSchema, system: `You are a senior TypeScript engineer performing a code review. Read the project files using the available tools, then produce a structured review. Focus on type safety, error handling, and architectural concerns.`, prompt: `Review the TypeScript project at: ${projectPath}`, tools: { listFiles: tool({ description: "List files in a directory", parameters: z.object({ dir: z.string() }), execute: async ({ dir }) => { const entries = await readdir(join(projectPath, dir), { withFileTypes: true, }); return entries.map((e) => ({ name: e.name, isDirectory: e.isDirectory(), })); }, }), readFile: tool({ description: "Read a file's contents", parameters: z.object({ path: z.string() }), execute: async ({ path }) => { const content = await readFile(join(projectPath, path), "utf-8"); return { path, content }; }, }), }, maxSteps: 15, }); return object; } ``` The agent will list directories to understand the project structure, read key files like `tsconfig.json` and `package.json`, then dive into source files. It chains tool calls across multiple steps, building context as it goes. The output conforms to the Zod schema - fully typed, validated, ready to consume in your application. This is the `generateObject` approach. The model is forced to return data matching your schema. No parsing strings. No hoping the JSON is valid. The SDK handles retries if the output does not match. ## The Agent Loop Architecture For more complex agents that need custom control flow, you can build the loop yourself. This gives you control over retry logic, context window management, and early termination conditions. ```typescript import { generateText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; interface AgentState { messages: Array<{ role: string; content: string }>; steps: number; maxSteps: number; done: boolean; } async function runAgent(goal: string, tools: Record) { const state: AgentState = { messages: [ { role: "system", content: `You are an autonomous agent. Complete the given goal using available tools. When you have enough information to provide a final answer, respond with plain text (no tool calls).`, }, { role: "user", content: goal }, ], steps: 0, maxSteps: 20, done: false, }; while (!state.done && state.steps < state.maxSteps) { const { text, toolCalls, toolResults } = await generateText({ model: anthropic("claude-sonnet-4-20250514"), messages: state.messages as any, tools, maxSteps: 1, // One step at a time for manual control }); state.steps++; if (toolCalls.length === 0) { // Model responded with text - it is done state.done = true; return { result: text, steps: state.steps }; } // Add tool interactions to message history state.messages.push({ role: "assistant", content: JSON.stringify({ toolCalls }), }); for (const result of toolResults) { state.messages.push({ role: "tool", content: JSON.stringify(result), }); } console.log(`Step ${state.steps}: called ${toolCalls.map((t) => t.toolName).join(", ")}`); } return { result: "Max steps reached", steps: state.steps }; } ``` This pattern gives you hooks into every step of the agent's execution. You can log each tool call, implement circuit breakers, manage token budgets, or add human-in-the-loop approval for destructive actions. ## Streaming Agents in Next.js For web applications, you want the agent's reasoning and tool calls to stream to the UI in real time. The AI SDK makes this straightforward with `streamText` and the `useChat` hook. Server-side route handler: ```typescript // app/api/agent/route.ts import { streamText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; export async function POST(req: Request) { const { messages } = await req.json(); const result = streamText({ model: anthropic("claude-sonnet-4-20250514"), system: `You are a developer productivity agent. You can search documentation, analyze code patterns, and suggest improvements. Use tools to gather information before providing your answer.`, messages, tools: { searchDocs: tool({ description: "Search documentation for a library or framework", parameters: z.object({ library: z.string().describe("Library name (e.g., 'nextjs', 'react')"), query: z.string().describe("What to search for"), }), execute: async ({ library, query }) => { // Your documentation search implementation return { results: [`${library}: ${query} - relevant docs found`] }; }, }), analyzeCode: tool({ description: "Analyze a code snippet for issues and improvements", parameters: z.object({ code: z.string().describe("The code to analyze"), language: z.string().describe("Programming language"), }), execute: async ({ code, language }) => { return { language, lineCount: code.split("\n").length, analysis: "Analysis complete", }; }, }), }, maxSteps: 10, }); return result.toDataStreamResponse(); } ``` Client-side component: ```typescript "use client"; import { useChat } from "@ai-sdk/react"; export default function AgentChat() { const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ api: "/api/agent" }); return (
{messages.map((m) => (
{m.role === "user" ? "You" : "Agent"}
{m.content}
{/* Show tool invocations */} {m.toolInvocations?.map((tool, i) => (
{tool.toolName} {tool.state === "result" && ( 
                    {JSON.stringify(tool.result, null, 2)}
)}
))}
))}
); } ``` The `useChat` hook handles the streaming protocol automatically. Tool invocations appear on each message object, so you can render the agent's reasoning process as it happens. Users see which tools the agent calls and what results come back, giving full transparency into the agent's decision-making. ## Tool Design Patterns The quality of your tools determines the quality of your agent. Here are patterns that work well in production. ### Constrained tools over general tools Do not give the agent a single "do anything" tool. Give it specific, well-scoped tools with clear descriptions. ```typescript // Bad: too general const execute = tool({ description: "Execute any operation", parameters: z.object({ operation: z.string(), data: z.any() }), execute: async ({ operation, data }) => { /* ... */ }, }); // Good: specific and well-described const createUser = tool({ description: "Create a new user account with email and name", parameters: z.object({ email: z.string().email(), name: z.string().min(1).max(100), role: z.enum(["admin", "member", "viewer"]).default("member"), }), execute: async ({ email, name, role }) => { /* ... */ }, }); ``` ### Return structured data, not strings Tools should return structured objects that the model can reason about, not formatted strings. ```typescript // Bad: string output execute: async ({ query }) => { const results = await db.query(query); return `Found ${results.length} results: ${results.map(r => r.name).join(", ")}`; } // Good: structured output execute: async ({ query }) => { const results = await db.query(query); return { count: results.length, results: results.map(r => ({ id: r.id, name: r.name, status: r.status })), hasMore: results.length === LIMIT, }; } ``` ### Confirmation tools for destructive actions For agents that can modify data, add a confirmation step. ```typescript const deleteRecords = tool({ description: "Delete records matching a filter. Returns a preview first - call confirmDelete to execute.", parameters: z.object({ table: z.string(), filter: z.record(z.string()), }), execute: async ({ table, filter }) => { const preview = await db.query( `SELECT id, name FROM ${table} WHERE ${buildWhere(filter)} LIMIT 10` ); return { willDelete: preview.length, preview: preview, confirmationToken: generateToken({ table, filter }), }; }, }); const confirmDelete = tool({ description: "Confirm and execute a previously previewed delete operation", parameters: z.object({ confirmationToken: z.string(), }), execute: async ({ confirmationToken }) => { const { table, filter } = verifyToken(confirmationToken); const result = await db.query(`DELETE FROM ${table} WHERE ${buildWhere(filter)}`); return { deleted: result.rowCount }; }, }); ``` ## Where AI Coding Tools Fit In Building agents is one of the strongest use cases for AI coding tools. [Claude Code](/tools/claude-code) can scaffold an entire agent system from a natural language description - it reads your existing code, generates typed tool definitions, and wires up the streaming pipeline. [Cursor](/tools/cursor) gives you the same capability inside an IDE with inline completions that understand the AI SDK's patterns. The workflow for most teams looks like this: describe the agent's purpose and tools in your [CLAUDE.md](/claudemd-generator) file, then use Claude Code to generate the implementation. The model understands the AI SDK deeply, so it produces idiomatic code with proper Zod schemas, streaming handlers, and error boundaries. For a full breakdown of the AI SDK's streaming and tool use capabilities, see the [Vercel AI SDK guide](/blog/vercel-ai-sdk-guide). And if you want to see how agents fit into a broader application stack, the [developer toolkit](/toolkit) page covers the full set of tools that integrate well with agent architectures. ## Frequently Asked Questions ### What is an AI agent? An AI agent is a program that uses a large language model to autonomously complete multi-step tasks. Unlike a chatbot that responds to a single prompt and stops, an agent receives a goal, breaks it into steps, calls tools to interact with the outside world, evaluates results, and keeps looping until the objective is met. The model decides the control flow at runtime. For a conceptual overview, see [AI Agents Explained](/blog/ai-agents-explained). ### Can you build agents with TypeScript? Yes. TypeScript is one of the strongest languages for building AI agents thanks to the [Vercel AI SDK](/blog/vercel-ai-sdk-guide) and the Claude Agent SDK. Both provide typed tool definitions using Zod schemas, streaming support, and multi-step reasoning loops. TypeScript's type system ensures your tool inputs and outputs are validated at compile time, which reduces runtime errors in production agent systems. ### What is the best framework for AI agents? The Vercel AI SDK is the best choice for TypeScript developers building agents that integrate with web applications. It handles streaming, tool execution, and structured output with minimal boilerplate. The Claude Agent SDK is better suited for standalone agent systems with delegation and multi-agent patterns. LangChain.js provides more pre-built abstractions for complex workflows. The right choice depends on whether your agent lives inside a web app or runs independently. ### How do AI agents use tools? Agents use tools by calling functions you define with typed parameter schemas. When the model encounters a task that requires external data or actions, it generates a tool call with the appropriate arguments. The framework executes the function and feeds the result back into the model's context. The model then reasons about the result and decides the next step. This reason-act-observe loop continues until the goal is complete. ### What is the difference between agents and chatbots? A chatbot processes a single user message and returns a single response. An agent operates in a loop, making multiple LLM calls and tool invocations to accomplish a goal. Chatbots follow a request-response pattern. Agents follow a goal-directed pattern where the model decides what actions to take, observes outcomes, and adjusts its approach. Agents can chain dozens of operations together without human input between steps. ## What's Next You have the building blocks: tool definitions, multi-step loops, streaming to the UI, and patterns for production safety. The next step is building agents that solve real problems in your domain. Start with a narrow scope. A code review agent. A data analysis agent. A customer support agent that can look up orders and process refunds. Constrain the tools, test the edge cases, and expand from there. For more on the concepts behind agents, read [AI Agents Explained](/blog/ai-agents-explained). To see how agents connect to external services, check out the [MCP guide](/blog/how-to-use-mcp-servers). And for the full application stack these agents run inside, see [Next.js AI App Stack 2026](/blog/nextjs-ai-app-stack-2026). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Agents TypeScript Vercel AI SDK Claude Code <![CDATA[How to Use MCP Servers: The Complete Guide]]> https://www.developersdigest.tech/blog/how-to-use-mcp-servers https://www.developersdigest.tech/blog/how-to-use-mcp-servers executes read-only SQL |-- tool: list_tables() -> returns schema info |-- tool: explain(sql) -> runs EXPLAIN ANALYZE | v Your Postgres database ``` The model decides which tools to call. You did not write any glue code. You configured a server, and the agent figured out the rest. ## Configuring MCP for Claude Code Claude Code reads MCP configuration from `.claude/settings.json` in your project (or `~/.claude/settings.json` for global servers). The format is straightforward: ```json { "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@anthropic-ai/mcp-server-filesystem", "/Users/you/projects" ] }, "github": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-github"], "env": { "GITHUB_TOKEN": "ghp_your_token_here" } }, "postgres": { "command": "npx", "args": [ "-y", "@anthropic-ai/mcp-server-postgres", "postgresql://localhost:5432/mydb" ] } } } ``` Each server entry has: - **command** - the executable to run (usually `npx` or `node`) - **args** - arguments passed to the command, including the package name and any config - **env** - optional environment variables for API keys and secrets Restart Claude Code after changing the config. It discovers the servers on startup and logs which tools are available. You can also use the [MCP Config Generator](/mcp-config) to build this configuration interactively. Select the servers you need, fill in your credentials, and it outputs the JSON ready to paste into your settings file. ## Configuring MCP for Cursor [Cursor](/tools/cursor) supports MCP servers through its settings. The configuration lives at `~/.cursor/mcp.json`: ```json { "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@anthropic-ai/mcp-server-filesystem", "/Users/you/projects" ] }, "github": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-github"], "env": { "GITHUB_TOKEN": "ghp_your_token_here" } } } } ``` The format is identical to Claude Code. Most MCP servers work with both tools without any changes. If you use both Claude Code and Cursor, you can share the same server configurations - just put them in both config files. Cursor's Composer mode is where MCP tools shine. When you ask Composer to "check the latest deployment status" or "create a GitHub issue for this bug," it calls the appropriate MCP tool automatically. ## Popular MCP Servers The MCP ecosystem has grown fast. Here are the servers most TypeScript developers reach for first. ### Filesystem Server Gives the agent read/write access to specified directories. Useful for agents that need to work with files outside the current project. ```json { "filesystem": { "command": "npx", "args": [ "-y", "@anthropic-ai/mcp-server-filesystem", "/Users/you/docs", "/Users/you/notes" ] } } ``` You pass the allowed directories as arguments. The server restricts access to those paths only - the agent cannot read or write anywhere else. This is a security boundary, not just a convenience. ### GitHub Server Full GitHub integration. The agent can search repos, read issues and PRs, create branches, comment on code reviews, and manage releases. ```json { "github": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-github"], "env": { "GITHUB_TOKEN": "ghp_your_personal_access_token" } } } ``` Practical uses: "Review all open PRs in this repo and summarize the status of each." "Create an issue for the bug I just described with proper labels." "Find all issues assigned to me across my repos." The token needs appropriate scopes. For read-only access, `repo:read` is enough. For creating issues and PRs, you need full `repo` scope. ### Postgres Server Direct database access for the agent. It can query tables, inspect schemas, and run analytical queries. ```json { "postgres": { "command": "npx", "args": [ "-y", "@anthropic-ai/mcp-server-postgres", "postgresql://user:pass@localhost:5432/mydb" ] } } ``` The server enforces read-only access by default. The agent can run `SELECT` queries and `EXPLAIN ANALYZE`, but not `INSERT`, `UPDATE`, or `DELETE`. This is the right default for most use cases - you want the agent to analyze data, not modify it. Use case: "How many users signed up this week compared to last week?" The agent writes the SQL, executes it, and gives you the answer. No context-switching to a database client. ### Slack Server Connects the agent to your Slack workspace. It can read messages, search channels, and post updates. ```json { "slack": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-slack"], "env": { "SLACK_BOT_TOKEN": "xoxb-your-bot-token", "SLACK_TEAM_ID": "T01234567" } } } ``` This requires a Slack app with bot token scopes. At minimum: `channels:read`, `channels:history`, `chat:write`. Set these up in the Slack App dashboard under OAuth & Permissions. Use case: "Summarize the discussion in #engineering from today." "Post a deployment notification to #releases." ### Browser / Puppeteer Server Gives the agent a headless browser for navigating web pages, filling forms, and taking screenshots. ```json { "puppeteer": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-puppeteer"] } } ``` The agent can navigate to URLs, read page content, interact with elements, and capture screenshots. Useful for QA workflows, scraping documentation, or testing your own deployed applications. ### Memory / Knowledge Graph Server A persistent memory layer that stores entities and relationships across sessions. ```json { "memory": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-memory"] } } ``` The agent can create entities ("Project X uses React and Convex"), define relationships ("Project X depends on API Y"), and query the graph later. This gives agents long-term memory beyond the context window. ## Building a Custom MCP Server When existing servers do not cover your use case, you build your own. The TypeScript SDK makes this straightforward. Install the SDK: ```bash npm install @modelcontextprotocol/sdk ``` Here is a complete MCP server that wraps an internal API: ```typescript import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js"; const server = new Server( { name: "internal-api", version: "1.0.0" }, { capabilities: { tools: {} } } ); // Define available tools server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: "get_deployments", description: "List recent deployments for a service", inputSchema: { type: "object" as const, properties: { service: { type: "string", description: "Service name (e.g., 'api', 'web', 'worker')", }, limit: { type: "number", description: "Number of deployments to return", default: 10, }, }, required: ["service"], }, }, { name: "get_metrics", description: "Get performance metrics for a service over a time range", inputSchema: { type: "object" as const, properties: { service: { type: "string", description: "Service name" }, metric: { type: "string", enum: ["latency_p99", "error_rate", "throughput", "cpu", "memory"], description: "Metric to retrieve", }, hours: { type: "number", description: "Hours of history to fetch", default: 24, }, }, required: ["service", "metric"], }, }, ], })); // Handle tool calls server.setRequestHandler(CallToolRequestSchema, async (request) => { const { name, arguments: args } = request.params; switch (name) { case "get_deployments": { const { service, limit = 10 } = args as any; const res = await fetch( `https://internal-api.company.com/deployments?service=${service}&limit=${limit}`, { headers: { Authorization: `Bearer ${process.env.API_TOKEN}` } } ); const data = await res.json(); return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] }; } case "get_metrics": { const { service, metric, hours = 24 } = args as any; const res = await fetch( `https://internal-api.company.com/metrics?service=${service}&metric=${metric}&hours=${hours}`, { headers: { Authorization: `Bearer ${process.env.API_TOKEN}` } } ); const data = await res.json(); return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] }; } default: throw new Error(`Unknown tool: ${name}`); } }); // Start the server const transport = new StdioServerTransport(); await server.connect(transport); ``` Save this as `server.ts`, compile it, and reference it in your MCP config: ```json { "internal-api": { "command": "node", "args": ["./dist/server.js"], "env": { "API_TOKEN": "your-internal-api-token" } } } ``` Now your AI agent can check deployment status and pull metrics by asking in natural language. "What is the p99 latency for the API service over the last 6 hours?" The model translates that to a `get_metrics` tool call with the right parameters. ## Composing Multiple Servers The real power of MCP shows up when you combine multiple servers. An agent with access to GitHub, your database, and Slack can answer questions that span all three: "Find all PRs merged this week that touched the auth module, check if there were any error rate spikes in the auth service after each merge, and post a summary to #engineering." That single request triggers tool calls across three different MCP servers. The agent reasons through the steps: search GitHub for merged PRs, filter by file paths, query metrics around each merge timestamp, correlate the data, and post the summary. You configured three servers. The agent handled the orchestration. ```json { "mcpServers": { "github": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-github"], "env": { "GITHUB_TOKEN": "ghp_..." } }, "postgres": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-postgres", "postgresql://..."] }, "slack": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-server-slack"], "env": { "SLACK_BOT_TOKEN": "xoxb-...", "SLACK_TEAM_ID": "T..." } } } } ``` ## Security Considerations MCP servers run with whatever permissions you give them. A few guidelines: **Least privilege tokens.** Give the GitHub server a token scoped to the repos it needs, not your entire account. Give the database server a read-only connection string. Give the Slack server a bot with minimal scopes. **Directory sandboxing.** The filesystem server restricts access to the directories you specify. Do not pass `/` as an argument. Be specific about which paths the agent needs. **Environment variable isolation.** API keys go in the `env` field of the server config, not in your shell environment. This keeps secrets scoped to the server that needs them. **Audit tool calls.** MCP clients (Claude Code, Cursor) show you which tools the agent calls before executing them. Review destructive operations before approving. ## Setting Up Your First MCP Config If you have not configured MCP servers before, start with two: filesystem and GitHub. They cover the most common needs and do not require external services. 1. Generate a GitHub personal access token at `github.com/settings/tokens` 2. Use the [MCP Config Generator](/mcp-config) to build your config 3. Save it to `.claude/settings.json` in your project (for [Claude Code](/blog/what-is-claude-code)) 4. Restart your agent and test with: "List my open GitHub issues" or "Read the README from my other project" Once those work, add servers for the tools you actually use. Database, Slack, deployment platform - whatever your daily workflow touches. For projects that use Claude Code, pair your MCP config with a [CLAUDE.md file](/claudemd-generator) that tells the agent how to use your specific servers. "Use the postgres MCP to answer questions about user data. Use the GitHub MCP to create issues, never manually." ## Frequently Asked Questions ### How do I install an MCP server? Most MCP servers run via `npx` with no separate installation step. You add the server configuration to your settings file (`.claude/settings.json` for Claude Code, `~/.cursor/mcp.json` for Cursor) with the package name and any required arguments like connection strings or API tokens. When you restart your AI tool, it spawns the server process automatically. Use the [MCP Config Generator](/mcp-config) to build the configuration without writing JSON by hand. ### What are the best MCP servers? The most widely used MCP servers are Filesystem (read/write project files), GitHub (issues, PRs, repo management), Postgres (database queries and schema inspection), and Slack (channel messages and notifications). For development workflows, the Browser/Puppeteer server is valuable for visual QA and testing. The Memory server adds persistent knowledge graph storage across sessions. See the [MCP protocol overview](/blog/what-is-mcp) for details on each. ### Can I build my own MCP server? Yes. The official TypeScript SDK (`@modelcontextprotocol/sdk`) provides everything you need to build custom MCP servers. You define tools with names, descriptions, and input schemas, then implement handler functions for each. A basic server with one or two tools can be built in under 50 lines of TypeScript. This is the recommended approach for wrapping internal APIs or domain-specific business logic. ### Do MCP servers work with Cursor? Yes. [Cursor](/tools/cursor) supports MCP servers through the same configuration format as Claude Code. Add your server definitions to `~/.cursor/mcp.json` and restart Cursor. The Composer agent mode automatically discovers and uses the available MCP tools when relevant to your request. Most MCP servers work identically across Claude Code and Cursor without any changes. ### How many MCP servers can I use? There is no hard protocol limit on the number of MCP servers you can configure. In practice, most developers run 3 to 6 servers simultaneously (filesystem, GitHub, database, and a few custom ones). Each server runs as a separate process, so the main constraint is system resources. The AI model sees all available tools from all connected servers and picks the right ones based on context. ## What's Next MCP turns AI agents from isolated text generators into connected systems that can act on your real infrastructure. The protocol is still evolving - new servers appear weekly, and the SDK continues to improve. For the foundational concepts, read [What Is MCP](/blog/what-is-mcp). To see how MCP tools fit into the agent loop, check out [How to Build AI Agents in TypeScript](/blog/how-to-build-ai-agents-typescript). And for the broader application stack that ties everything together, see the [Next.js AI App Stack for 2026](/blog/nextjs-ai-app-stack-2026). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest MCP Model Context Protocol Claude Code Cursor TypeScript <![CDATA[LangChain vs Vercel AI SDK: Which TypeScript AI Framework Should You Use?]]> https://www.developersdigest.tech/blog/langchain-vs-vercel-ai-sdk https://www.developersdigest.tech/blog/langchain-vs-vercel-ai-sdk new HumanMessage(m.content) )); return new Response(stream, { headers: { "Content-Type": "text/event-stream" }, }); } ``` More imports, more setup, and you are managing the stream format yourself. LangChain's strength is not simple chat. It is what comes after. ## Tool Calling This is where both frameworks shine, but differently. **Vercel AI SDK:** ```typescript import { generateText, tool } from "ai"; import { openai } from "@ai-sdk/openai"; import { z } from "zod"; const result = await generateText({ model: openai("gpt-4o"), tools: { getWeather: tool({ description: "Get the weather for a location", parameters: z.object({ city: z.string(), }), execute: async ({ city }) => { return { temp: 72, condition: "sunny" }; }, }), }, prompt: "What is the weather in San Francisco?", }); ``` Tools are defined inline with Zod schemas. The SDK handles the function calling protocol, parses the response, executes your function, and feeds the result back to the model. Clean and predictable. **LangChain:** ```typescript import { ChatOpenAI } from "@langchain/openai"; import { DynamicStructuredTool } from "@langchain/core/tools"; import { AgentExecutor, createOpenAIFunctionsAgent } from "langchain/agents"; import { ChatPromptTemplate } from "@langchain/core/prompts"; import { z } from "zod"; const weatherTool = new DynamicStructuredTool({ name: "getWeather", description: "Get the weather for a location", schema: z.object({ city: z.string(), }), func: async ({ city }) => { return JSON.stringify({ temp: 72, condition: "sunny" }); }, }); const model = new ChatOpenAI({ modelName: "gpt-4o" }); const prompt = ChatPromptTemplate.fromMessages([ ["system", "You are a helpful assistant."], ["human", "{input}"], ["placeholder", "{agent_scratchpad}"], ]); const agent = createOpenAIFunctionsAgent({ llm: model, tools: [weatherTool], prompt }); const executor = new AgentExecutor({ agent, tools: [weatherTool] }); const result = await executor.invoke({ input: "What is the weather in San Francisco?", }); ``` More ceremony. But the `AgentExecutor` gives you something the AI SDK does not out of the box: a loop. The agent can call multiple tools, reason about intermediate results, and decide when it is done. The AI SDK can do this too with `maxSteps`, but LangChain's agent abstraction is more structured. ## Where LangChain Wins **RAG pipelines.** LangChain has document loaders for PDFs, CSVs, web pages, Notion, and dozens of other sources. It has text splitters, embedding integrations, and vector store connectors. Building a retrieval-augmented generation pipeline in LangChain takes a fraction of the custom code you would write with the AI SDK. **Complex agent workflows.** LangGraph (LangChain's agent framework) lets you define stateful, multi-step agent graphs with branching, cycles, and human-in-the-loop checkpoints. If you are building an agent that needs to plan, execute, reflect, and retry, LangGraph has the primitives. **Ecosystem breadth.** LangChain integrates with nearly every vector database, document store, and LLM provider. If you need Pinecone + Cohere + a custom retriever + a multi-step chain, LangChain has pre-built components for all of it. ## Where the AI SDK Wins **[Next.js](/tools/nextjs) integration.** The AI SDK was designed for React Server Components and the App Router. `useChat`, `useCompletion`, and `useObject` are React hooks that handle streaming UI out of the box. No glue code needed. **Simplicity.** The learning curve is almost flat. If you know TypeScript and React, you can ship an AI feature in an afternoon. There is no framework to learn, just functions you call. **Streaming-first architecture.** Every function in the AI SDK is built around streaming. `streamText`, `streamObject`, `streamUI`. This is not bolted on. It is the default. For user-facing applications where perceived latency matters, this is a significant advantage. **Provider switching.** Swap `openai("gpt-4o")` for `anthropic("claude-sonnet-4-20250514")` or `google("gemini-2.0-flash")`. Same API, same types, same streaming behavior. The provider abstraction is clean and does not leak. **Bundle size.** The AI SDK is lightweight. LangChain pulls in a substantial dependency tree. For frontend-heavy applications, this matters. ## The Decision Framework Pick the **Vercel AI SDK** if: - You are building a Next.js app with AI features - You want streaming chat, tool use, or structured output - You prefer writing your own patterns over learning a framework - You need something in production this week - Your AI features are part of a larger app, not the entire app Pick **LangChain** if: - You are building a complex RAG pipeline with multiple data sources - You need multi-step agents with planning and reflection - You want pre-built integrations with vector databases and document loaders - Your project is primarily an AI/ML application, not a web app with AI features - You are comfortable with the abstraction overhead in exchange for built-in patterns ## The Honest Take Most TypeScript developers building web applications should start with the Vercel AI SDK. It does less, and that is the point. You add AI capabilities to your app without adopting a framework. When you hit the limits, you will know, and you can bring in LangChain for the specific pipeline that needs it. LangChain is powerful, but it carries the weight of its Python heritage. The TypeScript version has improved dramatically, but the abstraction layer can feel heavy when all you need is a streaming chat endpoint. The indirection through chains, prompts, and executors adds cognitive overhead that does not always pay for itself. The good news: they are not mutually exclusive. Use the AI SDK for your user-facing streaming features and LangChain for your backend RAG pipeline. That is a pattern that works well in production. For a deeper comparison of AI frameworks and how they fit into agentic workflows, check out the [frameworks guide on SubAgent](https://subagent.developersdigest.tech/frameworks). ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest LangChain Vercel AI SDK TypeScript AI Frameworks <![CDATA[Multi-Agent Systems: How to Orchestrate Multiple AI Agents in TypeScript]]> https://www.developersdigest.tech/blog/multi-agent-systems https://www.developersdigest.tech/blog/multi-agent-systems Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Multi-Agent AI Agents TypeScript Orchestration <![CDATA[The Next.js AI App Stack for 2026]]> https://www.developersdigest.tech/blog/nextjs-ai-app-stack-2026 https://www.developersdigest.tech/blog/nextjs-ai-app-stack-2026 { const user = await db.query.users.findFirst({ where: (users, { eq }) => eq(users.email, email), }); return user ?? { error: "User not found" }; }, }), createInvoice: tool({ description: "Create a new invoice for a user", parameters: z.object({ userId: z.string(), amount: z.number().positive(), description: z.string(), }), execute: async ({ userId, amount, description }) => { const invoice = await db.mutation.invoices.create({ userId, amount, description, status: "pending", }); return invoice; }, }), }, maxSteps: 5, }); ``` The `maxSteps` parameter turns a simple chat into an agent that can look up users, create invoices, and chain those operations together. The model decides the control flow. Your code defines the capabilities. On the frontend, the `useChat` hook from `@ai-sdk/react` handles message state, streaming, loading indicators, and error handling: ```typescript "use client"; import { useChat } from "@ai-sdk/react"; export function AIChat() { const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat(); return (
{messages.map((m) => (
{m.role}: {m.content}
))}
); } ``` One hook. Full chat functionality. The SDK negotiates the streaming protocol between your route handler and the client component. ## Convex: The Reactive Backend Traditional databases require you to poll for updates or set up WebSocket infrastructure for real-time features. [Convex](/tools/convex) eliminates both. It is a reactive backend where queries automatically re-run when underlying data changes. For AI apps, this matters in three ways: **Real-time chat history.** When your AI generates a response, it gets saved to Convex. Every client subscribed to that conversation sees the update instantly. No manual invalidation. No refetching. **Background processing.** Convex actions run server-side and can call external APIs (like LLM providers) without blocking the client. Start a long-running AI generation, and the client receives updates as they happen. **Schema-first design.** Convex uses TypeScript schemas that generate full type safety from database to UI: ```typescript // convex/schema.ts import { defineSchema, defineTable } from "convex/server"; import { v } from "convex/values"; export default defineSchema({ conversations: defineTable({ userId: v.string(), title: v.string(), createdAt: v.number(), }).index("by_user", ["userId"]), messages: defineTable({ conversationId: v.id("conversations"), role: v.union(v.literal("user"), v.literal("assistant")), content: v.string(), toolCalls: v.optional(v.array(v.object({ name: v.string(), args: v.any(), result: v.optional(v.any()), }))), createdAt: v.number(), }).index("by_conversation", ["conversationId"]), usage: defineTable({ userId: v.string(), tokens: v.number(), model: v.string(), timestamp: v.number(), }).index("by_user", ["userId"]), }); ``` Queries are reactive by default: ```typescript // convex/conversations.ts import { query } from "./_generated/server"; import { v } from "convex/values"; export const list = query({ args: { userId: v.string() }, handler: async (ctx, { userId }) => { return await ctx.db .query("conversations") .withIndex("by_user", (q) => q.eq("userId", userId)) .order("desc") .take(50); }, }); ``` On the client, `useQuery` subscribes to this data and re-renders when it changes: ```typescript "use client"; import { useQuery } from "convex/react"; import { api } from "@/convex/_generated/api"; export function ConversationList({ userId }: { userId: string }) { const conversations = useQuery(api.conversations.list, { userId }); if (!conversations) return
Loading...
; return (
    {conversations.map((c) => (
  • {c.title}
    • ))}
); } ``` No fetch calls. No cache invalidation. No stale data. When a new conversation gets created anywhere - from the UI, from a server action, from a background job - every client sees it immediately. ## Clerk: Authentication Without the Pain [Clerk](/tools/clerk) provides authentication, user management, and organization support with pre-built UI components. For AI apps, the important thing is that it integrates cleanly with both Next.js and Convex without custom middleware. Setup is minimal. Install the package, add your keys, wrap your app: ```typescript // app/layout.tsx import { ClerkProvider } from "@clerk/nextjs"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` Protect routes with middleware: ```typescript // middleware.ts import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/api/chat(.*)"]); export default clerkMiddleware(async (auth, req) => { if (isProtectedRoute(req)) { await auth.protect(); } }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"], }; ``` Access the user in server components and route handlers: ```typescript import { auth } from "@clerk/nextjs/server"; export async function POST(req: Request) { const { userId } = await auth(); if (!userId) { return new Response("Unauthorized", { status: 401 }); } // userId is available for your AI route handler // Use it to scope conversations, track usage, enforce limits } ``` Clerk's free tier supports thousands of monthly active users. For AI apps that charge per-use, you are unlikely to hit paid tiers until the product has meaningful revenue. ## Tailwind: Styling That Scales Tailwind CSS is the styling layer because it eliminates the context-switching between component code and separate stylesheets. For AI applications, where you are iterating on chat interfaces, loading states, and data visualizations, keeping styles co-located with markup matters. The combination with AI coding tools is particularly strong. [Claude Code](/tools/claude-code) and [Cursor](/tools/cursor) generate Tailwind classes accurately because the utility-first approach is predictable and well-represented in training data. Tell Claude Code to "add a chat bubble component with a subtle shadow and rounded corners" and it produces correct Tailwind on the first try. ```typescript function ChatBubble({ role, content }: { role: string; content: string }) { return (

{content}

); } ``` For AI-specific UI patterns - streaming text indicators, tool call visualizations, token usage meters - Tailwind's utility classes let you prototype quickly without fighting CSS specificity or naming conventions. ## Project Structure Here is how a production AI app looks with this stack: ``` my-ai-app/ app/ layout.tsx # ClerkProvider + ConvexProvider page.tsx # Landing page dashboard/ page.tsx # Main app (protected) chat/ [id]/page.tsx # Individual conversation api/ chat/route.ts # AI streaming endpoint webhooks/ clerk/route.ts # Clerk webhook handler stripe/route.ts # Payment webhooks components/ ChatInterface.tsx # useChat + message rendering ConversationList.tsx # useQuery for conversations UsageMeter.tsx # Token usage display convex/ schema.ts # Database schema conversations.ts # Conversation queries/mutations messages.ts # Message queries/mutations usage.ts # Usage tracking ai.ts # Background AI actions lib/ ai.ts # Model configuration, system prompts tools.ts # Agent tool definitions middleware.ts # Clerk auth middleware .env.local # API keys (never committed) CLAUDE.md # AI coding agent instructions ``` The `CLAUDE.md` file at the root is key. It tells [Claude Code](/blog/what-is-claude-code) how this project works - the stack, conventions, and rules. When you use Claude Code to add features or fix bugs, it reads this file first and follows your project's patterns. Use the [CLAUDE.md Generator](/claudemd-generator) to create one for your project. The [.env Generator](/env-generator) can scaffold your environment variables file with the right keys for each service in the stack. ## Wiring It All Together The integration points between these tools are where the stack proves its value. Here is how a complete request flows through the system: 1. User sends a message in the chat UI (`useChat` from AI SDK) 2. Request hits `app/api/chat/route.ts`, authenticated by Clerk middleware 3. Route handler calls `streamText` with the user's messages and agent tools 4. Tools query Convex for user data, conversation history, or domain-specific information 5. AI response streams back to the client via the AI SDK protocol 6. A Convex mutation saves the message to the database 7. Every client subscribed to this conversation sees the update in real time ```typescript // app/api/chat/route.ts - the complete handler import { streamText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { auth } from "@clerk/nextjs/server"; import { ConvexHttpClient } from "convex/browser"; import { api } from "@/convex/_generated/api"; import { z } from "zod"; const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!); export async function POST(req: Request) { const { userId } = await auth(); if (!userId) return new Response("Unauthorized", { status: 401 }); const { messages, conversationId } = await req.json(); const result = streamText({ model: anthropic("claude-sonnet-4-20250514"), system: "You are a helpful assistant with access to the user's data.", messages, tools: { getUserProfile: tool({ description: "Get the current user's profile information", parameters: z.object({}), execute: async () => { return await convex.query(api.users.getProfile, { userId }); }, }), searchConversations: tool({ description: "Search the user's past conversations", parameters: z.object({ query: z.string().describe("Search term"), }), execute: async ({ query }) => { return await convex.query(api.conversations.search, { userId, query, }); }, }), }, maxSteps: 5, onFinish: async ({ text }) => { // Save the assistant's response to Convex await convex.mutation(api.messages.create, { conversationId, role: "assistant", content: text, }); }, }); return result.toDataStreamResponse(); } ``` This is a production-ready AI endpoint. Authentication, streaming, tool use, and persistence - all in one file, all fully typed. ## Deployment [Vercel](/tools/vercel) deploys Next.js apps with zero configuration. Push to main, and your app is live. Preview deployments on every PR. Environment variables managed in the dashboard. ```bash # Initial setup npx vercel link vercel env add ANTHROPIC_API_KEY vercel env add CLERK_SECRET_KEY vercel env add NEXT_PUBLIC_CONVEX_URL # Deploy git push origin main # Vercel handles the rest ``` Convex deploys separately but just as simply: ```bash npx convex deploy ``` The Convex deployment is independent of your Vercel deployment. Database schema changes, server functions, and indexes deploy to Convex's infrastructure. Your Next.js app connects to Convex via the URL in your environment variables. ## Cost at Scale One reason this stack works for indie developers and small teams is the cost structure: - **Vercel**: Free tier covers hobby projects. Pro at $20/month for production. - **Convex**: Free tier includes generous usage. Scales with your database size. - **Clerk**: Free for thousands of MAUs. Paid tiers start at $25/month. - **Tailwind**: Open source. Free. - **AI API costs**: This is your real expense. Claude Sonnet runs roughly $3 per million input tokens and $15 per million output tokens. For a typical chat app, that is pennies per conversation. Your total infrastructure cost before AI API usage is effectively zero on free tiers. The only variable cost that scales with users is the LLM inference. This means your margin is almost entirely determined by how much you charge versus how many tokens each user consumes. ## Frequently Asked Questions ### What is the best stack for AI apps? For TypeScript developers, the combination of Next.js, Vercel AI SDK, Convex, and Clerk provides the fastest path from idea to production. Next.js handles the web layer with streaming support. The [AI SDK](/blog/vercel-ai-sdk-guide) provides a unified interface for calling any model provider. Convex gives you a reactive database with real-time subscriptions. Clerk handles authentication. All four are TypeScript-native and have generous free tiers. ### Is Next.js good for AI apps? Yes. Next.js is the leading framework for AI-powered web applications because of three features: Server Components keep AI logic server-side without shipping it to the browser, server actions simplify mutations to simple function calls, and first-class streaming support means model responses flow to the client without custom SSE or WebSocket infrastructure. The App Router architecture maps cleanly to AI application patterns. ### What database should I use for AI apps? [Convex](/tools/convex) is the recommended choice for AI applications because its reactive queries automatically update the UI when data changes. When an AI generates a response and saves it, every connected client sees the update instantly without polling or manual cache invalidation. For simpler needs, Neon (serverless Postgres) or Supabase work well and offer standard SQL with generous free tiers. ### How much does it cost to run an AI app? Infrastructure costs are effectively zero on free tiers (Vercel, Convex, Clerk all offer generous free plans). Your real expense is LLM API usage. Claude Sonnet costs roughly $3 per million input tokens and $15 per million output tokens, which translates to pennies per conversation for a typical chat application. Total cost scales linearly with user activity, making margins almost entirely a function of pricing versus token consumption. ### Do I need a backend framework? No. With Next.js server actions and route handlers, you do not need a separate backend framework like Express or Fastify. Server actions handle mutations as async functions. Route handlers serve your AI streaming endpoints. Convex handles database operations and background jobs. The entire backend runs inside your Next.js application with full TypeScript type safety from database to UI. ## What's Next This stack is a starting point, not a ceiling. From here, common additions include: - **Payments**: Stripe or Autumn for subscription billing and usage-based pricing - **Background jobs**: Convex cron jobs for scheduled AI processing - **MCP servers**: Connect your agent to external services via [Model Context Protocol](/blog/how-to-use-mcp-servers) - **Multi-agent systems**: Spawn specialized sub-agents for complex tasks The foundation does not change. Next.js handles the web layer. The AI SDK handles model interaction. Convex handles data. Clerk handles users. Everything else plugs in around these four pillars. For deeper dives into each piece: the [Vercel AI SDK guide](/blog/vercel-ai-sdk-guide) covers streaming, tools, and structured output in detail. The [Claude Code guide](/blog/what-is-claude-code) shows how to use AI to build with this stack faster. And the [courses](/courses) section has hands-on projects that walk through building complete AI applications from scratch. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Next.js AI Apps Vercel AI SDK Convex Full Stack <![CDATA[OpenAI Codex: Cloud AI Coding With GPT-5.3]]> https://www.developersdigest.tech/blog/openai-codex-guide https://www.developersdigest.tech/blog/openai-codex-guide Thu, 19 Mar 2026 00:00:00 GMT Developers Digest OpenAI Codex GPT-5 TypeScript <![CDATA[OpenAI vs Anthropic in 2026 - Models, Tools, and Developer Experience]]> https://www.developersdigest.tech/blog/openai-vs-anthropic-2026 https://www.developersdigest.tech/blog/openai-vs-anthropic-2026 Thu, 19 Mar 2026 00:00:00 GMT Developers Digest OpenAI Anthropic AI Models Comparison <![CDATA[Prompt Engineering for AI Coding Tools]]> https://www.developersdigest.tech/blog/prompt-engineering-for-coding https://www.developersdigest.tech/blog/prompt-engineering-for-coding Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Prompt Engineering Claude Code AI Tools <![CDATA[Open Source Has a Bot Problem: Prompt Injection in Contributing.md]]> https://www.developersdigest.tech/blog/prompt-injection-open-source https://www.developersdigest.tech/blog/prompt-injection-open-source Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Security Open Source Prompt Injection AI Agents <![CDATA[Vercel AI SDK: Build Streaming AI Apps in TypeScript]]> https://www.developersdigest.tech/blog/vercel-ai-sdk-guide https://www.developersdigest.tech/blog/vercel-ai-sdk-guide {messages.map((m) => (
{m.role}: {m.content}
))}
); } ``` The hook manages message history, loading state, error handling, and abort control. It connects to your `/api/chat` route handler automatically. ## Tool Use Tools let the model call functions you define. The SDK handles the full loop: the model decides to call a tool, your function executes, and the result feeds back into the conversation. ```typescript import { streamText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; const result = streamText({ model: anthropic("claude-sonnet-4-20250514"), prompt: "What is the weather in San Francisco?", tools: { getWeather: tool({ description: "Get the current weather for a location", parameters: z.object({ city: z.string().describe("The city name"), }), execute: async ({ city }) => { // Call your weather API here return { temperature: 62, condition: "Foggy", city }; }, }), }, maxSteps: 5, }); ``` The `parameters` field uses Zod schemas. The SDK converts these to JSON Schema for the model and validates the response before calling `execute`. Type safety flows from the schema definition through to the function arguments. `maxSteps` controls how many tool-call/result rounds the model can perform before returning. Set it to 1 for single-shot tool use, or higher for multi-step reasoning where the model chains multiple tool calls together. Tools work with streaming too. The `useChat` hook on the frontend renders tool invocations and results as part of the message stream, so you can show real-time progress as tools execute. ## Structured Output Sometimes you want the model to return data, not prose. `generateObject` enforces a Zod schema on the output: ```typescript import { generateObject } from "ai"; import { openai } from "@ai-sdk/openai"; import { z } from "zod"; const { object } = await generateObject({ model: openai("gpt-4o"), schema: z.object({ name: z.string(), ingredients: z.array(z.string()), prepTimeMinutes: z.number(), steps: z.array(z.string()), }), prompt: "Generate a recipe for chocolate chip cookies.", }); console.log(object.name); // "Classic Chocolate Chip Cookies" console.log(object.ingredients); // ["2 1/4 cups flour", "1 tsp baking soda", ...] ``` The return type is fully typed. `object.name` is a `string`, `object.ingredients` is `string[]`. No casting, no runtime checks. If the model returns something that does not match the schema, the SDK retries automatically. There is also `streamObject` for streaming structured data as it generates: ```typescript import { streamObject } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; const result = streamObject({ model: anthropic("claude-sonnet-4-20250514"), schema: z.object({ summary: z.string(), keyPoints: z.array(z.string()), sentiment: z.enum(["positive", "negative", "neutral"]), }), prompt: "Analyze this customer review: ...", }); for await (const partial of result.partialObjectStream) { console.log(partial); // { summary: "The cust..." } // { summary: "The customer enjoyed...", keyPoints: ["Fast shipping"] } // ...progressively more complete } ``` Each iteration yields a partial object that grows as the model generates more tokens. This is powerful for UIs where you want to show fields as they appear. ## Multi-Provider Support The SDK supports every major provider through a consistent interface. Install the provider package, import it, and pass the model to any function: ```typescript import { generateText } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { openai } from "@ai-sdk/openai"; import { google } from "@ai-sdk/google"; import { mistral } from "@ai-sdk/mistral"; // Same function signature, different providers const claudeResult = await generateText({ model: anthropic("claude-sonnet-4-20250514"), prompt: "Hello from Claude", }); const gptResult = await generateText({ model: openai("gpt-4o"), prompt: "Hello from GPT", }); const geminiResult = await generateText({ model: google("gemini-2.5-pro"), prompt: "Hello from Gemini", }); const mistralResult = await generateText({ model: mistral("mistral-large-latest"), prompt: "Hello from Mistral", }); ``` Every provider supports the same core functions: `generateText`, `streamText`, `generateObject`, `streamObject`. Tools and structured output work across all of them. The model interface is standardized, so switching providers is a one-line change. For open source models, use the OpenAI-compatible provider pointed at your inference server: ```typescript import { createOpenAI } from "@ai-sdk/openai"; const ollama = createOpenAI({ baseURL: "http://localhost:11434/v1", apiKey: "ollama", }); const result = await generateText({ model: ollama("llama3.1"), prompt: "Running locally with Ollama", }); ``` This works with Ollama, vLLM, LM Studio, or any OpenAI-compatible endpoint. Your application code stays identical regardless of whether the model runs in the cloud or on your machine. ## Putting It All Together Here is a complete Next.js route handler that combines streaming, tools, and multi-step reasoning: ```typescript import { streamText, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; export async function POST(req: Request) { const { messages } = await req.json(); const result = streamText({ model: anthropic("claude-sonnet-4-20250514"), system: "You are a helpful coding assistant. Use tools when needed.", messages, tools: { searchDocs: tool({ description: "Search documentation for a framework or library", parameters: z.object({ query: z.string().describe("The search query"), framework: z.string().describe("The framework name"), }), execute: async ({ query, framework }) => { // Your search implementation return { results: [`${framework}: ${query} - found 3 matches`] }; }, }), runCode: tool({ description: "Execute a TypeScript code snippet", parameters: z.object({ code: z.string().describe("TypeScript code to execute"), }), execute: async ({ code }) => { // Your sandbox execution return { output: "Executed successfully", code }; }, }), }, maxSteps: 10, }); return result.toDataStreamResponse(); } ``` The model can search documentation, run code, and chain those operations together across multiple steps. The frontend receives a single stream with text, tool calls, and tool results interleaved. The `useChat` hook handles all of it. ## Why TypeScript Matters Here The AI SDK is TypeScript-first in a way that actually changes how you build. Zod schemas for tools and structured output mean your AI inputs and outputs have the same type guarantees as the rest of your application. Refactor a tool's parameters and TypeScript catches every call site. Change a structured output schema and the compiler tells you where the UI needs to update. This is the direction AI application development is heading. Not string templates and JSON parsing, but typed interfaces with compile-time safety. ## Start Building Install the SDK and a provider: ```bash npm install ai @ai-sdk/anthropic @ai-sdk/openai zod ``` Set your API key: ```bash export ANTHROPIC_API_KEY="your-key" ``` Run the three-line streaming example from earlier. Then add `useChat` on the frontend. Then add a tool. Each step builds on the last, and the SDK handles the complexity underneath. For a deeper look at AI frameworks and how the AI SDK compares, check out the [frameworks overview on SubAgent](https://subagent.developersdigest.tech/frameworks). ## Frequently Asked Questions ### What is the Vercel AI SDK? The Vercel AI SDK is a TypeScript library for building AI-powered applications. It provides a unified interface for calling language models from multiple providers (Anthropic, OpenAI, Google, Mistral), streaming responses, executing tools, and generating structured output with Zod schema validation. It consists of a core server-side package (`ai`) and frontend hooks (`@ai-sdk/react`). ### Is the AI SDK free? Yes, the AI SDK itself is open source and free to use. You only pay for the underlying model API calls from providers like Anthropic or OpenAI. The SDK does not add any cost on top of your provider usage. Install it with `npm install ai` and the provider package for your model of choice. ### Does the AI SDK work with Claude? Yes. Install the `@ai-sdk/anthropic` provider package and pass `anthropic("claude-sonnet-4-20250514")` or any other Claude model to any SDK function. The SDK supports all Claude features including streaming, tool use, structured output, and multi-step reasoning via `maxSteps`. ### What is the difference between AI SDK and LangChain? The AI SDK is focused on TypeScript-first model interaction with strong typing, streaming primitives, and React hooks for building UIs. LangChain is a broader framework with chains, memory, and retrieval abstractions. The AI SDK is lighter and more composable for web applications, while LangChain provides more pre-built patterns for complex [agent architectures](/blog/ai-agents-explained). Many developers use the AI SDK for application-layer code and LangChain for backend orchestration. ### How do I add streaming to my Next.js app? Create a route handler that calls `streamText()` and returns `result.toDataStreamResponse()`. On the frontend, use the `useChat` hook from `@ai-sdk/react`, which handles message state, streaming display, and error handling automatically. The hook connects to your route handler and renders tokens as they arrive. See the [Next.js AI App Stack guide](/blog/nextjs-ai-app-stack-2026) for the complete setup. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Vercel AI SDK TypeScript Next.js Streaming <![CDATA[Vibe Coding - The Complete Guide to Building with AI]]> https://www.developersdigest.tech/blog/vibe-coding-guide https://www.developersdigest.tech/blog/vibe-coding-guide Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Vibe Coding AI Tools Claude Code Cursor <![CDATA[I Built a Web Dev Arena to Test AI Coding Models Side by Side]]> https://www.developersdigest.tech/blog/web-dev-arena https://www.developersdigest.tech/blog/web-dev-arena Thu, 19 Mar 2026 00:00:00 GMT Developers Digest AI Coding Benchmarks Cursor Model Comparison <![CDATA[What Is Claude Code? The Complete Guide for 2026]]> https://www.developersdigest.tech/blog/what-is-claude-code https://www.developersdigest.tech/blog/what-is-claude-code Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Claude Code Anthropic AI Coding TypeScript <![CDATA[What Is MCP (Model Context Protocol)? A TypeScript Developer's Guide]]> https://www.developersdigest.tech/blog/what-is-mcp https://www.developersdigest.tech/blog/what-is-mcp { const response = await fetch( `https://api.weatherapi.com/v1/current.json?key=${process.env.API_KEY}&q=${city}` ); const data = await response.json(); return { content: [ { type: "text", text: `${data.location.name}: ${data.current.temp_c}°C, ${data.current.condition.text}`, }, ], }; } ); const transport = new StdioServerTransport(); await server.connect(transport); ``` That is a complete, working MCP server. The `server.tool()` call registers the tool with a name, description, Zod schema for input validation, and a handler function. The transport layer handles communication. Run it, and any MCP client can discover and call `get-weather`. ### Building an MCP Client Connecting to an MCP server from your own application: ```typescript import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js"; const transport = new StdioClientTransport({ command: "node", args: ["./weather-server.js"], }); const client = new Client({ name: "my-app", version: "1.0.0", }); await client.connect(transport); // List available tools const { tools } = await client.listTools(); console.log("Available tools:", tools.map((t) => t.name)); // Call a tool const result = await client.callTool({ name: "get-weather", arguments: { city: "Toronto" }, }); console.log(result.content); ``` The client spawns the server as a child process, connects over stdio, discovers available tools, and calls them with typed arguments. Clean and predictable. ## Real MCP Servers You Can Use Today The ecosystem already has production-ready servers for common integrations. Here are a few that matter: **Filesystem** - Read, write, search, and manage files. Your AI agent gets access to project directories with configurable permissions. ```json { "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"] } } } ``` **GitHub** - Create issues, open PRs, search repos, manage branches. Uses your GitHub token for authentication. ```json { "mcpServers": { "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..." } } } } ``` **Postgres** - Query your database directly. The AI can inspect schemas, run SELECT queries, and analyze data. ```json { "mcpServers": { "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost/mydb"] } } } ``` These servers drop into any MCP-compatible client. Claude Desktop, [Claude Code](/blog/what-is-claude-code), Cursor, Windsurf, and others all support the same configuration format. ## Building Your Own MCP Server The real power is building servers tailored to your stack. Here is a more complete example: an MCP server that wraps your application's API. ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { z } from "zod"; const server = new McpServer({ name: "app-api-server", version: "1.0.0", }); // Expose a tool for searching users server.tool( "search-users", "Search users by name or email", { query: z.string().describe("Search term"), limit: z.number().optional().default(10).describe("Max results"), }, async ({ query, limit }) => { const res = await fetch( `${process.env.API_URL}/users?q=${encodeURIComponent(query)}&limit=${limit}`, { headers: { Authorization: `Bearer ${process.env.API_TOKEN}` } } ); const users = await res.json(); return { content: [ { type: "text", text: JSON.stringify(users, null, 2), }, ], }; } ); // Expose a resource for reading app config server.resource( "app-config", "config://app", async (uri) => { const config = await fetch(`${process.env.API_URL}/config`); const data = await config.json(); return { contents: [ { uri: uri.href, mimeType: "application/json", text: JSON.stringify(data, null, 2), }, ], }; } ); const transport = new StdioServerTransport(); await server.connect(transport); ``` This server exposes both a tool (search users) and a resource (app config). Your AI agent can now search your user base and read your app configuration, all through MCP. ## Where MCP Fits in Your Architecture MCP sits between your AI model and your infrastructure. It does not replace your API layer. It wraps it. Your existing REST endpoints, database connections, and file systems stay exactly where they are. MCP just gives your AI a standardized way to reach them. For TypeScript developers, the pattern looks like this: 1. **Identify what your agent needs access to.** Database? File system? Internal APIs? Third-party services? 2. **Pick existing MCP servers where available.** Filesystem, GitHub, Postgres, Slack, and dozens more are already built. 3. **Build custom servers for your domain logic.** Wrap your internal APIs. Expose your business-specific tools. 4. **Wire them into your MCP client.** Claude Desktop, Claude Code, or your own application. The protocol handles discovery, authentication, error handling, and message formatting. You focus on what the tools do, not how they communicate. ## What to Build Next If you are working with AI agents in TypeScript, MCP is worth adopting now. The ecosystem is growing fast. Anthropic, OpenAI, Google, and Microsoft all support it. The TypeScript SDK is well-maintained and the API is stable. Start with the official servers. Add filesystem and GitHub access to your Claude setup. Then build a custom server for your most common workflow. Once you see an AI agent calling your own tools through a clean protocol, the value becomes obvious. For a broader look at the tools that support MCP, see our roundup of the [best AI coding tools in 2026](/blog/best-ai-coding-tools-2026). For a hands-on, interactive breakdown of MCP and how to build with it, check out the full course at [subagent.developersdigest.tech/mcp](https://subagent.developersdigest.tech/mcp). ## Frequently Asked Questions ### What is MCP in AI? MCP (Model Context Protocol) is an open protocol created by Anthropic that standardizes how AI models connect to external data sources and tools. It defines a client-server architecture where AI applications (clients) communicate with tool providers (servers) using a common interface, eliminating the need for custom integration code for each tool. ### What tools support MCP? MCP is supported by [Claude Code](/blog/what-is-claude-code), Claude Desktop, [Cursor](/tools/cursor), Windsurf, and a growing number of AI coding tools and agent frameworks. The [Vercel AI SDK](/blog/vercel-ai-sdk-guide) also supports MCP tool integration. Any application that implements the MCP client protocol can connect to any MCP server. ### How do I configure MCP servers? MCP servers are configured in a JSON settings file. For Claude Code, add server entries to `.claude/settings.json` in your project directory. For Cursor, use `~/.cursor/mcp.json`. Each entry specifies a command to run, arguments, and optional environment variables for API keys. Use the [MCP Config Generator](/mcp-config) to build your configuration interactively. ### Is MCP open source? Yes. MCP is an open protocol with an open-source specification and open-source SDKs. The official TypeScript SDK (`@modelcontextprotocol/sdk`) and many community-built MCP servers are available on GitHub. Anyone can build MCP clients and servers without licensing restrictions. ### What is the difference between MCP and function calling? Function calling is a model-level feature where the AI decides to invoke a function you defined in your prompt. MCP is a protocol layer that standardizes how those functions are discovered, described, and executed across different tools and models. MCP servers expose tools that any compatible client can use, while function calling is specific to a single API call. MCP builds on top of function calling to create a reusable, interoperable tool ecosystem. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest MCP Model Context Protocol TypeScript AI Agents <![CDATA[What is RAG? Retrieval Augmented Generation Explained]]> https://www.developersdigest.tech/blog/what-is-rag https://www.developersdigest.tech/blog/what-is-rag c.text), }); // Store chunks + embeddings in your vector database await vectorStore.upsert( chunks.map((chunk, i) => ({ id: chunk.id, text: chunk.text, embedding: embeddings[i], metadata: { source: chunk.source, section: chunk.section }, })) ); ``` ### Step 2: Retrieve When a user asks a question, you embed their query and search for the most similar document chunks. This is called similarity search, and it is the core of what makes RAG work. Chunks that are semantically close to the question score high. Chunks that are unrelated score low. ```typescript // Embed the user's query const { embedding: queryEmbedding } = await embed({ model: embeddingModel, value: "How do I configure authentication?", }); // Find the top 5 most relevant chunks const results = await vectorStore.search(queryEmbedding, { topK: 5, filter: { source: "documentation" }, }); ``` The `topK` parameter controls how many chunks you retrieve. More chunks means more context for the model, but also more tokens and higher latency. Five to ten chunks is a good starting point for most use cases. ### Step 3: Generate Pass the retrieved chunks to the LLM along with the user's question. The model generates a response grounded in the provided context instead of relying solely on its training data. ```typescript import { generateText } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; const context = results .map((r) => `[Source: ${r.metadata.source}]\n${r.text}`) .join("\n\n"); const { text } = await generateText({ model: anthropic("claude-sonnet-4-6"), system: `You are a helpful assistant. Answer questions based on the provided context. If the context does not contain enough information to answer, say so. Do not make up information that is not in the context.`, prompt: `Context:\n${context}\n\nQuestion: How do I configure authentication?`, }); ``` That is the entire pipeline. Embed your docs, search for relevant chunks, feed them to the model. Everything else in RAG is an optimization on top of these three steps. ## When to Use RAG vs Fine-Tuning vs Prompt Engineering Three approaches exist for getting AI models to use specific knowledge. Each has different tradeoffs. | Approach | Best For | Cost | Latency | Data Freshness | |----------|----------|------|---------|----------------| | **RAG** | Dynamic knowledge bases, large document sets, data that changes | Low | Medium | Real-time | | **Fine-tuning** | Changing model behavior, style, or domain-specific reasoning | High | Low | Frozen snapshot | | **Prompt engineering** | Small context, task instructions, formatting rules | Free | Low | Per-request | **Use RAG** when you have a large corpus of documents that changes over time. Product docs, knowledge bases, legal documents, research papers. The data is too large to fit in a single prompt, and it updates frequently enough that fine-tuning would be stale within weeks. **Use fine-tuning** when you need the model to behave differently, not just know different things. If you want it to write in a specific voice, follow domain conventions, or handle a specialized format, fine-tuning changes the model itself. But it is expensive, slow, and produces a snapshot that does not update. **Use prompt engineering** when the context fits in the prompt. If your entire knowledge base is a few pages of instructions, just put it in the system prompt. No infrastructure needed. In practice, most production systems combine all three. Prompt engineering for behavior instructions, RAG for dynamic knowledge, and occasionally fine-tuning for domain adaptation. ## Building a Complete RAG Pipeline in TypeScript Here is a production-ready RAG implementation using the [Vercel AI SDK](/blog/vercel-ai-sdk-guide) with a vector store. This example uses Supabase with pgvector, but the pattern works with any vector database. ```typescript import { generateText, embed, embedMany, tool } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { openai } from "@ai-sdk/openai"; import { createClient } from "@supabase/supabase-js"; import { z } from "zod"; const supabase = createClient( process.env.SUPABASE_URL!, process.env.SUPABASE_KEY! ); const embeddingModel = openai.embedding("text-embedding-3-small"); // --- Ingestion: run once when documents change --- async function ingestDocuments(docs: { id: string; text: string; source: string }[]) { const chunks = docs.flatMap((doc) => splitIntoChunks(doc.text, { maxTokens: 512 }).map((chunk, i) => ({ id: `${doc.id}-${i}`, text: chunk, source: doc.source, })) ); const { embeddings } = await embedMany({ model: embeddingModel, values: chunks.map((c) => c.text), }); const rows = chunks.map((chunk, i) => ({ id: chunk.id, content: chunk.text, embedding: embeddings[i], metadata: { source: chunk.source }, })); await supabase.from("documents").upsert(rows); } // --- Query: run on every user request --- async function queryRAG(question: string): Promise { // 1. Embed the question const { embedding } = await embed({ model: embeddingModel, value: question, }); // 2. Retrieve relevant chunks const { data: chunks } = await supabase.rpc("match_documents", { query_embedding: embedding, match_threshold: 0.7, match_count: 5, }); if (!chunks || chunks.length === 0) { return "I could not find any relevant information to answer that question."; } // 3. Generate a grounded response const context = chunks .map((c: any) => c.content) .join("\n\n---\n\n"); const { text } = await generateText({ model: anthropic("claude-sonnet-4-6"), system: `Answer the user's question based only on the provided context. Cite which section the information comes from when possible. If the context does not contain the answer, say so clearly.`, prompt: `Context:\n${context}\n\nQuestion: ${question}`, }); return text; } ``` The `match_documents` function is a Postgres function that performs cosine similarity search using pgvector. You create it once in your database: ```sql create or replace function match_documents( query_embedding vector(1536), match_threshold float, match_count int ) returns table ( id text, content text, metadata jsonb, similarity float ) language sql stable as $$ select id, content, metadata, 1 - (embedding <=> query_embedding) as similarity from documents where 1 - (embedding <=> query_embedding) > match_threshold order by embedding <=> query_embedding limit match_count; $$; ``` ## Vector Databases for RAG Your vector database is the retrieval engine. The choice matters less than you think for getting started, but it matters a lot at scale. **[Supabase pgvector](https://supabase.com/docs/guides/ai)** is the easiest path if you already use Postgres. Add the pgvector extension, create an embedding column, and query with cosine similarity. No new infrastructure. Works well up to a few million vectors. **[Pinecone](https://www.pinecone.io/)** is a managed vector database built for this use case. Handles billions of vectors, supports metadata filtering, and scales without you thinking about it. Good for production workloads where you do not want to manage infrastructure. **[Convex vector search](https://docs.convex.dev/vector-search)** integrates vector search directly into your Convex backend. If you are already using [Convex](/tools/convex) for your app, this keeps everything in one place. Define a vector index on a table and query it with a single function call. **[Weaviate](https://weaviate.io/)** is an open-source vector database with built-in vectorization. You can send it raw text and it handles the embedding step for you. Useful if you want the database to manage the embedding pipeline. For most TypeScript projects, start with pgvector or Convex. You can always migrate to a dedicated vector database later if you outgrow it. ## RAG as an Agent Tool RAG gets more powerful when you combine it with [AI agents](/blog/ai-agents-explained). Instead of a fixed retrieve-then-generate pipeline, you give the agent a search tool and let it decide when and how to use it. ```typescript import { generateText, tool, embed } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; import { z } from "zod"; const { text } = await generateText({ model: anthropic("claude-sonnet-4-6"), maxSteps: 5, system: "You are a helpful assistant with access to a knowledge base. Search it when you need information to answer the user's question.", tools: { searchKnowledgeBase: tool({ description: "Search the knowledge base for relevant information", parameters: z.object({ query: z.string().describe("Search query"), filter: z .enum(["docs", "api-reference", "tutorials", "all"]) .describe("Category to search in") .default("all"), }), execute: async ({ query, filter }) => { const { embedding } = await embed({ model: openai.embedding("text-embedding-3-small"), value: query, }); const { data } = await supabase.rpc("match_documents", { query_embedding: embedding, match_threshold: 0.7, match_count: 5, }); return data?.map((d: any) => d.content) ?? []; }, }), }, prompt: userQuestion, }); ``` With `maxSteps: 5`, the model can search multiple times with different queries, refine its search based on initial results, and then synthesize a comprehensive answer. This is significantly more capable than a single-shot retrieve-and-generate pipeline because the model can reason about what information it still needs. ## Common RAG Pitfalls RAG looks simple in diagrams but has real failure modes in production. Here are the ones that bite most teams. ### Chunk Size If your chunks are too large, the retrieved context contains too much noise. The relevant sentence gets buried in paragraphs of unrelated text, and the model either misses it or gets confused by contradictory information. If chunks are too small, they lack the surrounding context needed to be useful. A sentence fragment about "the configuration file" is meaningless without knowing which configuration file. Start with 300 to 500 tokens per chunk. Overlap consecutive chunks by 50 to 100 tokens so you do not split a concept across two chunks. Adjust based on your data. Technical documentation with dense information benefits from smaller chunks. Narrative content works better with larger ones. ### Missing Metadata Filtering Similarity search alone is not enough. If you have documentation for multiple products or API versions, a query about "authentication" will return chunks from every product. Attach metadata to every chunk: product, version, date, section. Filter before or during similarity search. ```typescript const results = await vectorStore.search(embedding, { topK: 5, filter: { product: "my-api", version: "v3", }, }); ``` This is the difference between a RAG system that kind of works and one that gives accurate answers. ### Not Handling Empty Results When no chunks pass the similarity threshold, your system needs to say "I do not know" instead of hallucinating. Set a minimum similarity score and handle the case where nothing matches. ```typescript const relevantChunks = results.filter((r) => r.similarity > 0.7); if (relevantChunks.length === 0) { return "I could not find relevant information to answer that question. Try rephrasing or ask about a different topic."; } ``` Never pass an empty context to the model and hope for the best. The model will generate a plausible-sounding answer from its training data, and the user will think it came from your knowledge base. ### Over-Relying on Similarity Scores Cosine similarity measures how close two vectors are in embedding space. It does not measure whether a chunk actually answers the question. A chunk about "how to configure authentication in Django" will score high for "how to configure authentication in Express" because the embeddings are semantically close. But the content is wrong for the user's stack. Combine similarity search with keyword matching (hybrid search), metadata filtering, and a reranking step if accuracy matters. Some vector databases support hybrid search natively. For others, you can implement it in your retrieval function by merging results from vector search and full-text search. ### Stale Embeddings If your documents change but your embeddings do not, the model answers questions using outdated information. Build an ingestion pipeline that re-embeds documents when they change. Track document versions and only re-embed modified chunks. This is unglamorous infrastructure work, but it determines whether your RAG system stays accurate over time. ## What to Build Next RAG is the foundation. Once you have the basic pipeline working, you can layer on more sophisticated techniques: reranking retrieved chunks for better precision, using hybrid search that combines vector similarity with keyword matching, or building [agentic RAG](/blog/how-to-build-ai-agents-typescript) where the model iteratively searches and refines its results. For the SDK used in this guide, see the full [Vercel AI SDK guide](/blog/vercel-ai-sdk-guide). For vector storage that integrates with a reactive backend, check out [Convex](/tools/convex). And for building autonomous agents that use RAG as one of many tools, read [How to Build AI Agents in TypeScript](/blog/how-to-build-ai-agents-typescript). Start with a small document set, 10 to 20 pages of your own docs or a project README. Get the pipeline running end to end. Then scale from there. You will learn more about RAG's tradeoffs by building a working system than by reading about architectures you will never implement. ]]> Thu, 19 Mar 2026 00:00:00 GMT Developers Digest RAG AI TypeScript Vercel AI SDK <![CDATA[Windsurf vs Cursor: Which AI IDE for TypeScript Developers?]]> https://www.developersdigest.tech/blog/windsurf-vs-cursor https://www.developersdigest.tech/blog/windsurf-vs-cursor Thu, 19 Mar 2026 00:00:00 GMT Developers Digest Windsurf Cursor AI IDE TypeScript Comparison <![CDATA[NVIDIA's Nemotron 3 Super in 6 Minutes]]> https://www.developersdigest.tech/blog/nemotron-3-super https://www.developersdigest.tech/blog/nemotron-3-super Fri, 13 Mar 2026 00:00:00 GMT Developers Digest NVIDIA Nemotron MoE Mamba Open Source AI Models <![CDATA[CLIs Over MCPs: Why the Best AI Agent Tools Already Exist]]> https://www.developersdigest.tech/blog/clis-over-mcps https://www.developersdigest.tech/blog/clis-over-mcps [options] Commands: search Search notes by content or title read Read a note by path create Create a new note list List notes in a folder tags List all tags ``` An AI agent reads that output and immediately knows every capability, every flag, every argument. No schema files. No protocol negotiation. No server discovery. One command, full understanding. This is the part that matters most: CLIs are a universal interface. Humans use them. Scripts use them. AI agents use them. The same tool serves all three audiences with zero adaptation. When Obsidian released their CLI, it didn't just help developers. It made every AI coding harness on the planet capable of managing Obsidian vaults. When Google shipped a Workspace CLI, every agent gained the ability to create docs, manage sheets, and send emails. MCPs require agent-specific integration. You build an MCP server, and it works with Claude. Maybe Cursor. Maybe a handful of others. A CLI works with everything. ## CLI + Harness + Skills: The Real Power Combo A CLI alone is just a tool. The magic happens when you combine three things: 1. **A CLI** that does one thing well 2. **A harness** (Claude Code, Codex, OpenClaw) that orchestrates tool use 3. **Skills** that tell the agent when and how to use each tool ```markdown # .claude/skills/vault-management.md When working with Obsidian notes: - Use `obsidian search` to find relevant notes before creating new ones - Use `obsidian read` to check existing content - Use `obsidian create` with proper frontmatter - Always use wikilinks for cross-references ``` The skill file is plain markdown. The CLI is a standard binary. The harness reads the skill, discovers the CLI via `--help`, and chains operations together. No protocol overhead. No server management. No authentication handshakes. This combination lets you do things MCPs cannot. Write the search results to a file. Pipe one CLI's output into another. Use `xargs` to parallelize operations. Compose tools with standard Unix patterns that have been refined for decades. ```bash # Find all TODO comments, extract file paths, run tests for those files grep -rn "TODO" ./src --include="*.ts" -l | xargs -I {} dirname {} | sort -u | xargs -I {} npm test -- --testPathPattern={} ``` Try expressing that in MCP calls. You can't, not cleanly. CLIs compose. MCPs don't. ## Where MCPs Still Make Sense MCPs aren't useless. They solve real problems in specific areas: **Authentication flows.** OAuth, API keys, token refresh. CLIs can handle auth, but MCP's standardized protocol makes multi-service auth cleaner when you need it. **Tool discovery.** "What tools does this server offer?" MCP's schema-based discovery is elegant. CLIs require the agent to know the tool exists and run `--help`. **Structured context loading.** When you need to tell an agent about available capabilities in a standardized format, MCP's tool descriptions work well. But these are complementary features, not primary interfaces. Use MCPs for auth and discovery. Use CLIs for the actual work. ## The Evidence is Everywhere The trend is accelerating. Every major tool release in 2025 and 2026 points the same direction: **OpenClaw** (247K stars): CLI-first, zero MCPs. The most popular open-source project on GitHub chose the command line as its agent interface. **[Claude Code](/tools/claude-code)**: Anthropic's own coding agent is a CLI. Not a web app. Not an MCP server. A CLI you install with `npm` and run in your terminal. **Codex CLI**: OpenAI built their coding agent as a CLI too. Two competing companies, same architectural choice. **Obsidian CLI**: Millions of impressions on social when it launched. Developers immediately started wiring it into their agent workflows. **Google Workspace CLI**: Same story. Millions of views. Instant adoption by agent harnesses everywhere. The pattern is clear. The companies building the most successful AI tools aren't inventing new protocols. They're shipping CLIs. ## Build for the Interface That Already Exists If you're building a tool and wondering whether to create an MCP server or a CLI: build the CLI. Your tool will work with every agent harness that exists today and every one that will exist tomorrow. It will work for humans who prefer the terminal. It will compose with other tools via pipes and subshells. It will be testable, scriptable, and debuggable with standard Unix tools. MCPs are a layer you can add later if you need structured discovery or auth flows. But the CLI is the foundation. The best AI agent tools aren't the ones we're inventing. They're the ones that have been sitting in our PATH for years. `grep`, `git`, `curl`, `jq`. Every CLI you've ever installed. The agent revolution doesn't need a new protocol. It needs access to what already works. Run `--help`. That's the whole API. ]]> Mon, 09 Mar 2026 00:00:00 GMT Developers Digest CLI MCP AI Agents Developer Tools Hot Take <![CDATA[Getting Started with DevDigest CLI]]> https://www.developersdigest.tech/guides/getting-started https://www.developersdigest.tech/guides/getting-started You are working on a Next.js 16 project scaffolded with the DevDigest CLI. Read the CLAUDE.md file for full stack details. The project uses Convex for the backend, Clerk for auth, and Autumn for billing. All environment variables are listed in .env.example. ]]> Sun, 08 Mar 2026 00:00:00 GMT Developers Digest getting-started Guide <![CDATA[Claude Code Setup Guide]]> https://www.developersdigest.tech/guides/claude-code-setup https://www.developersdigest.tech/guides/claude-code-setup **Prerequisites:** Node.js 18+, a terminal (macOS/Linux/WSL), and an Anthropic subscription (Pro $20/mo or Max $200/mo). Familiarity with the command line is assumed. Claude Code is a terminal-based AI coding agent from Anthropic. It reads your codebase, edits files, runs tests, and commits -- all autonomously. ## Install ```bash npm install -g @anthropic-ai/claude-code ``` ## CLAUDE.md -- Your project's AI brain Create a `CLAUDE.md` in your project root. This file tells Claude Code about your project: ```markdown # My Project ## Stack Next.js 16 + Convex + Clerk + Tailwind CSS v4 ## Key Directories - src/app/ -- Pages and layouts - src/components/ -- React components - convex/ -- Backend functions ## Commands - npm run dev -- Start dev server - npx convex dev -- Start backend ``` ## Agent prompt Copy this prompt to get started: > Read the CLAUDE.md file and understand the project structure. You are an expert in the stack described. Follow the conventions in CLAUDE.md for all code changes. ## MCP Servers Connect external tools to Claude Code via MCP: ```json { "mcpServers": { "devdigest": { "command": "dd", "args": ["mcp"] } } } ``` ## Sub-agents Claude Code can spawn sub-agents for parallel work: ``` Use the Task tool to spawn agents for: - Research tasks - Independent file edits - Running tests in parallel ``` ## Tips - Keep CLAUDE.md under 200 lines -- concise beats comprehensive - Use memory files in `.claude/` for session-specific context - Run `claude --dangerously-skip-permissions` for fully autonomous mode (use with caution) ]]> Sun, 08 Mar 2026 00:00:00 GMT Developers Digest ai-agents Guide <![CDATA[MCP Servers Explained]]> https://www.developersdigest.tech/guides/mcp-servers https://www.developersdigest.tech/guides/mcp-servers **Prerequisites:** Node.js 18+, an AI coding tool that supports MCP (Claude Code, Cursor, or Windsurf), and basic TypeScript/JavaScript knowledge. MCP (Model Context Protocol) lets AI tools connect to external services. Think of it as USB ports for AI -- plug in any tool and your AI agent can use it. ## How it works 1. An MCP server exposes **tools** (functions the AI can call) 2. Your AI client (Claude Code, Cursor, etc.) connects to the server 3. The AI can now call those tools as part of its workflow ## Example: DevDigest MCP Server The `dd mcp` command starts an MCP server with these tools: - `init_project` -- Scaffold a new project - `list_commands` -- Show available commands ## Add to Claude Code In your project's `.mcp.json`: ```json { "mcpServers": { "devdigest": { "command": "dd", "args": ["mcp"] } } } ``` ## Build your own MCP server ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { z } from "zod"; const server = new McpServer({ name: "my-server", version: "1.0.0", }); server.tool( "hello", "Say hello", { name: z.string() }, async ({ name }) => ({ content: [{ type: "text", text: `Hello, ${name}!` }], }) ); const transport = new StdioServerTransport(); await server.connect(transport); ``` ## Agent prompt Copy this to give your AI agent MCP context: > This project uses MCP servers for external tool integration. Check .mcp.json for available servers. You can call MCP tools directly -- they appear as regular tools in your tool list. ]]> Sun, 08 Mar 2026 00:00:00 GMT Developers Digest ai-agents Guide <![CDATA[Claude Code Loops: Recurring Prompts That Actually Run]]> https://www.developersdigest.tech/blog/claude-code-loops https://www.developersdigest.tech/blog/claude-code-loops ]]> Sat, 07 Mar 2026 00:00:00 GMT Developers Digest Claude Code Automation Loops Cron AI Agents <![CDATA[OpenAI's GPT 5.4 in 10 Minutes]]> https://www.developersdigest.tech/blog/gpt-5-4 https://www.developersdigest.tech/blog/gpt-5-4 ]]> Fri, 06 Mar 2026 00:00:00 GMT Developers Digest OpenAI GPT AI Coding Agents <![CDATA[Claude Code: Remote Control, Auto Memory, Plugins & More]]> https://www.developersdigest.tech/blog/claude-code-remote-control https://www.developersdigest.tech/blog/claude-code-remote-control ]]> Sat, 28 Feb 2026 00:00:00 GMT Developers Digest Claude Code Cowork AI Agents Plugins Automation <![CDATA[Mercury 2: The LLM That Doesn't Generate Like an LLM]]> https://www.developersdigest.tech/blog/mercury-2-diffusion-llm https://www.developersdigest.tech/blog/mercury-2-diffusion-llm ]]> Tue, 24 Feb 2026 00:00:00 GMT Developers Digest AI LLM Mercury Diffusion Inception Labs <![CDATA[Claude Code Worktrees: Parallel Development Without the Chaos]]> https://www.developersdigest.tech/blog/claude-code-worktrees https://www.developersdigest.tech/blog/claude-code-worktrees A specialized front-end developer agent. Invoked automatically when UI, CSS, or component work is needed. model: claude-haiku-4-5 tools: - Read - Write - Edit - Bash isolation: worktree: true --- You are a senior front-end developer specializing in modern UI implementation. Focus on clean, semantic HTML, maintainable CSS, and accessible component design. ... ``` The `isolation.worktree: true` frontmatter is the key part. Every time this agent spins up, it automatically gets its own worktree. The behavior is baked into the definition - you don't have to remember to set it each time. Sub-agent files can live globally (`~/.claude/agents/`) for use across all projects, or locally in the project's `.claude/agents/` folder for project-specific agents. You can also scope which tools each agent has access to. If you want an agent that can only read and write files but can't run shell commands, whitelist exactly that. Tight, predictable agent behavior by default. ![Sub-agent configuration file with worktree isolation frontmatter](/images/blog/claude-code-worktrees/agent-config.webp) ## Three Ways to Use Worktrees in Claude Code Anthropic gave you three distinct entry points: **1. CLI flag (manual)** - Open Claude Code in a directory, pass the worktree flag. Useful for one-off sessions or when you want explicit control over which branch you're working on. **2. Dynamic sub-agents (in-session)** - Ask Claude to spawn agents with worktree isolation from within a session. Best for exploratory work where you're discovering requirements as you go. **3. Agent frontmatter (persistent config)** - Define the agent once in `.claude/agents/`, set `isolation.worktree: true`. Every invocation of that agent gets isolation automatically. Best for recurring workflows. ## The Use Cases Worth Actually Using **Exploring architecture directions.** You're considering two ways to restructure a module. Spawn two agents, let both take a full run at it, compare the results. Code is cheap to write. Exploration is expensive when you have to do it sequentially. Do it in parallel instead. **UI variation testing.** Different copy, different layouts, different visual treatments. Spin up N agents, have each produce a variation, review the outputs side-by-side. No manual branch management. No "let me undo this and try something else." **Parallel feature development.** Independent features on the same codebase. Two agents, two branches, no coordination overhead between them. When both are done, you merge clean branches - not a tangle of conflicting edits. **Safe experimentation on production code.** Main branch never gets touched. Every agent works in isolation. If an agent goes sideways, delete the branch. Nothing in main is at risk. The underlying principle: when work is independent, it should run in parallel. Worktrees make that structurally sound instead of just hoped-for. ![Worktree use cases: architecture exploration, UI variations, parallel features, safe experimentation](/images/blog/claude-code-worktrees/use-cases.webp) ## The Bigger Picture This feature is available in three places now: the Claude desktop app (been there for a few weeks), the CLI with direct flags, and the new agent frontmatter config. Anthropic is clearly committing to this as a first-class primitive. The pattern it enables - one repository, many parallel agents, each isolated, all collaborative - is how agentic development at scale has to work. You can't have ten agents fighting over the same working directory. Worktrees solve that problem at the git level, which is exactly where it belongs. The agents are cheap to spawn. The branches are cheap to create. The exploration cost drops dramatically. What's expensive is your attention at the end: reviewing what the agents built and deciding what to keep. That's a much better tradeoff than sequential, single-threaded development. --- - [Claude Code Worktrees in 7 Minutes](https://youtube.com/watch?v=z_VI51k-tn0) - live demo with sub-agents and agent config **Official docs:** - [Claude Code Documentation](https://docs.anthropic.com/claude/docs/claude-code) - Anthropic's official Claude Code docs - [Git Worktrees](https://git-scm.com/docs/git-worktree) - the underlying git primitive --- *This article is based on a [Developers Digest video](https://youtube.com/watch?v=z_VI51k-tn0). All feature behavior is based on direct testing with Claude Code at time of publication.* --- **Further Reading:** - [Anthropic: Introducing Claude Code](https://www.anthropic.com/claude-code) - official announcement and feature overview - [Git Worktree Documentation](https://git-scm.com/docs/git-worktree) - full reference for the underlying git feature - [Claude Code Sub-Agents Guide](https://docs.anthropic.com/claude/docs/claude-code-sub-agents) - how to configure and deploy sub-agents - [Claude Skills Documentation](https://docs.anthropic.com/claude/docs/claude-code-skills) - related primitive for reusable agent behaviors --- ## Watch the Video ]]> Sat, 21 Feb 2026 00:00:00 GMT Developers Digest Claude Code Git Worktrees AI Agents <![CDATA[Claude Sonnet 4.6: Approaching Opus at Half the Cost]]> https://www.developersdigest.tech/blog/claude-sonnet-4-6 https://www.developersdigest.tech/blog/claude-sonnet-4-6 ]]> Thu, 19 Feb 2026 00:00:00 GMT Developers Digest Claude Sonnet AI Anthropic Benchmarks <![CDATA[Claude Opus 4.6: Anthropic's Smartest Model Gets Agent Teams]]> https://www.developersdigest.tech/blog/claude-opus-4-6 https://www.developersdigest.tech/blog/claude-opus-4-6 ]]> Mon, 09 Feb 2026 00:00:00 GMT Developers Digest Claude Opus AI Anthropic Agent Teams <![CDATA[Why Claude Code Won: Unix Philosophy Meets AI Agents]]> https://www.developersdigest.tech/blog/why-claude-code-popular https://www.developersdigest.tech/blog/why-claude-code-popular ]]> Mon, 19 Jan 2026 00:00:00 GMT Developers Digest Claude Code Unix AI Developer Tools <![CDATA[Cowork: Claude Code for Everyone, Not Just Developers]]> https://www.developersdigest.tech/blog/anthropic-cowork https://www.developersdigest.tech/blog/anthropic-cowork ## Further Reading - **[Anthropic's Cowork Announcement](https://www.anthropic.com/news/cowork)** - Official product details and feature overview - **[Claude Code Documentation](https://claude.ai/docs)** - Deep dive into Claude Code capabilities and MCP servers - **[Building Skills in Cowork](https://www.anthropic.com/docs/cowork/skills)** - How to create and refine skills for repeated tasks ]]> Tue, 13 Jan 2026 00:00:00 GMT Developers Digest Claude Code Cowork AI Anthropic Productivity <![CDATA[Progressive Disclosure: How Claude Code Cut Token Usage by 98%]]> https://www.developersdigest.tech/blog/progressive-disclosure-claude-code https://www.developersdigest.tech/blog/progressive-disclosure-claude-code ]]> Mon, 12 Jan 2026 00:00:00 GMT Developers Digest Claude Code Architecture AI Token Optimization <![CDATA[Self-Improving Skills: Claude Code That Learns From Every Session]]> https://www.developersdigest.tech/blog/self-improving-skills-claude-code https://www.developersdigest.tech/blog/self-improving-skills-claude-code ]]> Mon, 05 Jan 2026 00:00:00 GMT Developers Digest Claude Code Skills AI Continual Learning <![CDATA[Interview Mode: Let Claude Code Ask the Questions First]]> https://www.developersdigest.tech/blog/claude-code-interview-mode https://www.developersdigest.tech/blog/claude-code-interview-mode "Read the spec.md and interview me using the Ask User Question tool about technical implementation, UI and UX concerns, trade-offs. Make sure questions aren't obvious. Be in-depth and continue until complete. Then write the spec to the file." Claude asks. You answer. It synthesizes into a formal spec. No code yet. This is not a replacement for Plan Mode (which you should still use). Think of interview mode as the *precursor* to planning - nail requirements first, then plan implementation. ![Screenshot of Ask User Question tool in Claude Code with multi-choice options](/images/blog/claude-code-interview-mode/ask-user-tool.webp) ## Why This Actually Saves Time Counterintuitive: slowing down speeds you up. The longer you spend planning, the less time reworking. Because you're narrowing the solution space *before* Claude burns tokens generating code. Instead of discovering buried assumptions during code review, you confront them when they're cheap to change. Instead of you guessing and Claude correcting, Claude asks clarifying questions instead of making assumptions. This is a fundamental shift in how agentic AI works. Traditional prompt engineering demanded perfect instructions upfront. Spec-driven development lets AI help you *discover* what you actually want - because you probably don't know all the nuances before talking it through. ## The Real Win You get control back. Most AI coding tools work top-down: you specify, they build. Here, it's bidirectional. Claude doesn't assume. It asks. You don't have to guess. You decide. For large features, this changes everything. For a complex auth system, CMS integration, or multi-tenant setup, the difference between building once and building twice is hours of wasted effort. Next time you have a large feature, try it. Don't cram everything into one prompt. Let Claude interview you. You'll be shocked how many requirements you didn't even know you had. ![Diagram showing traditional workflow vs. spec-driven workflow comparison](/images/blog/claude-code-interview-mode/workflow-comparison.webp) --- ## Further Reading - **Tariq's original insight:** Search "spec-driven development Claude Code" on Twitter for the original thread - **In Claude Code:** Try creating a skill that triggers interview mode - the Ask User Question tool is built in and designed for exactly this workflow --- ## Watch the Video ]]> Thu, 01 Jan 2026 00:00:00 GMT Developers Digest Claude Code Development AI Spec-Driven <![CDATA[Claude Code + Chrome: AI Agents That Use Your Browser]]> https://www.developersdigest.tech/blog/claude-code-chrome-automation https://www.developersdigest.tech/blog/claude-code-chrome-automation ]]> Wed, 31 Dec 2025 00:00:00 GMT Developers Digest Claude Code Chrome Browser Automation AI <![CDATA[Continual Learning in Claude Code: Memory That Compounds]]> https://www.developersdigest.tech/blog/continual-learning-claude-code https://www.developersdigest.tech/blog/continual-learning-claude-code **Duration:** 8:55 | **Published:** 2025-12-30 --- ## Further Reading - [Anthropic Skills Repository](https://github.com/anthropics/skills) - Official examples and templates - [Claude Code Documentation](https://claude.ai/docs) - Full skill setup guide - [Anyscale Blog: Continual Learning in Agents](https://www.anyscale.com) - Robert Nishihara's perspective on agent memory ]]> Tue, 30 Dec 2025 00:00:00 GMT Developers Digest Claude Code Skills Memory AI Learning <![CDATA[The Ralph Loop: Running Claude Code For Hours Autonomously]]> https://www.developersdigest.tech/blog/claude-code-autonomous-hours https://www.developersdigest.tech/blog/claude-code-autonomous-hours ]]> Mon, 29 Dec 2025 00:00:00 GMT Developers Digest Claude Code Autonomous Ralph Loop AI Automation <![CDATA[The Bitter Lesson: How We Build and What We Build Is About to Change]]> https://www.developersdigest.tech/blog/bitter-lesson https://www.developersdigest.tech/blog/bitter-lesson Sat, 27 Dec 2025 00:00:00 GMT Developers Digest AI Bitter Lesson Development Future <![CDATA[Magic Patterns: Why Design Wins in a World of AI Code Generators]]> https://www.developersdigest.tech/blog/magic-patterns https://www.developersdigest.tech/blog/magic-patterns ]]> Wed, 26 Nov 2025 00:00:00 GMT Developers Digest Magic Patterns Design AI UI <![CDATA[Zed: The Open Source Agentic IDE]]> https://www.developersdigest.tech/blog/zed-agentic-ide https://www.developersdigest.tech/blog/zed-agentic-ide ]]> Tue, 25 Nov 2025 00:00:00 GMT Developers Digest Zed IDE Claude Code AI <![CDATA[Claude Opus 4.5: Anthropic's Most Intelligent Model]]> https://www.developersdigest.tech/blog/claude-opus-4-5 https://www.developersdigest.tech/blog/claude-opus-4-5 ]]> Mon, 24 Nov 2025 00:00:00 GMT Developers Digest Claude Opus Anthropic AI <![CDATA[The Agentic Development Tech Stack for 2026]]> https://www.developersdigest.tech/blog/agentic-dev-stack-2026 https://www.developersdigest.tech/blog/agentic-dev-stack-2026 ]]> Sun, 23 Nov 2025 00:00:00 GMT Developers Digest AI Development Tech Stack Agentic <![CDATA[Antigravity: Google's Agentic Code Editor]]> https://www.developersdigest.tech/blog/antigravity-google-editor https://www.developersdigest.tech/blog/antigravity-google-editor ]]> Sun, 23 Nov 2025 00:00:00 GMT Developers Digest Google Antigravity IDE AI <![CDATA[Streamline Your Git Workflow with GitKraken and Claude Code]]> https://www.developersdigest.tech/blog/gitkraken-claude-code https://www.developersdigest.tech/blog/gitkraken-claude-code ]]> Mon, 10 Nov 2025 00:00:00 GMT Developers Digest GitKraken Claude Code Git AI <![CDATA[Cursor 2.0 & Composer: The Fastest AI Coding Model]]> https://www.developersdigest.tech/blog/cursor-2-0-composer-deep-dive https://www.developersdigest.tech/blog/cursor-2-0-composer-deep-dive Mon, 03 Nov 2025 00:00:00 GMT Developers Digest Cursor AI Coding Composer <![CDATA[Windsurf SWE-1.5 Launches Same Day as Cursor 2.0]]> https://www.developersdigest.tech/blog/windsurf-swe-1-vs-cursor-composer https://www.developersdigest.tech/blog/windsurf-swe-1-vs-cursor-composer **Update (March 2026):** Since this article was published, OpenAI acquired Windsurf (formerly Codeium). The product continues to operate but is now part of the OpenAI ecosystem. See our [pricing comparison](/pricing) for the latest details. Both say they're the best. Let's look at what the actual data shows. ## What is SWE-1.5? SWE-1.5 is Windsurf's latest frontier model - a model with hundreds of billions of parameters that achieves near-SOTA (state-of-the-art) coding performance. But here's the kicker: it runs at up to 950 tokens per second. To put that in perspective: - **13x faster than Claude Sonnet 4.5** - **6x faster than Claude Haiku 4.5** - **Near-frontier intelligence at unprecedented speed** This is achieved through a partnership with Cerebras, an AI inference provider. ![SWE-Bench Pro results showing SWE-1.5 achieves near-SOTA performance while being the fastest model](/images/blog/swe-bench-pro-results.jpg) ## Why Speed Actually Matters When you're coding, waiting 20 seconds for AI to respond breaks your flow. That's the problem both Cursor and Windsurf are solving. **Cursor's Composer:** Completes most tasks in under 30 seconds **Windsurf's SWE-1.5:** Runs at 950 tokens/second Both models achieve something similar - fast enough to keep you in flow state. The difference is in how they got there and what they optimize for. ## Training Philosophy **SWE-1.5 Training:** - End-to-end reinforcement learning in realistic coding environments - Trained on diverse, real-world scenarios - Focused on writing clean, maintainable code (not just code that passes tests) - Worked with senior engineers and open-source maintainers for high-quality training data - Custom Cascade agent harness - Infrastructure powered by thousands of GB200 NVL72 chips **Result:** Less verbose output, fewer unnecessary try-catch blocks, solutions that follow best practices. ## Performance Benchmarks On **SWE-Bench Pro** (a benchmark of real-world coding tasks), SWE-1.5 achieves near-frontier performance while completing tasks faster than any other model. ![Speed vs Performance scatterplot showing SWE-1.5 as the fastest model with near-SOTA results](/images/blog/swe-15-speed-score.jpg) The chart shows the trade-off between speed and intelligence - SWE-1.5 is an outlier that achieves both. ## Real-World Use Cases Windsurf's engineers use SWE-1.5 daily for: 1. **Exploring large codebases** - Quickly understand unfamiliar code (powers Windsurf's new Codemaps feature) 2. **Full-stack development** - Build complete features from frontend to backend 3. **Infrastructure work** - Edit Kubernetes manifests, Terraform configs, complex YAML files without memorizing field names Tasks that used to take 20+ seconds now complete in under 5 seconds. ## Technical Integration When a model runs 10x faster, everything else becomes a bottleneck. Windsurf rewrote critical components to keep up: - Lint checking optimizations - Command execution improvements - Custom request priority system for smooth agent sessions under load These improvements reduce overhead by up to 2 seconds per step and benefit all models in Windsurf, not just SWE-1.5. ## Cursor Composer vs Windsurf SWE-1.5 **Cursor Composer:** - 4x faster than GPT-4/Claude Opus - 30-second completions for most tasks - Agent-first interface (not file-first) - Multiple agents run in parallel - Git worktrees for isolated workspaces - Built-in browser tool **Windsurf SWE-1.5:** - 13x faster than Sonnet 4.5 - 950 tokens/second throughput - Near-SOTA coding performance - Trained specifically for software engineering (not just coding) - Integrated with Cascade agent harness - Optimized for Windsurf's tool ecosystem **The Key Difference:** Cursor optimized for **multi-agent workflows and speed**. Windsurf optimized for **integrated agent experience and throughput**. Both achieve sub-30-second completion times. Both use reinforcement learning. Both trained on real developer workflows. ## Which One Should You Use? **Choose Cursor Composer if:** - You want multi-agent parallelization - Agent-first interface appeals to you - Git worktrees matter for your workflow - You're already in the Cursor ecosystem **Choose Windsurf SWE-1.5 if:** - Raw speed is your priority (950 tok/s) - You want near-SOTA performance - Integrated agent experience matters - You're exploring the Windsurf ecosystem **Real talk:** Both are excellent. The competition between them is pushing the entire space forward. ## What This Means for AI Coding October 29th, 2025 marked a shift: 1. **First in-house models from major AI coding tools** - Both companies stopped relying solely on OpenAI/Anthropic 2. **Speed is now table stakes** - Sub-30-second completions are the baseline 3. **Specialized models beat general models** - Training on real coding workflows matters 4. **The editor enables the model** - Both companies use their tool data to improve training ## The Bigger Picture We're past the era of "just use GPT-4 for coding." Custom models trained on real developer workflows, optimized for speed, integrated with purpose-built editors - that's the new standard. Both Cursor and Windsurf proved it's possible on the same day. And developers are the winners. ## Try Them Yourself **Windsurf:** [https://windsurf.com/download](https://windsurf.com/download) **Cursor:** [https://cursor.com/download](https://cursor.com/download) Both models are available now. Test them with your actual workflow and see which one fits better. --- ## Watch the Video ]]> Mon, 03 Nov 2025 00:00:00 GMT Developers Digest Windsurf Cursor AI SWE-1.5 Composer <![CDATA[Claude Skills: A technical deep dive into Anthropic's new approach to AI context management]]> https://www.developersdigest.tech/blog/claude-skills-breaking-llm-memory-barriers https://www.developersdigest.tech/blog/claude-skills-breaking-llm-memory-barriers “The amount of context that can be bundled into a skill is effectively unbounded, because agents intelligently navigate filesystems rather than stuffing everything into prompts.” > - Mahesh Murag, Anthropic technical staff The payoff: **A library of 20 skills consumes only ~1,000 tokens until any skill is loaded, versus tens of thousands for equivalent system prompts.** Skill content is versioned, composable, and persists across all sessions, so “copy/paste prompt rot” is replaced by reusable infrastructure. --- ## Technical architecture: how Skills actually work Skills are implemented as a meta-tool called “Skill” that lives beside other Claude tools like Read, Write, and Bash. Every skill is a folder with a required `SKILL.md` (YAML frontmatter and Markdown instructions), optional scripts (`scripts/`), references, and assets. Technical flow: 1. **Discovery:** At chat or agent startup, Claude recursively scans sources: - `~/.claude/skills/` (personal), - `.claude/skills/` (per-project, version-controlled), - plugin and built-in skills Skills discovered are declared in a lightweight XML list within the tools array: ``, keeping context cost minimal. 2. **Selection:** When a user message arrives, Claude uses LLM reasoning (not pattern matching or routing logic) to select matching skills based on names/descriptions. 3. **Loading:** When a skill is used, two user messages are injected: - One transparent to user UI (“Loading ‘pdf’ skill with arguments ...”) - One (isMeta: true) long-form message containing the full instructions, examples, and any procedural guidance from the skill 4. **Scoped context modification:** Skills can adjust model, tool permissions (e.g., allow `Bash(pdftotext:*)`), or execution environment with a skill-specific `contextModifier`-all scoped and temporary, tightly controlling capabilities. This meta-tool enables stacking, composition, and arbitrary extensibility-Claude can load and coordinate multiple skills in response to complex requests. --- ## Anatomy of a Skill: SKILL.md format and best practices Every skill contains a `SKILL.md` with YAML frontmatter and actionable instructions. Example minimal template: ```markdown --- name: project-conventions description: Apply project-specific coding conventions. Use when writing, reviewing, or refactoring code in this project. --- # Coding Conventions ## Principles - Use functional React components with hooks for state - Co-locate tests with components (Button.tsx → Button.test.tsx) - Types must be declared for all exported props ## Directory Structure src/ ├── components/ ├── hooks/ ├── utils/ └── types/ ## Examples User: “Refactor dashboard for consistency.” *Claude: Applies rules above and outputs PR-ready code changes.* ``` **Frontmatter tips:** - `name` is lowercase, 64 chars max, and becomes the skill command/identifier. - `description` is *critical*: must say both what and *when* to use (“Generate Excel reports from tabular data. Use when analyzing or exporting Excel files.”) - Optional: `allowed-tools`, `model`, `version`, `license`. Scoping tool permissions is strongly encouraged for security. **Recommended folders:** - `scripts/`: Python, Bash-invoked via allowed tools - `references/`: Extra context and documentation (loaded only if referenced) - `assets/`: Templates, binaries by reference > *Advanced*: Skills can include structured directories for deterministic operations, code generation templates, or API references. --- ## API integration and code patterns Skills are available through the Claude API, web app, and Claude Code. API usage requires enabling skills beta and (for code execution skills) code-execution beta: ```python import anthropic client = anthropic.Anthropic() response = client.beta.messages.create( model="claude-sonnet-4-5-20250929", max_tokens=4096, betas=[ "code-execution-2025-08-25", "skills-2025-10-02", "files-api-2025-04-14" ], container={"skills": [ {"type": "anthropic", "skill_id": "pptx", "version": "latest"} ]}, messages=[{"role": "user", "content": "Create a presentation about renewable energy"}], tools=[{"type": "code_execution_20250825", "name": "code_execution"}] ) ``` - The `container` param can specify up to 8 Anthropic or custom Skills per request. - Multi-turn conversations reuse the container by ID, maintaining skill inclusion and filesystem state. - Built-in Skills cover pptx/xlsx/docx/pdf; custom Skills are uploaded via the Skills Management API and get a generated ID. - Skills producing files return `file_id`s retrievable via the Files API. Skill upload: ```python with open('skill-folder/SKILL.md', 'rb') as skill_file: response = client.skills.create( files=[ {"path": "SKILL.md", "content": skill_file.read()}, {"path": "scripts/helper.py", "content": open('skill-folder/scripts/helper.py', 'rb').read()} ] ) skill_id = response.id ``` And listing, versioning, or deleting skills is supported via the Management API. --- ## Claude Code: Real-world developer workflows [Claude Code](/tools/claude-code), Anthropic’s agentic IDE/terminal, brings out the true power of Skills for software teams: - **Discovery**: Skills are loaded from personal (`~/.claude/skills/`), project (`.claude/skills/`), or plugins-supporting both individual and version-controlled, team-wide patterns. - **Autonomous activation**: When engineers run `claude commit`, the “generating-commit-messages” skill can trigger, analyze the git diff, and return a perfectly formatted message-no prompt engineering or style remembering needed. - **Stacking**: Multiple skills (testing methodology, linting rules, database integration) compose on the fly as Claude autocompletes tasks, interprets context, or executes migrations. - **Procedural documentation**: Teams package institutional knowledge and SOPs, from bug triage to onboarding checklists, into instantly reusable, discoverable Skill libraries. - **Vendor and stack patterns**: Skills like “google-adk” or “stripe-integration” encode company-approved integration steps, error handling, and best practices. A real project conventions skill might encode file/folder layout, coding style rules, commit templates, testing requirements, and review checklists-all in readable Markdown. ### Example: test-driven-development Skill ```markdown --- name: test-driven-development description: Implement features using test-driven development. Activates when adding features. --- # Test-Driven Development ## Workflow 1. Write a failing test for new functionality 2. Implement minimal code to pass test 3. Refactor while tests remain green ## Example Test ```typescript describe('authenticateUser', () => { it('returns true for valid credentials', () => { const user = { username: 'test', password: 'pw' } expect(authenticateUser(user, 'test', 'pw')).toBe(true) }); }); ``` ``` --- ## Advanced usage: Code, scripts, and deterministic operations Skills can bundle scripts for tasks requiring precision or speed (e.g., PDF form extraction, data processing): *pdf-form-extractor skill:* ```markdown --- name: pdf-form-extractor description: Extract and analyze form fields from PDFs. Use when working with fillable PDF forms. allowed-tools: Bash(python:*) --- # Extraction Steps 1. Ensure PDF is accessible 2. Run extraction: `python {baseDir}/scripts/extract_fields.py "$filepath"` 3. Parse resulting JSON for field analysis ``` *Invoked script:* ```python import PyPDF2, json, sys def extract_form_fields(pdf_path): # Extraction logic here-returns JSON if __name__ == '__main__': print(json.dumps(extract_form_fields(sys.argv[1]), indent=2)) ``` --- ## Skills vs. other approaches: prompts, RAG, MCP, and Projects - **System prompts:** Large, brittle, context-hungry and hard to update or version. - **Skills:** Composable, persistent, progressive-you load only what’s needed, when it’s needed, and each unit is versioned/tested separately. - **RAG:** Best for *factual* retrieval and dynamic, external, fresh content-Skills are best for *procedural* and repeatable workflows. - **[MCP](/blog/what-is-mcp):** Connects Claude to external APIs, servers, live data, but is complex. Skills are radically simpler and more portable; they can teach Claude how to use MCP connections through repeatable workflows. - **Projects/Context Stuffing:** Useful for iterative context accretion, but not persistent, composable, or universally available. > Real hybrid workflows combine a stable short system prompt, high-ROI skills, and RAG for dynamic data. --- ## Developer benefits: from efficiency to consistency - **Persistence:** Skills live across all chats, projects, and API requests-install once, use anywhere. - **Repeatability:** Document once, deploy anywhere-teams save dozens of hours and achieve perfect consistency (e.g., “authentication-setup” skill rolled out across 6 projects with 14 hours saved). - **Cost savings:** Each skill uses ~50 tokens until loaded; even large libraries have negligible context cost until activation, saving on inference cost and latency. - **Sharing & portability:** Skills are git folders-version, distribute, and roll them out across teams or the whole organization. - **Velocity and onboarding:** Skills lower the barrier for new team members, codify best practices, accelerate prototyping, and guarantee higher-quality outputs. --- ## Real-world impact & user stories - **Engineering teams**: 90%+ of git interactions automated via Claude Code and Skills-from commit message generation, bugfix branches, to migration scripts. - **Productivity**: Non-engineers automate workflows (e.g. creating Office docs from templates), consistently apply brand guidelines, or execute complex data analysis. - **Rapid prototyping**: Apps like webcam background removers or Stripe payment integration built in under an hour using pre-written Skills. - **Emergencies**: One user used Skills to research, compose, and coordinate a successful hospital policy appeal in a single evening. Others report hours saved on spreadsheets, reporting, and formatting. - **Business workflows**: Marketing teams process and improve ad creatives using Skills encoding guidelines and optimization recipes. --- ## Security, limits, and best practices - **Security:** Carefully scope tool permissions in `allowed-tools`-never use wildcards for Bash or network operations in production. Review all community skills before use; don’t install untrusted skills. - **Description quality:** Skill triggering depends on high-quality, *specific* descriptions. Include task, target file types, and usage triggers (“Use when analyzing .xlsx spreadsheets”). - **Token cost:** While Skills only use ~50 tokens until loaded, activation can inject 1,500+ tokens per turn. Stack skills judiciously and measure cost in large workflows. - **Version control:** Keep SKILL.md focused (<5,000 words), use references/assets/scripts to offload bulk, and test edge cases. - **Distribution:** Use personal `~/.claude/skills/` for experiments, `.claude/skills/` for team standards, and marketplace skills (coming soon) for broader distribution. - **Tool permissions:** Only scope Bash and APIs needed for the task at hand. Failsafe by denying excess permission rather than risking security escalation. --- ## What’s next? Future directions for Skills Anthropic aims to streamline skill creation, introduce centralized management and distribution (enterprise/team skill rollout), and foster an ecosystem for sharing and improvement. Skills may soon orchestrate Model Context Protocol integrations, enabling rich workflows across heterogeneous data sources or APIs using a combination of procedural knowledge (in Skills) and dynamic access (via MCP). > "The Cambrian explosion of Skills will make this year’s MCP rush look pedestrian by comparison." > - Simon Willison Teams that invest in building out skill libraries as tested, documented infrastructure-not one-off prompts-will realize the largest benefits: consistency, velocity, onboarding, and quality across every aspect of AI-powered workflows. --- Skills don’t just add features-they’re *infrastructure for reusable and compounding organizational knowledge*. Treat them like code: versioned, documented, reviewed, maintained. The returns in cost, output quality, and velocity will become a core competitive advantage in the agentic AI era. ]]> Sun, 02 Nov 2025 00:00:00 GMT Developers Digest AI Claude LLM Skills <![CDATA[NVIDIA Nemotron Nano 2 VL: Open Source Vision-Language Model]]> https://www.developersdigest.tech/blog/nemotron-nano-2-vl https://www.developersdigest.tech/blog/nemotron-nano-2-vl ]]> Tue, 28 Oct 2025 00:00:00 GMT Developers Digest NVIDIA Nemotron Vision AI <![CDATA[Kimi K2: Fast, Cheap, and Efficient Coding]]> https://www.developersdigest.tech/blog/kimi-k2 https://www.developersdigest.tech/blog/kimi-k2 Create a SaaS landing page with a hero section, pricing, FAQ, header, and footer. Black and white theme, thin font weights, fully responsive. Break each component into its own file. Kimi K2 decomposed the request into discrete steps: explore the project structure, read the layout and globals.css, then generate components in parallel. Within minutes, it produced a coherent directory structure with properly isolated components. ![Generated SaaS landing page with modern black and white design](/images/blog/kimi-k2/frontend-generation.webp) The output included responsive Tailwind classes, accessible navigation, and collapsible FAQ sections. More importantly, the model demonstrated contextual awareness: it read the existing package.json to confirm dependencies, examined the layout file to understand the root structure, and wrote components that actually fit the project conventions. ## Frontend Capabilities The 0905 release specifically targeted frontend development, and the improvement is measurable. In my testing, Kimi K2 generates cleaner component boundaries and better semantic HTML than the July release. It handles design constraints precisely: when I specified "neo-brutalist theme," the model applied bold borders, high-contrast typography, and raw geometric layouts without drifting into generic corporate styling. In Open Lovable V2, Kimi K2 powers a site cloning feature. The workflow uses Firecrawl to scrape a target website, extracts the content and structure, then reimagines the design according to user specifications. I tested this on a dated corporate site, requesting a neo-brutalist redesign. The model preserved the original content hierarchy while transforming the visual language completely. ![Side-by-side comparison of original site and neo-brutalist redesign](/images/blog/kimi-k2/site-redesign.webp) The result kept all original images and copy but applied the requested aesthetic: heavy borders, monospaced typography, and asymmetric layouts. This is not surface-level styling; the model understood how to map content to a different design system. ## OK Computer Mode Moonshot AI recently shipped "OK Computer," a specialized interface for Kimi K2. The mode targets non-technical workflows: website mockups, data visualizations, mobile app prototypes, and even PowerPoint generation. It handles uploads of up to one million rows for interactive charts and presentations. While developers will spend most of their time in APIs and IDEs, OK Computer demonstrates the model's range. The same underlying weights that generate React components can structure spreadsheet data or layout slide decks. ## Integration Ecosystem One advantage of Cloud Code compatibility is the [MCP](/blog/what-is-mcp) server ecosystem. You can attach documentation servers like Context 7 or Firecrawl to Kimi K2, giving the model access to up-to-date library references and external data sources. This closes the knowledge gap that often plagues open models: instead of relying on static training data, the agent queries live documentation as it codes. ![Diagram showing Cloud Code with MCP servers routing to Kimi K2](/images/blog/kimi-k2/integration-workflow.webp) The combination works seamlessly. Kimi K2's speed makes the round-trip to documentation servers tolerable, and its 256K context window accommodates large retrieved contexts without truncation. ## Verdict After two months of production use, Kimi K2 has replaced Claude Sonnet 4 as my default coding model. It generates cleaner frontend code, executes agentic tasks faster, and costs significantly less. The open-source license means provider competition keeps pricing aggressive and availability high. For developers building with AI-assisted tools, the model deserves evaluation. Set up the Cloud Code integration, run it against your typical prompts, and measure the output quality against your current stack. The benchmark improvements translate to real workflow gains. --- ## Watch the Video ]]> Fri, 24 Oct 2025 00:00:00 GMT Developers Digest Kimi K2 AI Coding <![CDATA[ChatGPT Atlas: OpenAI's Built-In Web Browser]]> https://www.developersdigest.tech/blog/chatgpt-atlas https://www.developersdigest.tech/blog/chatgpt-atlas ]]> Tue, 21 Oct 2025 00:00:00 GMT Developers Digest OpenAI ChatGPT Atlas Browser <![CDATA[Emergent Labs: Build Production-Ready Apps Through Conversation]]> https://www.developersdigest.tech/blog/emergent-labs https://www.developersdigest.tech/blog/emergent-labs ]]> Wed, 15 Oct 2025 00:00:00 GMT Developers Digest Emergent Labs AI App Builder Conversational <![CDATA[Build a Full Stack AI SaaS Application in 60 Minutes]]> https://www.developersdigest.tech/blog/full-stack-ai-saas https://www.developersdigest.tech/blog/full-stack-ai-saas ]]> Wed, 08 Oct 2025 00:00:00 GMT Developers Digest SaaS Full Stack AI Tutorial