Integrate MeshInfer into your stack.

npm install @meshinfer/sdk @meshinfer/react

// lib/meshInfer.ts
import { MeshInfer } from '@meshinfer/sdk';

export const mesh = new MeshInfer({
  apiKey: process.env.NEXT_PUBLIC_MESHINFER_API_KEY,
  mode: 'auto',
  meshParticipationProfile: 'eco',
});

// app/components/ChatBox.tsx
'use client';
import { useMeshChat } from '@meshinfer/react';

export function ChatBox() {
  const { messages, send, isLoading, route } =
    useMeshChat({ model: 'local-small' });

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm">
        <span className="px-2 py-1 bg-blue-100 rounded">
          {route || 'routing...'}
        </span>
      </div>
      
      <div className="space-y-2">
        {messages.map((m, i) => (
          <div
            key={i}
            className={cn(
              'p-3 rounded',
              m.role === 'user'
                ? 'bg-slate-200 ml-8'
                : 'bg-slate-100 mr-8'
            )}
          >
            {m.content}
          </div>
        ))}
      </div>

      <input
        type="text"
        placeholder="Ask me anything..."
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            send(e.currentTarget.value);
            e.currentTarget.value = '';
          }
        }}
        className="w-full px-3 py-2 border rounded"
        disabled={isLoading}
      />
    </div>
  );
}

// app/api/summarize/route.ts
import { mesh } from '@/lib/meshInfer';

export async function POST(req: Request) {
  const { text } = await req.json();

  const res = await mesh.chat.completions.create({
    model: 'local-small',
    messages: [
      {
        role: 'system',
        content: 'Summarize the following in 2 sentences.',
      },
      { role: 'user', content: text },
    ],
    latency_preference: 'low',
    cost_preference: 'cheap',
  });

  return Response.json({
    summary: res.choices[0].message.content,
    route: res.route,
    saved: res.savings_usd,
  });
}