Loading...
Loading...
API design and implementation across REST, GraphQL, gRPC, and tRPC patterns. Use when building backend services, public APIs, or service-to-service communication. Covers REST frameworks (FastAPI, Axum, Gin, Hono), GraphQL libraries (Strawberry, async-graphql, gqlgen, Pothos), gRPC (Tonic, Connect-Go), tRPC for TypeScript, pagination strategies (cursor-based, offset-based), rate limiting, caching, versioning, and OpenAPI documentation generation. Includes frontend integration patterns for forms, tables, dashboards, and ai-chat skills.
npx skill4agent add ancoleman/ai-design-components implementing-api-patternsWHO CONSUMES YOUR API?
├─ PUBLIC/THIRD-PARTY DEVELOPERS → REST with OpenAPI
│ ├─ Python → FastAPI (auto-docs, 40k req/s)
│ ├─ TypeScript → Hono (edge-first, 50k req/s, 14KB)
│ ├─ Rust → Axum (140k req/s, <1ms latency)
│ └─ Go → Gin (100k+ req/s, mature ecosystem)
│
├─ FRONTEND TEAM (same org)
│ ├─ TypeScript full-stack? → tRPC (E2E type safety)
│ └─ Complex data needs? → GraphQL
│ ├─ Python → Strawberry
│ ├─ Rust → async-graphql
│ ├─ Go → gqlgen
│ └─ TypeScript → Pothos
│
├─ SERVICE-TO-SERVICE (microservices)
│ └─ High performance → gRPC
│ ├─ Rust → Tonic
│ ├─ Go → Connect-Go (browser-friendly)
│ └─ Python → grpcio
│
└─ MOBILE APPS
├─ Bandwidth constrained → GraphQL (request only needed fields)
└─ Simple CRUD → REST (standard, well-understood)from fastapi import FastAPI
from pydantic import BaseModel
app = FastAPI()
class Item(BaseModel):
name: str
price: float
@app.post("/items")
async def create_item(item: Item):
return {"id": 1, **item.dict()}references/rest-design-principles.mdexamples/python-fastapi/import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'
const app = new Hono()
app.post('/items', zValidator('json', z.object({
name: z.string(), price: z.number()
})), (c) => c.json({ id: 1, ...c.req.valid('json') }))references/rest-design-principles.mdexamples/typescript-hono/import { initTRPC } from '@trpc/server'
import { z } from 'zod'
const t = initTRPC.create()
export const appRouter = t.router({
createItem: t.procedure
.input(z.object({ name: z.string(), price: z.number() }))
.mutation(({ input }) => ({ id: '1', ...input }))
})
export type AppRouter = typeof appRouterreferences/trpc-setup-guide.mdexamples/typescript-trpc/use axum::{routing::post, Json, Router};
use serde::{Deserialize, Serialize};
#[derive(Deserialize)]
struct CreateItem { name: String, price: f64 }
#[derive(Serialize)]
struct Item { id: u64, name: String, price: f64 }
async fn create_item(Json(payload): Json<CreateItem>) -> Json<Item> {
Json(Item { id: 1, name: payload.name, price: payload.price })
}references/rest-design-principles.mdexamples/rust-axum/type Item struct {
Name string `json:"name" binding:"required"`
Price float64 `json:"price" binding:"required,gt=0"`
}
r := gin.Default()
r.POST("/items", func(c *gin.Context) {
var item Item
if c.ShouldBindJSON(&item); err != nil {
c.JSON(400, gin.H{"error": err.Error()}); return
}
c.JSON(201, item)
})references/rest-design-principles.mdexamples/go-gin/| Language | Framework | Req/s | Latency | Cold Start | Memory | Best For |
|---|---|---|---|---|---|---|
| Rust | Actix-web | ~150k | <1ms | N/A | 2-5MB | Maximum throughput |
| Rust | Axum | ~140k | <1ms | N/A | 2-5MB | Ergonomics + performance |
| Go | Gin | ~100k+ | 1-2ms | N/A | 5-10MB | Mature ecosystem |
| TypeScript | Hono | ~50k | <5ms | <5ms | 128MB | Edge deployment |
| Python | FastAPI | ~40k | 5-10ms | 1-2s | 30-50MB | Developer experience |
| TypeScript | Express | ~15k | 10-20ms | 1-3s | 50-100MB | Legacy systems |
@app.get("/items")
async def list_items(cursor: Optional[str] = None, limit: int = 20):
query = db.query(Item).filter(Item.id > cursor) if cursor else db.query(Item)
items = query.limit(limit).all()
return {
"items": items,
"next_cursor": items[-1].id if items else None,
"has_more": len(items) == limit
}references/pagination-patterns.md| Framework | OpenAPI Support | Docs UI | Configuration |
|---|---|---|---|
| FastAPI | Automatic | Swagger UI + ReDoc | Built-in |
| Hono | Middleware plugin | Swagger UI | |
| Axum | utoipa crate | Swagger UI | Manual annotations |
| Gin | swaggo/swag | Swagger UI | Comment annotations |
app = FastAPI(title="My API", version="1.0.0")
@app.post("/items", tags=["items"])
async def create_item(item: Item) -> Item:
"""Create item with name and price"""
return item
# Docs at /docs, /redoc, /openapi.jsonreferences/openapi-documentation.mdscripts/generate_openapi.pyclass UserCreate(BaseModel):
email: EmailStr; name: str; age: int
@app.post("/api/users", status_code=201)
async def create_user(user: UserCreate):
return {"id": 1, **user.dict()}const res = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
if (!res.ok) throw new Error((await res.json()).detail)references/pagination-patterns.mdfrom sse_starlette.sse import EventSourceResponse
@app.post("/api/chat")
async def chat(message: str):
async def gen():
for chunk in llm_stream(message):
yield {"event": "message", "data": chunk}
return EventSourceResponse(gen())const es = new EventSource('/api/chat')
es.addEventListener('message', (e) => appendToChat(e.data))examples/from slowapi import Limiter
from slowapi.util import get_remote_address
limiter = Limiter(key_func=get_remote_address)
app.state.limiter = limiter
@app.get("/items")
@limiter.limit("100/minute")
async def list_items():
return {"items": []}references/rate-limiting-strategies.mdreferences/graphql-schema-design.mdexamples/graphql-strawberry/references/grpc-protobuf-guide.mdexamples/grpc-tonic/references/rest-design-principles.mdreferences/graphql-schema-design.mdreferences/grpc-protobuf-guide.mdreferences/trpc-setup-guide.mdreferences/pagination-patterns.mdreferences/rate-limiting-strategies.mdreferences/caching-patterns.mdreferences/versioning-strategies.mdreferences/openapi-documentation.mdscripts/generate_openapi.pyscripts/validate_api_spec.pyscripts/benchmark_endpoints.pyexamples/python-fastapi/examples/typescript-hono/examples/typescript-trpc/examples/rust-axum/examples/go-gin/examples/graphql-strawberry/examples/grpc-tonic/