The TypeScript engineer’s AI toolkit.
An essential starting guide for frontend and TypeScript engineers building AI products. Learn the core, understand the ecosystem, and ship something useful.
Mastra coordinates AI work. Temporal coordinates durable business processes. BullMQ processes queued jobs.
These categories overlap, but solve different primary problems. Retries still need application-level protection against duplicate side effects.
What to learn first
You do not need fluency in 126 tools. Build fluency in a small stack and learn when the alternatives matter.
Be fluent in the foundations
TypeScript, JavaScript, HTML, CSS, accessibility, HTTP, async code, Git, and a UI framework you already use. Understand server/client boundaries, SQL, authentication, and runtime validation with Zod.
Proof: you can ship, debug, and explain a typed application without treating generated code as a black box.
Ship one complete AI feature
Choose one coding assistant, one provider SDK or AI SDK, and one model. Learn prompts, context limits, structured output, tool calling, streaming, cancellation, retries, and usage costs.
Proof: a user can start a task, inspect the result, recover from failure, and stop work in progress.
Make the behavior trustworthy
Use Vitest and Playwright for software behavior, Promptfoo or Braintrust for AI evaluations, and Langfuse or OpenTelemetry for traces. Learn retrieval, citations, permissions, and approval before consequential actions.
Proof: you can show failure cases, compare prompt changes, and explain latency, cost, and access boundaries.
Recognize the specialist tools
Know what MCP and agent frameworks, vector search, durable workflows, and deployment platforms solve. Learn one deeply when your product needs it; explore mobile, voice, or local inference when the use case warrants it.
Proof: you can justify a dependency and describe the simpler design you considered.
A suggested first stack: TypeScript + React/Next.js + Node.js + Zod + AI SDK + one model provider + PostgreSQL/Supabase + Vitest + Playwright + Promptfoo + Langfuse. Keep your existing framework if you already know it. These are editorial starting choices, not prerequisites.
Build your AI engineering toolkit
Learn one coding assistant and one model integration deeply, then add evaluation and interface tools.
AI coding assistants
Choose one. Practice planning, reviewing diffs, testing, and controlling permissions.
- Codex official documentation (opens in new tab) Coding agent
- Works with your codebase to implement, test, and review software through coding-agent interfaces.
- Claude Code official documentation (opens in new tab) Coding agent
- Explores repositories, edits code, and runs development commands through an agentic coding workflow.
- Cursor official documentation (opens in new tab) AI editor
- Combines a code editor with AI assistance and agents that can work across a repository.
- GitHub Copilot official documentation (opens in new tab) Coding assistant
- Supports AI-assisted coding, chat, and agent workflows across supported editors and GitHub.
Model APIs & provider SDKs
Understand direct API calls before relying on an orchestration framework.
- OpenAI SDK official documentation (opens in new tab) Provider SDK
- Connects TypeScript applications to OpenAI APIs for model responses, streaming, and tool-enabled applications.
- Anthropic SDK official documentation (opens in new tab) Provider SDK
- Calls Claude from TypeScript with typed requests, streaming, retries, and error handling.
- Google GenAI SDK official documentation (opens in new tab) Provider SDK
- Connects JavaScript and TypeScript applications to Gemini through the official @google/genai package.
AI evaluation & experiments
Keep a repeatable dataset of realistic successes, edge cases, and failures.
- Promptfoo official documentation (opens in new tab) Evaluation toolkit
- Tests prompts and models against datasets and assertions, with red-team workflows for finding vulnerabilities.
- Braintrust official documentation (opens in new tab) Evaluation platform
- Connects AI traces, datasets, scorers, and experiments to measure changes in application quality.
AI interface components
Know streaming, cancellation, tool status, approvals, and recovery before choosing components.
- assistant-ui official documentation (opens in new tab) React library
- Provides composable React components and runtime integrations for conversational AI interfaces.
- CopilotKit official documentation (opens in new tab) Application toolkit
- Connects agents to application interfaces, shared state, and user-facing actions.
Build the application
The runtime, interface, and boundaries of your product.
Runtimes & packages
Where does the code run?
- Node.js official documentation (opens in new tab) Runtime
- The standard server-side JavaScript runtime for APIs, workers, scripts, and command-line tools.
- Bun official documentation (opens in new tab) Toolkit
- Combines a JavaScript runtime, package manager, bundler, and test runner in one toolkit.
- Deno official documentation (opens in new tab) Runtime
- Runs JavaScript and TypeScript with built-in tooling and explicit permissions for system access.
- npm official documentation (opens in new tab) Package manager
- Installs dependencies and runs package scripts using the JavaScript package registry.
- pnpm official documentation (opens in new tab) Package manager
- Manages dependencies and monorepo workspaces with a shared, disk-efficient package store.
UI frameworks
How do you build the interface?
- React official documentation (opens in new tab) Library
- Builds component-based interfaces with a large ecosystem of application and rendering frameworks.
- Vue official documentation (opens in new tab) Framework
- Builds reactive interfaces with single-file components and an approachable template-based model.
- Angular official documentation (opens in new tab) Framework
- Provides an integrated application framework with dependency injection, routing, forms, and TypeScript conventions.
- Svelte official documentation (opens in new tab) Framework
- Compiles declarative components into JavaScript that updates the interface when state changes.
- SolidJS official documentation (opens in new tab) Library
- Uses JSX and fine-grained reactivity to update interfaces without a virtual DOM.
Application frameworks
Who owns routing and rendering?
- Next.js official documentation (opens in new tab) Framework
- Adds routing, server rendering, React Server Components, and server-side capabilities to React applications.
- React Router official documentation (opens in new tab) Framework / library
- Provides React routing, loaders, actions, and optional full-stack rendering through its framework mode.
- TanStack Start official documentation (opens in new tab) Framework
- Builds full-stack applications around TanStack Router, server functions, and server rendering.
- Nuxt official documentation (opens in new tab) Framework
- Adds file-based routing, server rendering, and server endpoints to Vue applications.
- SvelteKit official documentation (opens in new tab) Framework
- Provides routing, server rendering, form actions, and deployment adapters for Svelte applications.
- Astro official documentation (opens in new tab) Framework
- Builds content-focused websites with mostly static HTML and selectively interactive components.
Backend & APIs
How do requests become business logic?
- Hono official documentation (opens in new tab) Framework
- Provides a small web-standards-based API framework that works across multiple JavaScript runtimes.
- Fastify official documentation (opens in new tab) Framework
- Builds Node.js APIs with a plugin architecture and schema-based validation and serialization.
- Express official documentation (opens in new tab) Framework
- Provides minimal Node.js routing and middleware, leaving application structure to your team.
- NestJS official documentation (opens in new tab) Framework
- Structures TypeScript backends around modules, controllers, services, and dependency injection.
- AdonisJS official documentation (opens in new tab) Framework
- Offers an integrated TypeScript backend with routing, authentication, validation, and database tooling.
- Elysia official documentation (opens in new tab) Framework
- Builds APIs with schema-driven validation and inferred types, with a strong focus on Bun.
Contracts & correctness
Can you trust data crossing a boundary?
- Zod official documentation (opens in new tab) Library
- Validates untrusted data at runtime and infers TypeScript types from the same schemas.
- tRPC official documentation (opens in new tab) Library
- Shares typed API contracts between TypeScript clients and servers without a separate schema-generation step.
- OpenAPI official documentation (opens in new tab) Standard
- Describes HTTP APIs in a language-neutral format for documentation, validation, and generated clients.
- GraphQL Yoga official documentation (opens in new tab) Server library
- Runs GraphQL APIs with a schema and resolvers when clients need flexible, typed queries.
- Effect official documentation (opens in new tab) Library
- Models typed failures, dependencies, resource lifetimes, and concurrency for complex application logic.
Components, forms & tables
Which interface building blocks can you reuse?
- Tailwind CSS official documentation (opens in new tab) CSS toolkit
- Styles interfaces with utility classes and configurable design tokens directly in your markup.
- shadcn/ui official documentation (opens in new tab) Component source
- Provides customizable component source code that you copy into and own within your application.
- Radix Primitives official documentation (opens in new tab) Library
- Supplies accessible, unstyled interaction primitives such as dialogs, menus, and popovers.
- Material UI official documentation (opens in new tab) Library
- Provides ready-made React components based on Material Design with extensive theming support.
- React Hook Form official documentation (opens in new tab) Library
- Manages form values, validation, and submission while minimizing unnecessary React renders.
- TanStack Table official documentation (opens in new tab) Library
- Supplies headless sorting, filtering, pagination, and table state while you control the markup.
State & data fetching
What changes, and who keeps it in sync?
- TanStack Query official documentation (opens in new tab) Library
- Fetches, caches, retries, and synchronizes server data in your interface.
- Zustand official documentation (opens in new tab) Library
- Provides small shared state stores for React and vanilla JavaScript applications.
- Redux Toolkit official documentation (opens in new tab) Library
- Organizes shared application state with predictable updates, tooling, and optional RTK Query data fetching.
- Jotai official documentation (opens in new tab) Library
- Builds shared React state from small composable atoms and derived values.
- XState official documentation (opens in new tab) Library
- Models explicit states, events, and transitions for complicated UI and application behavior.
Store and synchronize data
Persistence, identity, collaboration, and finding information.
Database access
How does TypeScript read and write SQL?
- Prisma official documentation (opens in new tab) ORM
- Generates a typed database client and manages schemas and migrations through a declarative model.
- Drizzle official documentation (opens in new tab) ORM
- Defines SQL-oriented schemas and typed queries in TypeScript with migration tooling.
- Kysely official documentation (opens in new tab) Query builder
- Builds type-safe SQL queries while keeping SQL structure and database behavior visible.
- mysql2 official documentation (opens in new tab) Driver
- Connects Node.js applications to MySQL with prepared statements, connection pools, and promise APIs.
- node-postgres official documentation (opens in new tab) Driver
- Connects Node.js applications to PostgreSQL using direct SQL, parameters, transactions, and pools.
Data platforms & caching
Which storage capabilities do you want managed?
- Supabase official documentation (opens in new tab) Platform
- Combines PostgreSQL, authentication, object storage, realtime features, and generated data APIs.
- Firebase official documentation (opens in new tab) Platform
- Provides managed app services including authentication, databases, storage, and serverless functions.
- Convex official documentation (opens in new tab) Platform
- Combines a reactive database with TypeScript backend functions and live query subscriptions.
- Neon official documentation (opens in new tab) Service
- Hosts PostgreSQL with database branching and compute that can scale independently of storage.
- Redis official documentation (opens in new tab) Data store
- Supports fast caching, counters, coordination, streams, and queue infrastructure alongside your primary database.
Identity & permissions
Who is signed in, and what may they do?
- Better Auth official documentation (opens in new tab) Library
- Adds authentication, sessions, and optional organization and identity features to your own application.
- Auth.js official documentation (opens in new tab) Library
- Integrates authentication providers and session handling with supported web frameworks.
- Clerk official documentation (opens in new tab) Service
- Provides hosted identity, sign-in components, sessions, and organization features.
- WorkOS official documentation (opens in new tab) Service
- Adds enterprise identity features such as SSO, directory sync, and hosted user management.
- CASL official documentation (opens in new tab) Library
- Expresses authorization rules for which actions a user can perform on particular resources.
Realtime & collaboration
How do users see and edit changes together?
- Socket.IO official documentation (opens in new tab) Library
- Provides bidirectional events, reconnection, and rooms between clients and servers.
- Ably official documentation (opens in new tab) Service
- Provides managed realtime messaging, channels, presence, and client synchronization capabilities.
- Liveblocks official documentation (opens in new tab) Platform
- Adds collaborative editing, presence, comments, and notifications to applications.
- Yjs official documentation (opens in new tab) Library
- Synchronizes shared data structures for collaborative editing using conflict-free replicated data types.
- Electric official documentation (opens in new tab) Sync engine
- Streams subsets of PostgreSQL data to clients for responsive applications with synchronized local data.
Search & retrieval
How do users or models find relevant information?
- Algolia official documentation (opens in new tab) Service
- Provides managed search with relevance tuning, filtering, and client-side search components.
- Meilisearch official documentation (opens in new tab) Search engine
- Adds typo-tolerant full-text search and filtering through an API with JavaScript integrations.
- Typesense official documentation (opens in new tab) Search engine
- Provides typo-tolerant search, filtering, and vector search through an API.
- pgvector official documentation (opens in new tab) Database extension
- Adds vector storage and similarity search to PostgreSQL for embedding-based retrieval.
- Qdrant official documentation (opens in new tab) Vector database
- Stores embeddings and performs similarity search with metadata filters through a TypeScript client.
Run work and connect services
Background execution, AI, and the systems around your application.
Jobs & durable workflows
What must keep going after a request ends?
- Temporal official documentation (opens in new tab) Workflow platform
- Coordinates durable processes with timers, retries, external events, and recovery across worker failures.
- BullMQ official documentation (opens in new tab) Queue library
- Runs background jobs with workers, retries, scheduling, and concurrency controls, commonly backed by Redis.
- Inngest official documentation (opens in new tab) Execution platform
- Executes event-driven functions with durable steps, retries, scheduling, and concurrency controls.
- Trigger.dev official documentation (opens in new tab) Job platform
- Runs long-running TypeScript background tasks with managed execution, retries, scheduling, and monitoring.
- Restate official documentation (opens in new tab) Execution platform
- Adds durable execution and stateful services through a runtime that records progress and recovers work.
AI & agent orchestration
How do models use tools and produce useful results?
- Mastra official documentation (opens in new tab) Framework
- Combines TypeScript agents, tools, workflows, memory, and observability for AI-powered applications.
- AI SDK official documentation (opens in new tab) Library
- Offers a unified interface for model calls, structured output, tool use, and streaming AI interfaces.
- LangChain.js official documentation (opens in new tab) Framework
- Composes model integrations, tools, retrieval, and agent components in JavaScript and TypeScript.
- LangGraph.js official documentation (opens in new tab) Framework
- Builds stateful agent graphs with persistence, explicit control flow, and human intervention.
- MCP TypeScript SDK official documentation (opens in new tab) Protocol SDK
- Implements clients and servers for the Model Context Protocol to expose tools and contextual resources.
- OpenAI Agents SDK official documentation (opens in new tab) Agent SDK
- Runs agent loops, tools, and handoffs inside your application with TypeScript and Python SDKs.
Payments & messaging
How does the application connect to customers?
- Stripe official documentation (opens in new tab) Service
- Handles payments, subscriptions, invoices, and billing events through APIs and a TypeScript-supported SDK.
- Resend official documentation (opens in new tab) Service
- Sends transactional and other application email through a developer-focused API.
- React Email official documentation (opens in new tab) Library
- Builds email templates with React components for rendering into email-compatible HTML.
- Novu official documentation (opens in new tab) Platform
- Orchestrates notifications across channels with templates, preferences, and an embeddable inbox.
- Svix official documentation (opens in new tab) Service / server
- Delivers outgoing webhooks with signing, retries, and operational visibility.
Content, files & documents
What happens beyond forms and database rows?
- Payload official documentation (opens in new tab) Framework / CMS
- Provides a TypeScript content backend with an admin interface, access control, and APIs.
- Sanity official documentation (opens in new tab) Platform
- Manages structured content with a customizable editing studio and queryable content APIs.
- Tiptap official documentation (opens in new tab) Editor toolkit
- Builds extensible rich-text editors with schema-based documents and optional collaboration features.
- PDF.js official documentation (opens in new tab) Library
- Parses and renders PDFs in JavaScript and exposes text content for document processing.
- Cheerio official documentation (opens in new tab) Library
- Parses HTML and XML for server-side querying and extraction without running a browser.
- AWS SDK for JavaScript official documentation (opens in new tab) SDK
- Connects TypeScript applications to services such as S3 storage, SES email, and SQS queues.
Test, ship, and operate
The tools that keep a business application maintainable in production.
Testing & accessibility
How do you know the behavior is correct?
- Vitest official documentation (opens in new tab) Test runner
- Runs unit and integration tests with TypeScript support and close integration with Vite.
- Jest official documentation (opens in new tab) Test runner
- Provides a broad JavaScript testing toolkit with mocking, assertions, and snapshots.
- Playwright official documentation (opens in new tab) Browser automation
- Tests real browser journeys across Chromium, Firefox, and WebKit with traces and screenshots.
- Testing Library official documentation (opens in new tab) Library
- Tests UI components through user-observable behavior and accessible queries.
- MSW official documentation (opens in new tab) Mocking library
- Intercepts network requests for reusable API mocks in browsers and Node.js tests.
- axe-core official documentation (opens in new tab) Testing engine
- Finds many accessibility violations automatically; manual keyboard and assistive-technology checks still matter.
Observability & product feedback
What is happening in production?
- OpenTelemetry official documentation (opens in new tab) Standard / SDK
- Instruments traces, metrics, and logs so telemetry can flow to compatible observability backends.
- Sentry official documentation (opens in new tab) Platform
- Tracks application errors and performance with context to diagnose production failures.
- Pino official documentation (opens in new tab) Logging library
- Produces structured JSON logs for Node.js services with low logging overhead.
- PostHog official documentation (opens in new tab) Platform
- Combines product analytics, session replay, feature flags, and experiments.
- Langfuse official documentation (opens in new tab) Platform
- Traces LLM calls and supports prompt management and evaluations for AI applications.
Builds & code quality
How does source become a maintainable release?
- TypeScript / tsc official documentation (opens in new tab) Compiler
- Checks static types and can emit JavaScript; runtime input validation remains a separate concern.
- Vite official documentation (opens in new tab) Build tool
- Provides a development server and production build pipeline for modern web applications.
- ESLint official documentation (opens in new tab) Linter
- Detects code problems and enforces project conventions through configurable rules and plugins.
- Prettier official documentation (opens in new tab) Formatter
- Applies consistent formatting so teams avoid manual style decisions in code reviews.
- Biome official documentation (opens in new tab) Toolchain
- Combines formatting, linting, and other code-quality tools in one toolchain.
- Turborepo official documentation (opens in new tab) Build orchestrator
- Coordinates and caches tasks across JavaScript and TypeScript monorepo packages.
- Nx official documentation (opens in new tab) Build platform
- Manages monorepo project graphs, task execution, caching, and code-generation workflows.
Deployment & infrastructure
Where does the application live?
- Vercel official documentation (opens in new tab) Hosting platform
- Deploys web applications with previews, CDN delivery, and managed server-side execution.
- Cloudflare Workers official documentation (opens in new tab) Runtime / platform
- Runs JavaScript and TypeScript on Cloudflare infrastructure with integrated storage and messaging services.
- AWS Lambda official documentation (opens in new tab) Service
- Runs event-triggered functions without managing servers, with configurable runtime and execution limits.
- Docker official documentation (opens in new tab) Packaging toolkit
- Packages applications and their runtime dependencies into containers for consistent deployment.
- GitHub Actions official documentation (opens in new tab) Automation service
- Runs repository-triggered workflows for testing, building, release automation, and deployment.
- Pulumi official documentation (opens in new tab) Infrastructure toolkit
- Defines cloud infrastructure as code using TypeScript and other general-purpose languages.
- AWS CDK official documentation (opens in new tab) Infrastructure toolkit
- Defines AWS infrastructure in TypeScript and synthesizes it into CloudFormation templates.
Go beyond the browser
Reuse web and TypeScript knowledge on other devices.
Mobile & desktop
What if the product is more than a website?
- React Native official documentation (opens in new tab) Framework
- Builds native mobile interfaces using React and JavaScript or TypeScript.
- Expo official documentation (opens in new tab) Framework / platform
- Adds routing, native modules, development tools, and build services around React Native.
- Electron official documentation (opens in new tab) Framework
- Builds desktop applications by packaging a web interface with Chromium and Node.js.
- Tauri official documentation (opens in new tab) Framework
- Combines a web interface with a Rust host and system webviews for desktop and mobile apps.
- Capacitor official documentation (opens in new tab) Native bridge
- Packages web applications for mobile and exposes device capabilities through native plugins.
Build your proof
A working product and an honest engineering write-up are more useful than a long list of familiar logos.
Build a document-backed assistant
Start with a small document collection and a typed, streaming interface. Add ingestion, retrieval, source citations, and a clear “I don’t know” path. Only retrieve documents the signed-in user may access.
Then add one tool that proposes a change and waits for approval. Keep API secrets on the server, validate inputs and tool arguments, escape untrusted output, and treat retrieved text as data rather than instructions.
Publish the engineering evidence
Ship a live demo, a readable repository, an architecture explanation, and a repeatable evaluation set. Include ambiguous questions, missing evidence, malicious document instructions, tool failures, and unauthorized access attempts.
Report measured quality, time to first response, total latency, and cost per task. Show a failed approach, what you changed, and how you verified the improvement. Never publish credentials or private user traces.
Continue learning: Streaming AI interfaces, tool calling and approvals, and MCP architecture. Your application still owns authorization and the consequences of every action.
TypeScript and AI engineering reference · Updated September 30, 2026