langgraph-typescript-quickstart — Claude Code skill
Scaffolds a minimal local LangGraph agent in TypeScript following official docs. Useful when testing graph architectures locally without polluting existing repositories.
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a claude-codeWhat langgraph-typescript-quickstart does
The skill reads the live LangGraph quickstart page and implements a calculator agent using the Graph API. It asks for your chosen provider:model string (suggesting anthropic:claude-sonnet-5 by default) and plugs it into initChatModel. Graph visualization is omitted.
All scaffolded code stays inside a fresh directory such as langgraph-agent/. This strict folder isolation prevents accidental edits across the main workspace. The only required secret is the provider API key stored in .env, which should be edited directly rather than pasted into conversation logs.
If you use Claude Sonnet 5 or newer, the skill strips unsupported parameters like temperature, top_p, and top_k. It installs dependencies, runs an addition test, prints the result, and terminates.
What it helps with
- scaffold a minimal LangGraph agent in TypeScript
- configure any supported model via initChatModel
- isolate experimental agent files from the primary project
- run a quick sanity check without manual plumbing
Example prompts for the agent
- Scaffold a minimal LangGraph agent in TypeScript
- Set up a local LangGraph agent using google-genai:gemini-2.5-flash-lite
- Build a calculator agent following the LangGraph quickstart
How to install langgraph-typescript-quickstart
1Skills CLI (Vercel)
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a claude-code2Manually: put the files in place
~/.claude/skills/langgraph-typescript-quickstart/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/langgraph-typescript-quickstart/
1Skills CLI (Vercel)
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a codex2Manually: put the files in place
.agents/skills/langgraph-typescript-quickstart/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a cursor2Manually: put the files in place
.cursor/skills/langgraph-typescript-quickstart/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install langchain-ai/langchain-skills langgraph-typescript-quickstart2Manually: put the files in place
.github/skills/langgraph-typescript-quickstart/SKILL.md1Skills CLI (Vercel)
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a gemini-cli2Platform CLI
gemini skills install https://github.com/langchain-ai/langchain-skills --path config/skills/langgraph-typescript-quickstartManually: put the files in place
.devin/skills/langgraph-typescript-quickstart/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about langgraph-typescript-quickstart
How do I install langgraph-typescript-quickstart in Claude Code?
Run npx skills add langchain-ai/langchain-skills --skill langgraph-typescript-quickstart -a claude-code in your terminal.
What does langgraph-typescript-quickstart do?
It creates an isolated TypeScript project with a LangGraph math agent based on official documentation. The agent installs packages, requests an API key in .env, and executes a test run.
How does the skill handle Claude Sonnet 5 parameters?
When configuring Claude Sonnet 5 or later models, the skill omits temperature, top_p, and top_k because they are unsupported.
Source text
SKILL.md · MIT
---
name: langgraph-typescript-quickstart
description: "Scaffold a minimal local LangGraph agent in TypeScript by following the official quickstart. Use when the user wants to quickly build or try a LangGraph agent locally."
---
# LangGraph TypeScript quickstart
Follow the live docs — do not invent an alternate API from memory:
**https://docs.langchain.com/oss/javascript/langgraph/quickstart**
Fetch that page (Docs MCP or HTTP) and implement what it shows (calculator / math agent with the Graph API). Prefer the Graph API path over the Functional API unless the user asks otherwise. Skip graph visualization.
## Local setup constraints
Apply these on top of the quickstart (they keep setup minimal and model-agnostic):
1. **Ask** which provider/model to use. Showcase that LangGraph works with any LangChain chat model. Suggested prompt:
> Which model should this agent use? Pass a `provider:model` string — e.g. `openai:gpt-5.5`, `anthropic:claude-sonnet-5`, `google-genai:gemini-2.5-flash-lite`. Default if you're unsure: **`anthropic:claude-sonnet-5`**.
The docs often hardcode Anthropic — replace with `initChatModel("<MODEL>")` (or equivalent) using their choice. If using Claude Sonnet 5+, omit `temperature` / `top_p` / `top_k` (unsupported).
2. Create a **new** directory (e.g. `langgraph-agent/`) and do all work there — do not pollute the open project.
3. Only secret: the provider API key in `.env` (gitignored). No LangSmith / Tavily unless they ask. Prefer they edit `.env` themselves — don't paste keys into chat.
4. Install packages from the quickstart plus the provider package for their model.
5. Run the example (e.g. “Add 3 and 4.”), show output, then stop. Point to `langgraph-fundamentals` for next steps. For a higher-level agent API, use LangChain `createAgent` instead.
© langchain-ai · MIT · langchain-ai/langchain-skills
