# 必装：
npm i ai zod @ai-sdk/openai
# 或 pnpm add ai zod @ai-sdk/openai
    

      # .env / Vercel 项目环境变量
OPENAI_API_KEY=sk-...
    

      // app/api/chat/route.ts
import { z } from 'zod';
import {
  streamText,
  convertToModelMessages,
  tool,
  stepCountIs,
} from 'ai';
import { openai } from '@ai-sdk/openai';
// Image 生成：实验 API，用法见官方“Image Generation”页面
import { experimental_generateImage as generateImage } from 'ai';

export const maxDuration = 30; // 可选：限制流式生成最长 30s

// 1) 定义一个可以被模型“自动调用”的服务端工具
const tools = {
  'img-generate': tool({
    description:
      '根据文字描述生成图片。仅在用户明确需要图片时调用。',
    inputSchema: z.object({
      prompt: z.string().describe('要生成内容的详细中文/英文描述'),
      size: z
        .enum(['1024x1024', '1024x1536', '1536x1024'])
        .default('1024x1024')
        .describe('输出分辨率'),
      n: z.number().int().min(1).max(4).default(1).describe('生成张数'),
    }),
    // execute 会在服务器上运行（安全、可保密 API Key）
    async execute({ prompt, size, n }, { abortSignal }) {
      const { images } = await generateImage({
        model: openai.image('gpt-image-1'),
        prompt,
        size,
        n,
        abortSignal,
      });
      // 返回精简后的结果，前端按需渲染
      return images.map((img) => ({
        base64: img.base64,
        mediaType: img.mediaType, // 如 'image/png'
      }));
    },
  }),
};

// 2) 接入 streamText（多轮 + 工具）
export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'), // 可换 gpt-4.1 / 其它 Responses 模型
    system:
      '你是图文助手。用户有明确“生成图/图片/海报/logo”等需求时，调用工具 img-generate，拿到图后再用一句话说明要点。',
    messages: convertToModelMessages(messages),

    tools,

    // 多步：允许“工具调用→拿结果→继续解释”后再停
    stopWhen: stepCountIs(2),

    // 进阶：也可以用 toolChoice 强制选用某个工具（见下方“常用进阶”）
  });

  // 返回 UIMessage 流式响应，前端 useChat 可直接消费
  return result.toUIMessageStreamResponse();
}
    

      // app/page.tsx
'use client';

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

export default function Page() {
  const { messages, input, setInput, sendMessage } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="p-4 space-y-4">
      <div className="flex gap-2">
        <input
          className="border px-3 py-2 rounded w-full"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && sendMessage({ text: input })}
          placeholder="比如：生成一张赛博朋克风格的成都夜景 1024x1536"
        />
        <button
          className="px-3 py-2 rounded bg-black text-white"
          onClick={() => sendMessage({ text: input })}
        >
          发送
        </button>
      </div>

      {messages.map((m) => (
        <div key={m.id} className="space-y-3">
          <div className="text-xs opacity-70">{m.role}</div>

          {m.parts.map((p, i) => {
            // 1) 常规文本
            if (p.type === 'text') return <p key={i}>{p.text}</p>;

            // 2) 我们的“工具：img-generate”结果（AI SDK 会给出带工具名的类型标识）
            if (p.type === 'tool-img-generate') {
              // p.result 为 execute 返回值（此处是数组）
              return (
                <div key={i} className="grid grid-cols-2 gap-3">
                  {p.result.map(
                    (
                      img: { base64: string; mediaType: string },
                      idx: number,
                    ) => (
                      <img
                        key={idx}
                        className="rounded"
                        alt="generated"
                        src={`data:${img.mediaType};base64,${img.base64}`}
                      />
                    ),
                  )}
                </div>
              );
            }

            // 3) 其他类型（如文件/file、工具调用提示等）按需扩展
            return null;
          })}
        </div>
      ))}
    </div>
  );
}
    

      import { z } from 'zod';
import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { experimental_generateImage as generateImage } from 'ai';

const imgGenerate = tool({
  description: '按文字描述生成图片（gpt-image-1）',
  inputSchema: z.object({
    prompt: z.string(),
    size: z.enum(['1024x1024', '1024x1536', '1536x1024']).default('1024x1024'),
    n: z.number().int().min(1).max(4).default(1),
  }),
  async execute({ prompt, size, n }) {
    const { images } = await generateImage({
      model: openai.image('gpt-image-1'),
      prompt,
      size,
      n,
    });
    return images.map((img) => ({ base64: img.base64, mediaType: img.mediaType }));
  },
});

const { text, toolCalls, toolResults } = await generateText({
  model: openai('gpt-4o'),
  tools: { 'img-generate': imgGenerate },
  prompt: '生成两张武侠风场景图，竖图 1024x1536',
  // 也可用 messages，多步、toolChoice 等见下节
});

console.log('LLM 总结：', text);
console.log('工具调用：', toolCalls);
console.log('工具结果：', toolResults);
    

      import { stepCountIs } from 'ai';

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools,
  stopWhen: stepCountIs(2),
});
    

      const result = await generateText({
  model: openai('gpt-4o'),
  tools,
  toolChoice: { type: 'tool', toolName: 'img-generate' },
  prompt: '来一张...',
});
    

      const result = await generateText({
  model: openai('gpt-4o'),
  tools,
  providerOptions: {
    openai: {
      parallelToolCalls: true, // 默认即为 true
      // serviceTier: 'flex' | 'priority' | 'auto' ...
    },
  },
});
    

      const result = await generateText({
  model: openai('gpt-4o'),
  tools,
  stopWhen: stepCountIs(2),
  onStepFinish: ({ step, toolCalls, toolResults }) => {
    console.log('step:', step, toolCalls, toolResults);
  },
  prepareStep: async ({ stepNumber }) => {
    if (stepNumber === 0) {
      return { toolChoice: { type: 'tool', toolName: 'img-generate' } };
    }
  },
});