Vercel AI SDK Chat

import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import { streamText } from "ai";

const generalcompute = createOpenAICompatible({
  name: "generalcompute",
  baseURL: "https://api.generalcompute.com/v1",
  headers: {
    Authorization: `Bearer ${process.env.GENERALCOMPUTE_API_KEY}`,
  },
});

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

  const result = streamText({
    model: generalcompute("minimax-m2.7"),
    // Convert UI messages (parts format) to model messages (content format)
    messages: messages.map((m: { role: string; parts?: { type: string; text: string }[]; content?: string }) => ({
      role: m.role,
      content: m.parts
        ? m.parts.filter((p) => p.type === "text").map((p) => p.text).join("")
        : m.content,
    })),
  });

  return result.toUIMessageStreamResponse();
}

"use client";

import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const { messages, sendMessage, status } = useChat();
  const [input, setInput] = useState("");

  const isLoading = status === "streaming" || status === "submitted";

  return (
    <div style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
      <h1>Chat with General Compute</h1>

      <div style={{ marginBottom: 20 }}>
        {messages.map((m) => (
          <div key={m.id} style={{ marginBottom: 10 }}>
            <strong>{m.role === "user" ? "You" : "AI"}:</strong>
            <p>
              {m.parts
                ?.filter((p) => p.type === "text")
                .map((p) => p.text)
                .join("")}
            </p>
          </div>
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput("");
        }}
        style={{ display: "flex", gap: 8 }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Say something..."
          style={{ flex: 1, padding: 8 }}
        />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  );
}

GENERALCOMPUTE_API_KEY=gc_your_api_key_here