Which HTTP clients can I use?

While the provided examples focus on Axios and TanStack Query, the patterns and type-generation techniques can be adapted for Fetch API or other request libraries.

How does this skill use Apidog?

It connects to an Apidog-generated OpenAPI specification via an MCP server, enabling Claude to read and interpret the latest API documentation directly during the coding process.

Does it support runtime validation?

Absolutely. The skill provides implementation patterns for using Zod to validate API responses at runtime, ensuring your frontend data matches the backend schema.

Can I use this with local OpenAPI files?

Yes, the skill supports both remote URLs and local JSON/YAML files for the OpenAPI specification through the apidog-mcp-server configuration.

API Integration (Apidog + OpenAPI)

Name: API Integration (Apidog + OpenAPI)
Author: MadAppGang

byMadAppGang

•

177

•

Desarrollo de API

Automates the synchronization of OpenAPI specifications with React frontends using Apidog MCP for type-safe API client generation.

This skill streamlines the process of integrating backend APIs into React applications by establishing a single source of truth through OpenAPI specifications. It leverages Apidog and the Model Context Protocol (MCP) to allow Claude to read live API definitions, generate precise TypeScript types, and implement a robust query layer using TanStack Query and Axios. By enforcing runtime validation with Zod and providing structured patterns for hooks and mutations, it ensures frontend-backend alignment and significantly reduces integration errors in complex applications.

Características Principales

01Configurable HTTP client setup with Axios and authentication interceptors

02Apidog MCP integration for real-time AI access to API specifications

03Runtime response validation using Zod schemas for enhanced type safety

04177 GitHub stars

05Automated TypeScript type generation from OpenAPI 3.0/3.1 specs

06Standardized TanStack Query hook scaffolding for queries and mutations

Casos de Uso

01Synchronizing frontend models with backend changes via live OpenAPI endpoints

02Setting up a type-safe API client layer in a new React or TypeScript project

03Implementing complex data fetching logic with hierarchical query key management

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code api-integration

For use in Claude.ai and ChatGPT

Download Skill