IdeaRoast: Roasting Startup Ideas With AI

You are a ruthless startup and business critic. Be concise, brutal, and specific. Make fun of the user and their idea if it truly is a bad idea that needs to be roasted.
For the user's initial message, follow EXACTLY this output format and section order, with clear headings between the delimiters <for initial message> and </for initial message>. Preamble before the tldr section making fun of the user if it truly is a bad idea that needs to be roasted.

Do not include the <for initial message> and </for initial message> delimiters in your response ever.

Return the response in HTML. Add line breaks so that text isn't just one long string. There needs to be breaks between the sections. Feel free to add emojis as well. Add spacing between the headings and the content under it.
Also add spacing between the preamble and the sections.

  <for initial message>
  1) TL;DR verdict (1–2 lines)
  2) Risks: market, product, GTM, ops, legal (bullets)
  3) Competitors & moats (bulleted; include links if provided in prompt)
  4) Unit economics red flags (bullets with quick back-of-envelope)
  5) Pivots & experiments (exactly 5). For each, include “how to test this week”.
  Rules:
  - Use short bullets, not paragraphs, except the TL;DR (1–2 lines).
  - Never deviate from the 5-section structure above.
  </for initial message>

If the user does not provide a business idea, respond with "Please provide a business idea."
After your response to the user's initial message with the above structure, continue with the rest of the conversation as usual for a ruthless startup critic.

Do not deviate from your "character" as a ruthless startup critic.

"use client";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { InputSchema } from "@/lib/schema";
import { ChatTextarea } from "@/components/_inputs/TextInput";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import MessageContainer from '@/components/_chat/Messages'

type FormValues = {
  prompt: string;
};

const PromptForm = () => {
  const {
    handleSubmit,
    control,
    reset,
    formState: { isSubmitting, errors },
  } = useForm<FormValues>({
    defaultValues: {
      prompt: "",
    },
    resolver: zodResolver(InputSchema),
  });

  const { messages, status, error, sendMessage } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/roast",
    }),
    onError: error => {
      console.error('Error streaming text:', error);
    },
  });

  const submitHandler = async (data: FormValues) => {
    reset();
    await sendMessage({text: data.prompt})
  };

  return (
    <>
      <MessageContainer status={status} messages={messages} />
      <section className='fixed space-y-6 bottom-12 w-full pb-12 bg-background'>
        <form
          onSubmit={handleSubmit(submitHandler)}
          className="relative mx-auto flex w-full max-w-2xl items-end gap-6"
        >
          <Controller
            name="prompt"
            control={control}
            render={({ field }) => (
              <ChatTextarea
                value={field.value}
                onChange={field.onChange}
                placeholder="Roast my idea…"
                submitOnEnter
                maxHeight={260}
                minRows={1}
                label="Prompt input"
                showCounter
                maxLengthHint={5000}
                disabled={isSubmitting || status !== "ready"}
                onSubmit={async () => {
                  await handleSubmit(submitHandler)();
                }}
                error={errors?.prompt?.message as string}
              />
            )}
          />
        </form>
      </section>
    </>
  );
};

export default PromptForm;

'use client'
import React, {
  useCallback,
  useEffect,
  useId,
  useImperativeHandle,
  useLayoutEffect,
  useRef,
  useState,
  forwardRef,
} from "react";

export type ChatTextareaProps = {
  value?: string;
  onChange?: (value: string) => void;
  defaultValue?: string;
  placeholder?: string;
	onSubmit?: (value: string) => void | Promise<void>;
  submitOnEnter?: boolean;
  maxHeight?: number;
  minRows?: number;
  disabled?: boolean;
  showCounter?: boolean;
  maxLengthHint?: number;
  name?: string;
  id?: string;
  label?: string;
  className?: string;
  textareaClassName?: string;
  autoFocus?: boolean;
  error: string;
};

export type ChatTextareaHandle = {
  focus: () => void;
  setValue: (v: string) => void;
  getValue: () => string;
  textarea: HTMLTextAreaElement | null;
};

export const ChatTextarea = forwardRef<ChatTextareaHandle, ChatTextareaProps>(
  function ChatTextarea(
    {
      value,
      onChange,
      defaultValue,
      placeholder = "Type your message…",
      onSubmit,
      submitOnEnter = true,
      maxHeight = 260,
      minRows = 1,
      disabled = false,
      showCounter = false,
      maxLengthHint,
      name,
      id,
      label,
      className = "",
      textareaClassName = "",
      autoFocus = false,
      error
    },
    ref
  ) {
    const internalId = useId();
    const finalId = id ?? internalId;

    const isControlled = typeof value === "string";
    const [inner, setInner] = useState(defaultValue ?? "");
    const currentValue = isControlled ? value! : inner;

    const taRef = useRef<HTMLTextAreaElement | null>(null);

    const resize = useCallback(() => {
      const ta = taRef.current;
      if (!ta) return;
      ta.style.height = "auto";
      const next = Math.min(ta.scrollHeight, maxHeight);
      ta.style.height = `${next}px`;
      ta.style.overflowY = ta.scrollHeight > maxHeight ? "auto" : "hidden";
    }, [maxHeight]);

    useLayoutEffect(() => {
      resize();
    }, [currentValue, resize]);

    useEffect(() => {
      if (autoFocus) taRef.current?.focus();
    }, [autoFocus]);

    const setVal = useCallback(
      (v: string) => {
        if (isControlled) {
          onChange?.(v);
        } else {
          setInner(v);
        }
      },
      [isControlled, onChange]
    );

    useImperativeHandle(
      ref,
      () => ({
        focus: () => taRef.current?.focus(),
        setValue: setVal,
        getValue: () => currentValue,
        textarea: taRef.current,
      }),
      [currentValue, setVal]
    );

    const handleKeyDown = async (
      e: React.KeyboardEvent<HTMLTextAreaElement>
    ) => {
      if (disabled) return;

      if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        const text = currentValue.trim();
        if (!text) return;
        await onSubmit?.(currentValue);
        // If uncontrolled, clear it ourselves
        if (!isControlled) setInner("");
      }
    };

    const lineHeight = 24; // keep in sync with Tailwind leading-[1.5]
    const minHeight = Math.max(minRows, 1) * lineHeight + 16; // + padding-y (py-2 => 8*2)

    return (
      <div className={`w-full max-w-none ${className}`}>
        {label && (
          <label htmlFor={finalId} className="sr-only">
            {label}
          </label>
        )}

        <div className="flex items-end gap-2 rounded-2xl border border-gray-300 bg-white p-2 shadow-sm focus-within:border-gray-400">
          <textarea
            ref={taRef}
            id={finalId}
            name={name}
            disabled={disabled}
            value={currentValue}
            placeholder={placeholder}
            onKeyDown={handleKeyDown}
            onChange={(e) => setVal(e.target.value)}
            rows={minRows}
            style={{
              height: Math.max(minHeight, 0),
              maxHeight,
              overflowY: "hidden",
              resize: "none",
            }}
            className={`min-h-[${minHeight}px] w-full flex-1 bg-transparent outline-none placeholder:text-gray-400 text-base leading-[1.5] py-2 px-3 ${textareaClassName}`}
          />

          {/* Action area (example: submit button, attach, mic, etc.) */}
          <button
            type="button"
            aria-label="Submit"
            disabled={disabled || !currentValue.trim()}
            onClick={async () => {
              if (!currentValue.trim()) return;
              await onSubmit?.(currentValue);
              if (!isControlled) setInner("");
            }}
            className="shrink-0 rounded-xl px-3 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300 hover:bg-gray-50"
          >
            Send
          </button>
        </div>
        {error && (
          <p className="absolute left-0 text-sm text-red-600 justify-self-start">
            {String(error)}
          </p>
        )}
        {showCounter && (
          <div className="absolute right-0 text-right text-xs text-gray-500 justify-self-end">
            {currentValue.length}
            {maxLengthHint ? ` / ${maxLengthHint}` : ""}
          </div>
        )}
      </div>
    );
  }
);

import { UIMessage } from "ai";
import clsx from "clsx";
import React from "react";

type MessageContainerProps = {
  messages: UIMessage[];
  status: "idle" | "connecting" | "connected" | "submitted" | "streaming" | "error" | string; // keep loose for SDK changes
};

type RoleType = "assistant" | "user";

type BasePart = { type: string; state?: "done" | "in_progress" | "partial"; text?: string };
type TextPart = BasePart & { type: "text"; text: string };
type ReasoningPart = BasePart & { type: "reasoning" };
type StepStartPart = BasePart & { type: "step-start" };

type PartsType = Array<TextPart | ReasoningPart | StepStartPart>;

type MessageProps = {
  role: RoleType;
  parts: PartsType;
};

const hasAnyAssistantText = (parts: PartsType) =>
  parts?.some((p) => p.type === "text" && typeof p.text === "string" && p.text.length > 0);

const isAssistantThinkingOnly = (parts: PartsType) => {
  const noText = !hasAnyAssistantText(parts);
  const hasStepOrReasoning = parts?.some((p) => p.type === "step-start" || p.type === "reasoning");
  return noText && hasStepOrReasoning;
};

const last = <T,>(arr: T[]) => (arr.length ? arr[arr.length - 1] : undefined);

const MessageContainer: React.FC<MessageContainerProps> = ({ messages, status }) => {
  const lastMsg = last(messages);
  const shouldShowAssistantLoader =
    status === "streaming" &&
    lastMsg?.role === "assistant" &&
    lastMsg?.parts &&
    isAssistantThinkingOnly(lastMsg.parts as PartsType);

  return (
    <section className="relative w-full max-w-[1000px] space-y-6 mx-auto overflow-y-auto grid grid-cols-1 justify-items-stretch mb-32">
      {messages.map((message) => (
        <Message
          key={message.id}
          role={message.role as RoleType}
          parts={message.parts as PartsType}
        />
      ))}

      {shouldShowAssistantLoader && <AssistantLoading />}
    </section>
  );
};

export default MessageContainer;

export const Message: React.FC<MessageProps> = ({ role, parts }) => {
  return (
    <div className="rounded-xl border border-gray-200 p-3 bg-white">
      <div className={clsx("text-lg")}>
        {parts?.map((part, index) => {
          if (part.type === "text" && role === "user") {
            return (
              <span key={index} className="whitespace-pre-wrap break-words">
                {part.text}
              </span>
            );
          }
          if (part.type === "text" && role === "assistant") {
            return (
              <span
                key={index}
                className="prose prose-sm sm:prose-base max-w-none"
                dangerouslySetInnerHTML={{ __html: part.text }}
              />
            );
          }
          return null;
        })}
      </div>

      <div className="flex items-center justify-between text-xs text-gray-500 mt-2">
        <div className="capitalize">{role}</div>
      </div>
    </div>
  );
};

const AssistantLoading: React.FC = () => {
  return (
    <div className="rounded-xl border border-gray-200 p-3 bg-white">
      <div className="flex items-start gap-3">
        <div className="mt-2">
          <span className="inline-flex gap-1">
            <Dot />
            <Dot delay="150ms" />
            <Dot delay="300ms" />
          </span>
        </div>
      </div>
      <div className="mt-3 space-y-2">
        <div className="h-3 w-11/12 bg-gray-100 animate-pulse rounded" />
        <div className="h-3 w-10/12 bg-gray-100 animate-pulse rounded" />
        <div className="h-3 w-7/12 bg-gray-100 animate-pulse rounded" />
      </div>
    </div>
  );
};

const Dot: React.FC<{ delay?: string }> = ({ delay = "0ms" }) => (
  <span
    className="h-2 w-2 rounded-full bg-gray-400 animate-bounce inline-block"
    style={{ animationDelay: delay }}
  />
);