标签：#Claude

Coder à la voix avec ChatGPT, ça marche. Le hic tient en une ligne : chaque mot que tu dictes part chez OpenAI. Depuis le 23 juillet 2026, Codex se pilote à la voix — il ouvre une pull request, cherche l'origine d'un bug, tout ça dans une phrase. Pratique pour un side-project. Rédhibitoire quand le code appartient à un client. On voulait le même confort sans la fuite. Le résultat est un pipeline 100 % local : faster-whisper pour la transcription, Claude Code et sa commande /voice pour l'agent. Rien ne sort de la machine — ni la voix, ni le contexte, ni le code. Voici la config exacte, la latence qu'on mesure sur un M2, et les deux bugs qui nous ont coûté une demi-journée. Pourquoi pas simplement Codex vocal ? Parce que « coder à la voix » cache deux choses qu'on confond tout le temps. Le mode vocal de ChatGPT est fait pour converser : il répond, il temporise, il reformule. Dicter du code, c'est l'inverse — tu veux une transcription fidèle et muette, qui ne discute pas, ne reformule pas et n'ajoute rien à ce que tu dis. Deux gestes opposés. Le vrai stack n'est donc jamais « ChatGPT vocal seul ». C'est un outil de dictée précis d'un côté, un agent de code de l'autre. Codex vocal fait les deux dans le cloud pour 20 €/mois ; un setup local sépare les deux briques et garde tout sur ta machine. Le tour d'horizon complet — prix, outils, cas d'usage — est dans le guide de référence ; ici, on reste sur le terrain technique. Le chemin le plus court : /voice Depuis mars 2026, Claude Code embarque un mode vocal. Tu tapes /voice dans le terminal, tu tiens la barre d'espace, tu parles, tu relâches. La transcription passe par un Whisper local, pas par une API distante. > /voice [hold space to talk · release to send] Pour 90 % des cas, ça suffit. Tu dictes une intention, l'agent écrit le code, tu relis. Si tu veux garder la main sur le modèle, la langue et le vocabulaire technique, il faut descendre d'un cran et brancher ta propre transcription. Le pipeline DIY, brique par brique T

You want to send a screenshot to a vision model. All three of the big ones — OpenAI's GPT-4o, Anthropic's Claude, Google's Gemini — accept images the same fundamental way: Base64-encode the bytes and put them in the JSON request. No file uploads, no multipart, just text in a payload. And yet the single most common error people hit is some flavor of invalid image / could not process image . The reason is almost never the image. It's that each provider wants the Base64 wrapped in a differently shaped object , and the traps are subtle — especially the data: URL prefix, which one provider requires and the other two reject. Here's the exact payload each one wants, side by side. OpenAI (GPT-4o) GPT-4o uses a content array of parts. The image is an image_url part, and — this is the trap — the url field takes a full data URL , prefix and all: import base64 from openai import OpenAI client = OpenAI () with open ( " photo.png " , " rb " ) as f : b64 = base64 . standard_b64encode ( f . read ()). decode ( " utf-8 " ) resp = client . chat . completions . create ( model = " gpt-4o " , messages = [{ " role " : " user " , " content " : [ { " type " : " text " , " text " : " What ' s in this image? " }, { " type " : " image_url " , " image_url " : { " url " : f " data:image/png;base64, { b64 } " }, }, ], }], ) print ( resp . choices [ 0 ]. message . content ) The literal payload shape: { "type" : "image_url" , "image_url" : { "url" : "data:image/png;base64,<BASE64>" } } Note the data:image/png;base64, is part of the value. Send raw Base64 here and it fails. Anthropic (Claude) Claude uses an image content block with a source object. Here the MIME type is a separate field ( media_type ), and the data field wants raw Base64 — no data: prefix : import base64 import anthropic client = anthropic . Anthropic () with open ( " photo.png " , " rb " ) as f : b64 = base64 . standard_b64encode ( f . read ()). decode ( " utf-8 " ) msg = client . messages . create ( model = " claude-opus-4-8 " , m

I manage a dev team, and we've been running Claude Code daily for months. I built a set of custom skills for us — code review, a debugging protocol, our team conventions — and the biggest lesson I learned surprised me: The body of your skill barely matters if the description is wrong. The failure mode nobody warns you about Here's what happens to most developers who discover skills. They get excited, write a detailed 200-line SKILL.md encoding everything they know about code review... and then it never triggers. Not once. They conclude skills "don't really work" and go back to re-typing the same prompt every session. The skill was probably fine. The description killed it. The description is a routing rule, not documentation A skill's description is the only part Claude sees upfront. The full instructions load only after the description matches your request. So the description isn't marketing copy — it's a routing rule, and it needs to be written like one. Compare: # WEAK — reads nicely, never triggers description : Helps with code quality and best practices. # STRONG — names the situations AND the phrasings description : Security-first code review for Python/FastAPI. Trigger when the user asks to "review", "check", or "look at" code, pastes a function or endpoint, mentions a bug, or asks "what's wrong with this". Also trigger on short requests like "review this". The difference: the strong version contains the actual words you type. Including the lazy ones. Nobody writes "please perform a comprehensive quality assessment" at 11pm — they write "review this". If your description doesn't cover the two-word tired version, your skill sleeps through most of your real requests. Three rules that fixed my skills 1. List your real trigger phrases. Open your chat history and look at how you actually phrase requests. Those exact phrases go in the description — "fix it", "what's wrong here", "check this". Your real vocabulary, not your professional vocabulary. 2. Name the artifa

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...

I used to spend hours rewriting AI-drafted video scripts that sounded nothing like me. At best, I might finish one or two that were just okay, but most of the work was still on my shoulders. Now, with my new system, I can get 15 scripts done in one session. They match my writing style, my voice, and my company's knowledge. Instead of full rewrites, each script just needs a quick review. I built the system in about a week, and the difference showed up before the week was out. The first project was an internal video series to teach people about the software factory and LaunchDarkly, and I barely had to edit those scripts. For the first time, the AI handles most of the work. My recent projects have mostly involved agentic software delivery. The software factory is where all of it was heading, and my company spent months preparing to help customers build their own. We had internal material, public documentation, and ongoing conversations I wanted to add clarity to. So my challenge wasn't just learning, it was learning while producing content at the same time. Essentially, devrel. By the end, I had built what I like to call my own personal content factory. At first, it was separate from the software factory it describes, but over time, the line between them blurred. My approach is to let AI handle the bulk of the work, while I step in for the important decisions. This is the only way I've found to make AI content sound like me. The AI creates the drafts, and I step in at three key points: checking the voice, the facts, and the overall feel. The quality ceiling is set before the first draft. I didn't just ask for a video script about a topic. Instead, I gave Claude access to every source I had—public docs, internal notes, and product requirements. It used research agents to read everything at once and came back with clear, organized notes I could use. I set two important rules for this step. First, every part of the research was labeled as either public-safe or internal-o

I read back six months of my own work journal and found three different note-taking systems, only one of which I remember deciding to build. This is what the volume of information actually did to my notes, what got better, what I lost, and how I capture things now.

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing Mexico is our heritage. Yet, we have no family there to visit. That sounds sadder than it is. What it actually meant, for the years before my wife and I were married and most of our time off since, is that we had to go find it ourselves. No family kitchen waiting. No grandmother's recipe with an address attached. Just the two of us and a country that is ours and that we did not know. So we did what every hungry person in a new city does...we ate. Six cities, six completely different cuisines, and somewhere in there it stopped feeling like traveling. A tlayuda from a stand outside Santo Domingo in Oaxaca. An hour in line at El Yaqui with a michelada in Rosarito. Different food every time. Same feeling every time, and there is no English word for that feeling. There is a Spanish one. What I Built Sobremesa is the time you stay at the table after the food is gone, still talking. Not the meal. The part after the meal. That is the whole site. Six meals across six Mexican cities, and the thing it measures is not how good the food was. It is how long we stayed. Tijuana, one hour. Rosarito, two. Ensenada, one. Guadalajara, ninety minutes. Mexico City, two hours. Oaxaca, two. The page adds them up at the end. Nine hours and thirty minutes at six tables. Comfort food usually means a kitchen you can go back to. We do not have one over there. So the six tables became it. The stand at Plaza Santo Domingo is the family table. The hour in line at Tacos El Yaqui is the Sunday afternoon table. Each entry has the dish, where we ate it, one verified fact about the food, and one line that is just ours, from our experience. There is a form at the bottom where you add your own table and download a card of it, generated in your browser. Nothing gets sent anywhere. One static HTML file. No framework, no build step, no tracking, no cookies, no storage. Two fonts off Google Fonts and nothing else. Designed an

Claude Code writes PHP in Laravel quite well, but it starts every session as a generalist. It does not know your project has three hundred migrations that should be thirty, that a @foreach two files over is firing an N+1, or that your modals follow one specific pattern. You end up re-explaining the same context constantly. LaraClaude packages that context as slash commands. It is a Claude Code plugin with over thirty Laravel skills, each a /lc: command. Install it once and you have audits, scaffolders and cleanup tools that already know Laravel. Here are the ones I run most. How to install LaraClaude installs through Claude Code's plugin system. Add the marketplace once, then install, so you get updates later: /plugin marketplace add edulazaro/laraclaude /plugin install laraclaude@edulazaro Or grab it directly from GitHub: /plugin install github:edulazaro/laraclaude You need Claude Code and a Laravel project. That is it for most skills; a couple that hit a live database also want Docker. Audit before you change anything Most skills default to a read-only report and only touch files when you add fix , so start by looking. /lc:find-n-plus-one scans your Blade views, Livewire components and controllers for a relationship accessed inside a loop, traces it back to the query that built the collection, and tells you the exact with() to add. /lc:find-n-plus-one /lc:security-audit is the other one I run on any project I inherit. It looks for SQL injection, XSS, mass-assignment and secrets committed to the repo, and like most fixable skills it takes a preview flag before it changes anything. /lc:security-audit # report /lc:security-audit fix --dry-run # preview the fixes /lc:security-audit fix # apply, with confirmation Clean up what has piled up Every long-lived Laravel app accumulates migration cruft: a create followed by twenty add_column and change_column files. /lc:consolidate-migrations groups them by table, classifies each table as safe to merge or not, and folds the A

I'm a big fan of using Claude and Claude Code for development. Many organizations are currently using these tools to improve developer productivity and ultimately build better products. Our role and our tools have changed — we went from powerful autocomplete to autonomous agents that can refactor, review, and implement features, most of the time better than we can on our own. Authentication methods There are several authentication methods, each with different billing, cost tracking, and governance options. Depending on your organization, you will choose the one that fits best. Personal development — Anthropic API key I use this for experimenting with the Anthropic library for learning and prototyping. You set ANTHROPIC_API_KEY in your environment (or a .env file), and the SDK picks it up automatically. Pay-as-you-go per token, no infrastructure needed. from dotenv import load_dotenv load_dotenv () import json import anthropic client = anthropic . Anthropic () tools = [ { " name " : " get_weather " , " description " : ( " Returns current weather for a city. Use ONLY for weather queries. " " Input: city name (string). Output: temperature in Celsius and conditions. " ), " input_schema " : { " type " : " object " , " properties " : { " city " : { " type " : " string " }}, " required " : [ " city " ], }, }, { " name " : " get_time " , " description " : ( " Returns the current local time for a city. Use ONLY for time/timezone queries. " " Input: city name (string). Output: local time string. " ), " input_schema " : { " type " : " object " , " properties " : { " city " : { " type " : " string " }}, " required " : [ " city " ], }, }, ] def get_weather ( city : str ) -> dict : return { " city " : city , " temp_c " : 22 , " conditions " : " sunny " } def get_time ( city : str ) -> dict : return { " city " : city , " local_time " : " 14:35 " } TOOL_FUNCTIONS = { " get_weather " : get_weather , " get_time " : get_time , } def run_agent ( user_message : str ) -> str : messages =

The UK AI Security Institute, or AISI, has put independent cyber-capability testing at the center of the debate over how frontier AI systems should be governed. Its work on Anthropic's Claude Mythos models and OpenAI's GPT-5.6 Sol examines how advanced systems perform on controlled cyber tasks when evaluators have access beyond the safeguards normally applied in public deployment. The most important takeaway is not that a single model has crossed a clearly defined threshold. It is that external, pre-deployment evaluation is becoming a practical governance mechanism for assessing what frontier models can do in realistic but contained environments. Company materials from Anthropic and OpenAI confirm AISI's involvement in testing related Mythos-class and GPT-5.6 systems, while AISI has published findings on the cyber capabilities of Claude Mythos Preview. AISI's evaluation of Claude Mythos Preview's cyber capabilities provides the clearest official account in the supplied evidence. The institute assessed the model in controlled settings designed to test cyber-relevant capability. Anthropic has also said that Mythos 5 would undergo external testing with UK AISI as part of its trusted-access Project Glasswing program. Separately, OpenAI's GPT-5.6 System Card says UK AISI received early access to GPT-5.6 Sol for a pre-deployment evaluation. That distinction matters. The publicly documented materials refer to different model variants, access arrangements, and stages of evaluation. They nevertheless point to a shared development: AISI is being used as an independent evaluator of frontier-model cyber capability before or alongside restricted access programs. What the evaluations establish The available research supports a measured conclusion. Mythos-family models and GPT-5.6 Sol demonstrated substantial cyber capabilities in controlled test environments, including work involving autonomous cyber tasks and simulated environments. Those results should not be read as evidence t

Anthropic shipped OS-level sandboxing for Claude Code. If you run an agent against a repo you care about, it's worth understanding precisely what moved — because a fair amount of the commentary treats it as "agents are contained now," and that's not what the documentation says. I read the docs carefully, partly because I build a tool in adjacent territory and needed to know whether I'd just been made redundant. Short answer: no. The longer answer is more interesting, and it starts with a compliment: the docs are unusually honest about their own limits. Most of what follows isn't something I discovered — it's something Anthropic wrote down, and more people should read it. What it actually does The sandbox uses OS primitives — Seatbelt on macOS, bubblewrap on Linux and WSL2. By default, sandboxed commands can write only to your working directory and the session temp directory. No network domains are pre-allowed: the first time a command needs a new host you're prompted, and approving it lasts the session. Crucially, this is enforced by the operating system on the running process , not by the model correctly interpreting a command. The docs put it well: the boundary holds regardless of what the model chose to run, and even if an allowed command does more than its name suggests. That's a real improvement over asking an agent nicely, and it's the right layer for what it solves. The motivation named in the docs is the same one I keep seeing in the wild: reducing the permission prompts that people stop reading. Approval fatigue is the disease; this is a real treatment for part of it. Five things worth knowing before you rely on it It's Bash-only. The sandbox constrains Bash commands and their child processes. Claude Code's own Read, Edit and Write tools don't run through it — they go through the permission system instead. "The sandbox is on" means shell commands are contained, not that every file operation is. Your working directory is inside the boundary by design. The de

I built an orchestration skill for Claude Code that delegated everything to subagents. It worked. It also cost somewhere on the order of 1-2 million Opus tokens per task - including tasks whose final diff was a handful of lines. Nothing was broken. Every individual decision was defensible. Three modest multipliers stacked, and then the whole stack ran on every single request. This is the postmortem, the redesign, and the enforcement layer I should have written first. v1: pure delegation The design goal was context hygiene. The main session gets polluted fast - it accumulates file contents, tool output, and dead ends, and its judgment degrades as the window fills. So: don't let it do any work. Make it a coordinator, and give every unit of real work a fresh context. That produced four rules: A hard gate. The main session was forbidden from reading, editing, or running anything itself. Every action went through a subagent. A fixed 5-phase pipeline on every task: Plan → Approve → Execute → Review → Report. Fresh subagents per phase. No reuse. Each phase got clean context by construction. Mandated reviewers with "loop until clean." A review phase that re-ran until it found nothing. And the trigger was broad - essentially any actionable request. "do this," "implement," "fix," "build," "change." Read those four rules again with a cost lens instead of a correctness lens. That is the whole postmortem. The three multipliers 1. The dispatch schema made model optional The subagent dispatch tool takes a model parameter. My skill never set it. Omitted, it inherits from the parent session - which was Opus 4.8. So every subagent, including the ones whose entire job was "read this file and summarize it," ran on the most expensive tier available. Here's what that actually costs at list prices: Model Input $/MTok Output $/MTok vs. Opus Claude Opus 4.8 ( claude-opus-4-8 ) $5.00 $25.00 1× Claude Sonnet 4.6 ( claude-sonnet-4-6 ) $3.00 $15.00 0.6× Claude Haiku 4.5 ( claude-haiku-4-5 ) $1.

This tutorial was written by Néstor Daza . This is the third article in a series about building Claudius , my own Claude-based chatbot ( Github ). The previous article discussed the MongoDB data model to use for the app. The previous article decided the shape of the data. None of it matters until the app around it is working, and getting it there is the unglamorous half of this phase. It comes down to three things: an identity system the client cannot tamper with, proof that Claudius can reach the two services it depends on, and the deployment realities that decide whether any of it runs at all. This is the boring work that quietly decides whether a project survives contact with production. Identity: the client never gets a vote Any Google account on Earth can sign into Claudius safely because a user's role is never something the client sends. It is decided on the server every time. One piece of this lives outside the code. The Google provider needs an OAuth (Open Authorization) client that you register once in the Google Cloud Console, and the client identifier and secret from that registration are set in corresponding env variables. These setup steps live in the Auth.js and Google documentation, so I am not repeating them here. Sign-in runs on Auth.js v5 with the Google provider and the MongoDB adapter. There are three roles, admin, member, and guest, and they resolve in exactly one place on the server, with a clear precedence: export async function resolveRole ( email : string | null | undefined ): Promise < Role > { if ( ! email ) return " guest " ; const normalized = email . toLowerCase (); if ( normalized === env . ADMIN_EMAIL . toLowerCase ()) return " admin " ; const settings = await settingsCol (); const allowlist = await settings . findOne ({ _id : " allowlist " }); if ( allowlist && " emails " in allowlist ) { const allowed = allowlist . emails . some (( e ) => e . toLowerCase () === normalized ); if ( allowed ) return " member " ; } return " guest " ; }

I have 312 docs in my personal knowledge DB. Tweets, arxiv abstracts, Zenn articles, blog posts, YouTube transcripts. Claude Code writes to it, reads from it, and cites out of it every day. That number is not a brag. It is the reason I finally have data on which retrieval strategy holds up in an LLM-native workflow. I tried four. The one I ship is the one I tried last and expected to lose. Three of the four broke in ways that are worth naming, because the broken versions are what most tutorials will tell you to build. The setup, so we agree on what got benchmarked The knowledge DB is called context-forge internally. It is a folder, some markdown files, and a SQLite table. Claude Code adds to it via CLI, searches via CLI, and reads the underlying markdown directly when it needs the full text. It took eight hours to build the CLI, three months to accumulate the 312 documents at a pace of one to five per day, and about 15 minutes a day of my time to keep it flowing. Each doc has metadata: source URL, a credibility score 1-5, one to three categories, a short summary. The autoregistration pipeline is Claude Code itself: I paste a URL, it fetches, summarizes, scores, categorizes, writes the markdown, commits, and updates the SQLite index. The pipeline is not the interesting part. The retrieval strategy is. I ran each of the four strategies for two weeks against the same day-to-day tasks: writing a chapter, answering "what did that person say about X," and building an argument for a decision. Same me, same DB, different retriever. Layer 1: pure semantic RAG (vector embeddings). Broke at 200 docs The first version was the textbook answer. Embed every document with a sentence transformer, store the vectors in SQLite with a similarity index, retrieve the top-k on every query. This is the pattern Silicon Slopes covers for code-level RAG and Anthropic itself has an issue open for a built-in version . It worked at 50 docs. It worked at 100. Around 200 documents it started retrie

Opening Google Analytics to answer one question is a special kind of tax. You know the number is in there. You also know it's four clicks, two date pickers and a dimension dropdown away, and by the time you've found it you've forgotten what you wanted it for. So I built Metrifyr : a remote MCP server that puts my Google marketing stack behind my AI agent. Nothing to install: connect it once (Claude, Cursor, VS Code, any MCP client), then ask the question in plain language and it goes and gets the number. It's in the Cursor marketplace and the official MCP Registry, and the catalog has grown past a hundred tools, though, as you'll see, no single session loads them all. What's actually connected Metrifyr isn't a wrapper around one API. It federates the whole Google marketing surface behind a single MCP connection: Analytics 4 : run reports, realtime, metadata, compare periods. Plus the admin side: create properties, data streams, conversion events, custom dimensions and metrics. Search Console : search analytics, URL inspection, sitemaps. AdSense : accounts, earnings, payment history, revenue by keyword. Tag Manager : read and audit containers, tags, triggers, variables. Google Ads : campaign planning. Connect it once, and the agent can reach across all of them in a single train of thought. "Which landing pages lost the most organic traffic last quarter, and were any of them earning AdSense revenue?" is one question to me. It's Search Console and Analytics and AdSense to the machine, joined without me opening a single tab. Raw numbers are the boring part Pulling a GA4 report over MCP is table stakes. The part I actually care about is the layer on top, the analysis tools that answer the questions you'd otherwise pay an SEO consultant to run: Content decay scan : which pages are quietly bleeding traffic month over month. Striking-distance optimizer : the queries ranking positions 11 to 20, one nudge away from page one. Keyword cannibalization : where two of your own pag

Bilibili's 412 Incident, Explained: How v1.5.0 Absorbed It In June 2026, Bilibili quietly began rejecting yt-dlp with HTTP 412 errors. Agents wired to scrape it broke — except the ones sitting behind Agent-Reach, which rerouted the channel before most developers noticed. Agent-Reach is a local, MIT-licensed capability layer that gives shell-capable coding agents live internet access by selecting and routing to upstream CLIs rather than proxying data itself . When Bilibili started 412-blocking yt-dlp in June 2026, v1.5.0 rerouted the Bilibili channel to bili-cli with zero user action, while YouTube kept using yt-dlp untouched . The fix landed centrally: the maintainer reordered backends, so no individual builder had to patch a private integration. Quick Answer: When Bilibili began returning HTTP 412 to yt-dlp in June 2026, Agent-Reach v1.5.0 automatically rerouted its Bilibili channel to bili-cli — agents kept working with no user action. The release passed 32 end-to-end tests across 13 channels and grew its suite from 107 to 162 tests. The framing shift matters: v1.5.0 describes itself as a capability layer, not a tool collection. Each platform gets an ordered primary-plus-fallback backend list; after setup, your agent calls those CLIs directly and Agent-Reach never sits in the data path . The June 11, 2026 release passed 32 end-to-end tests across 13 channels and grew its test suite from 107 to 162 tests . Platform Primary backend Fallback Web pages Jina Reader — YouTube yt-dlp — GitHub gh CLI — RSS feedparser — Bilibili bili-cli OpenCLI (subtitles) Twitter/X twitter-cli OpenCLI Reddit OpenCLI rdt-cli XiaoHongShu OpenCLI xhs-cli LinkedIn linkedin-mcp Jina Reader Global search Exa via mcporter — "capability layer: multi-backend routing + real doctor + OpenCLI" — Agent-Reach v1.5.0 release framing (source: Agent-Reach CLAUDE.md ). The behavior is easy to model. The following minimal snippet — which was executed and returns exit 0 — illustrates the "absorb and keep wo

Part 1 : Understanding Token Economics, Hidden Costs, and the Fundamentals Every AI Engineer Must Know Table of Contents Introduction Why Token Cost Optimization Matters More Than Ever Understanding What a Token Really Is How LLM Providers Charge for Tokens Input Tokens vs Output Tokens Why "Cheap Prompts" Can Become Expensive Hidden Sources of Token Costs The Real Cost of Production AI Systems How Token Costs Scale with Users The Cost Optimization Mindset Key Takeaways Introduction If you have ever built an AI application using GPT, Claude, Gemini, Llama, or another large language model, you've probably celebrated the moment your first prompt worked. The model answered intelligently, users loved the experience, and everything seemed perfect. Then came the cloud bill. What initially looked inexpensive suddenly became one of the largest operational costs in your application. Many developers assume AI infrastructure is expensive because of GPUs. Surprisingly, for many production applications, tokens—not GPUs—become the biggest recurring expense . Every prompt, every response, every retrieved document, every conversation history, and every AI agent interaction consumes tokens. Those tokens translate directly into cost. Imagine building an AI customer support chatbot. It serves 500 users during testing, and costs seem negligible. After launch, the application attracts 50,000 daily users. Each interaction now includes system prompts, conversation history, retrieved documents, tool outputs, and generated responses. Without careful optimization, token usage grows exponentially—and so does your bill. This is why token cost optimization is no longer just a performance concern. It has become a core engineering discipline. Just as software engineers optimize CPU and memory, AI engineers must optimize tokens. This guide is designed to help you understand the economics behind token usage before diving into optimization techniques. By mastering these fundamentals, you'll be able

📝 Originally published (in Japanese) at forge.workstyle.tech . You've got a code that looks correct when read, but when you open it in the browser, it's slightly different from the mockup - this "visual discrepancy" is the most troublesome part of UI development. A slight CSS specification, nesting of elements, and flex wrapping. Discrepancies that cannot be noticed by statically reading the code together will only appear when actually rendered. Until now, it was necessary for a human to open the screen in a browser, compare it with the mockup image, and verbally communicate the differences to the AI. This workflow replaces the process of "humans visually seeing and verbalizing" by showing the screen to the AI agent itself via the browser . By combining Claude Code and browser automation extensions (Chrome extensions), we will "see" the screen actually rendered on localhost, compare it with the mockup, identify layout discrepancies, and fix them. Why is it necessary to "show the actual screen"? There are limitations to just handing over the code for UI review. It's difficult for both humans and AI to completely reproduce the final rendering result in their minds from the code. In particular, these discrepancies are difficult to detect just by looking at the code. Layout skeleton discrepancies - One area is crushed when it's supposed to be a 2-column layout, or the vertical split ratio is different from the mockup, resulting in structural-level discrepancies Element placement errors - A preview that should be in the upper right column is wrapped around to the bottom Unexpected wrapping and overflow - The component wraps due to insufficient width, changing the impression from the mockup These discrepancies cannot be determined without seeing the "rendering result" as a fact. That's why we show the actual screen to the AI. Workflow: Show, Compare, and Fix 1. Provide the mockup as a baseline First, provide the target mockup image to the AI and share the baseline that "t

XML Tagging in Prompts: The Secret to Getting Better Output from Claude and GPT A simple structuring trick that turns messy, unpredictable LLM outputs into clean, reliable ones. If you've spent any time writing prompts for Claude, GPT, or any other large language model, you've probably hit this wall: your prompt works fine for a simple ask, but the moment you pack in multiple instructions — some context, a few examples, formatting rules, and the actual task — the model starts mixing things up. It answers the wrong part of the question. It ignores your formatting instructions. It treats your example output as part of the actual task. The fix is almost embarrassingly simple: wrap your prompt sections in XML tags. Why XML Tags Work So Well LLMs are trained on enormous amounts of code, documentation, and markup. XML (and HTML) syntax is deeply embedded in that training data, which means models are very good at recognizing where one tagged section ends and another begins. Unlike plain paragraphs — where the boundary between "here's my context" and "here's my instruction" is fuzzy — a tag creates an unambiguous boundary. Anthropic actually recommends this explicitly for Claude: wrapping distinct parts of a prompt (instructions, context, examples, output format) in tags like <instructions> , <context> , <example> , and <output_format> measurably improves consistency, especially in longer or more complex prompts. Think of it like the difference between handing someone a wall of text versus handing them a form with labeled fields. Both contain the same information, but one is far easier to parse correctly — for a human, and for a model. A Before-and-After Example Without tags: Summarize the article below in 3 bullet points. Keep it under 50 words. Use a neutral tone. Here's an example of the style I want: "- Company X raised $10M in Series A funding." Now here's the article: [long article text] The model has to guess where the instructions end and the article begins — and wi

Short answer To build an MCP server: install an official MCP SDK, declare your tools with typed inputs, optionally expose resources and prompts, run the server over stdio or HTTP, then connect an MCP client like Claude and test it. A minimal Python server is about ten lines; the work is in choosing what to expose and validating every input. This is the build . For what MCP is, its three primitives, and how it differs from an API, start with what is the Model Context Protocol — this page assumes that and goes straight to code. Prerequisites You need very little to get a server running locally: A language with an official SDK. Python and TypeScript are the most mature; the same protocol is also implemented for other languages. This guide uses the Python SDK (the secondary path most people search for), with notes on where the TypeScript SDK is equivalent. Python 3.10 or newer and uv (recommended) or pip to manage the environment. An MCP client to test against — Claude Desktop, or the MCP Inspector that ships with the SDK. You do not need cloud credentials to build or run the server itself. Conceptually a server exposes three things — tools (model-callable functions), resources (readable data), and prompts (reusable templates) . The steps below add them in that order. Exact SDK signatures evolve, so treat the snippets as the current shape and check the live docs before shipping. Which spec revision this builds against. The code here targets MCP revision 2025-11-25 — the revision the spec's versioning page still names as the current protocol version. Revision 2026-07-28 is published and reworks the wire format substantially. A server built against 2025-11-25 stays conformant today; what the new revision changes for a server author is set out below, so you can build now and plan the move. Step 1: scaffold the server Create a project, install the SDK, and write the smallest server that runs. With uv : uv init weather cd weather uv venv source .venv/bin/activate # Install t