Suppressing AI messages when using Generative UI

[ethanhinson]

I'm following the example here: https://sdk.vercel.ai/docs/ai-sdk-ui/generative-user-interfaces

In the article, it appears that the Generative User Interface replaces the AI response. However, unless I set maxSteps: 1 I receive both the UI component and a message from the AI which duplicate each other. In the case where I have multiple tools to one streamText call, the approach of setting this option to 1 will not work. See the screenshot below: the red highlighted message is the AI message, green is the custom component.

I've also put together a proof of concept of filtering the AI responses for tools that use the Generative UI feature, but this seems wasteful and will incur costs for tokens, even when I don't need them. So my question is:

• What is the most appropriate way to suppress the AI generated response when using generative UI?

[beinoriusju]

I'm using useChat with streamText on backend api and have the exact same problem.

1. User asks for a tool
2. Tool gets called and returns JSON
3. Tool rendered with React on Frontend
4. Since maxSteps not exhausted agent talks over duplicating React component.

The only thing that worked for me was overwrite system prompt in custom middleware.

import type { LanguageModelV1Middleware } from 'ai';

const uxTools = [
    'newsAgent',
]

const isUxToolResult = (m: any) => {
    return m.role === 'tool' && m.content[0].type === 'tool-result' && uxTools.includes(m.content[0].toolName)
}

export const uxStop: LanguageModelV1Middleware = {
    transformParams: async ({ params }) => {
      const lastMessage = params.prompt[params.prompt.length - 1];

      if (lastMessage && isUxToolResult(lastMessage)) {
        params.prompt[0].content = 'RESPOND IN A SINGLE EMOJI';
      }

        return params;
    }
};

V5 promises more control with prepareStep and continueUntil, but I doubt they will fully solve my problem.

[da1z]

More or less i was able to solve it by adding this to tool description "Assume the returned data was displayed to user and do not include it into response"

[ethanhinson]

We did something similar by wrapping the response in an object like so:

{
    "assistantInfo": "A component will be rendered to the user, you do not need to say anything at all", 
    "uiData": {
        "foo": "bar"
    }
}

Feels like a hack, but it worked much more consistently than just having it in the description for us.

[beinoriusju]

I've managed to control it using [email protected] using continueUntil

import { openai } from '@ai-sdk/openai';
import {
  hasToolCall, streamText, tool,
  convertToModelMessages, UIMessage,
} from 'ai';
import { z } from 'zod';

export async function POST(req: Request, res: Response) {
  const { message, chatId }: { message: UIMessage, chatId: string } = await req.json();

  const result = streamText({
    model: openai('gpt-4o-mini'),
    system: "You're a party agent.",
    messages: convertToModelMessages([
      message
    ]),
    continueUntil: hasToolCall('party_over'),
    tools: {
      start_party: tool({
        description: "Starts the party",
        parameters: z.object({}),
        execute: async function (params, { messages, toolCallId }: any) {
          console.log('Party started tool called');
          return "Party started";
        }
      }),
      have_good_time: tool({
        description: "Have a good time",
        parameters: z.object({}),
        execute: async function (params, { messages, toolCallId }: any) {
          console.log('Have a good time tool called');
          return "Having a good time";
        }
      }),
      party_over: tool({
        description: "Closes the party",
        parameters: z.object({}),
        execute: async function (params, { messages, toolCallId }: any) {
          console.log('Party over tool called');
          return "Party is over";
        }
      }),
    },
    toolChoice: "required"
  });

  return result.toUIMessageStreamResponse();
}

[ethanhinson]

That's for the reply. We're still finishing working to integrate 4.x into our core platform, but this is certainly useful for the future.