Protect your API key in frontend applications.
When building client-side applications (Next.js, React, Vue, etc.), you shouldn't expose your API key in browser code. The server proxy routes requests through your backend, keeping credentials safe.
How It Works
1Browser (SDK Client) → Your Server (Proxy) → api.inference.sh2 ↓ ↓ ↓3 proxyUrl config Injects API key Processes request- Client sends request to your proxy endpoint (e.g.,
/api/inference/proxy) - Proxy reads
INFERENCE_API_KEYfrom environment - Proxy forwards request to inference.sh with authentication
- Response passes back through to client
Quick Start
1. Install the SDK
1npm install @inferencesh/sdk2. Set Up the Proxy
Choose your framework:
Create app/api/inference/proxy/route.ts:
1import { route } from "@inferencesh/sdk/proxy/nextjs";2 3export const { GET, POST, PUT } = route;Create pages/api/inference/proxy.ts:
1export { handler as default } from "@inferencesh/sdk/proxy/nextjs";1import express from "express";2import * as inferenceProxy from "@inferencesh/sdk/proxy/express";3 4const app = express();5app.use(express.json());6 7app.all(inferenceProxy.route, inferenceProxy.handler);1import { Hono } from "hono";2import { createRouteHandler } from "@inferencesh/sdk/proxy/hono";3 4const app = new Hono();5const proxyHandler = createRouteHandler();6 7app.all("/api/inference/proxy", proxyHandler);8 9export default app;Create app/routes/api.inference.proxy.ts:
1import { createRequestHandler } from "@inferencesh/sdk/proxy/remix";2 3const handler = createRequestHandler();4 5export const loader = handler;6export const action = handler;Create src/routes/api/inference/proxy/+server.ts:
1import { createRequestHandler } from "@inferencesh/sdk/proxy/svelte";2 3const handler = createRequestHandler();4 5export const GET = handler;6export const POST = handler;7export const PUT = handler;3. Configure Environment Variable
Add your API key to your environment:
1# .env.local (Next.js) or .env2INFERENCE_API_KEY="inf_your_key_here"4. Configure the Client
1import { inference } from "@inferencesh/sdk";2 3// In your frontend code4const client = inference({5 proxyUrl: "/api/inference/proxy"6});7 8const result = await client.run({9 app: "infsh/flux",10 input: { prompt: "A sunset over mountains" }11});Custom Proxy Logic
Add rate limiting, analytics, or custom authentication:
1// app/api/inference/proxy/route.ts2import { route } from "@inferencesh/sdk/proxy/nextjs";3import { getSession } from "@/lib/auth";4 5export const POST = async (req: Request) => {6 // Check authentication7 const session = await getSession();8 if (!session) {9 return Response.json({ error: "Unauthorized" }, { status: 401 });10 }11 12 // Add analytics13 await analytics.track("inference_request", {14 userId: session.user.id,15 targetUrl: req.headers.get("x-inf-target-url")16 });17 18 // Check rate limit19 if (await rateLimiter.isLimited(session.user.id)) {20 return Response.json({ error: "Too many requests" }, { status: 429 });21 }22 23 // Forward to inference.sh24 return route.POST(req);25};26 27export const GET = route.GET;Custom API Key Resolution
For advanced setups (multi-tenant, secrets manager):
1import { createRouteHandler } from "@inferencesh/sdk/proxy/hono";2 3const proxyHandler = createRouteHandler({4 resolveApiKey: async () => {5 // Load from secrets manager6 return await vault.getSecret("INFERENCE_API_KEY");7 }8});Security Notes
[!IMPORTANT] Never expose your API key in client-side code. The proxy exists specifically to keep credentials on your server.
The proxy validates that:
- Target URL is an
inference.shdomain INFERENCE_API_KEYenvironment variable is set- Request includes the
x-inf-target-urlheader
Streaming Support
The proxy supports SSE streaming for real-time updates:
1const client = inference({ proxyUrl: "/api/inference/proxy" });2 3const result = await client.run(4 { app: "infsh/flux", input: { prompt: "Hello" } },5 {6 onUpdate: (update) => {7 console.log("Status:", update.status);8 }9 }10);Note: Next.js Page Router doesn't support streaming. Use App Router for real-time updates.
Next Steps
- Vercel Deployment — Deploy with Vercel integration
- Running Apps — Learn about task execution
- Streaming — Real-time progress updates