The Complete Production SOP: How to Deploy and Run Hono RPC End-to-End Type Safety & Client Bindings in Autonomous AI Agents

---
name: "hono-rpc-type-safe-client"
description: "Share complete TypeScript types between Hono backend routes and frontend client without codegen."
metadata:
  author: "Hono"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup hono rpc client"
  - "share types backend frontend hono"
  - "zvalidator hono rpc"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { Hono } from 'hono';
import { zValidator } from '@hono/zod-validator';
import { z } from 'zod';

const postSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(1),
  tags: z.array(z.string()).default([]),
});

// Must chain routes directly onto a single instance to retain full inferred type graph
export const postsRoute = new Hono()
  .get('/', async (c) => {
    return c.json({ posts: [{ id: '1', title: 'First Post', content: 'Hello World', tags: ['general'] }] }, 200);
  })
  .post('/', zValidator('json', postSchema), async (c) => {
    const validated = c.req.valid('json');
    const newPost = { id: crypto.randomUUID(), ...validated };
    return c.json({ success: true, post: newPost }, 201);
  });

export type PostsRouteType = typeof postsRoute;

import { hc } from 'hono/client';
import type { AppType } from '../../../server/src/index';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

// Instantiate the strongly typed RPC client
export const api = hc<AppType>(API_URL, {
  headers: () => ({
    Authorization: `Bearer ${typeof window !== 'undefined' ? localStorage.getItem('token') ?? '' : ''}`,
  }),
});

// Example consumer with compile-time checked payload and response inference
export async function createPost(payload: { title: string; content: string; tags?: string[] }) {
  const res = await api.posts.$post({ json: payload });
  if (!res.ok) {
    const errorData = await res.json();
    throw new Error(`Failed to create post: ${JSON.stringify(errorData)}`);
  }
  return await res.json();
}