import { z } from 'zod';
import { createMcpHandler } from 'mcp-handler';
 
const handler = createMcpHandler(
(server) => {
  server.tool(
    'roll_dice',
    'Rolls an N-sided die',
    { sides: z.number().int().min(2) },
    async ({ sides }) => {
      const value = 1 + Math.floor(Math.random() * sides);
      return {
        content: [{ type: 'text', text: `🎲 You rolled a 10!` }],
      };
    },
  );
},
{},
{ basePath: '/api' },
);

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
 
export default function Chat() {
const [input, setInput] = useState('');
const { messages, sendMessage } = useChat();
return (
  <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
    {messages.map(message => (
      <div key={message.id} className="whitespace-pre-wrap">
        {message.role === 'user' ? 'User: ' : 'AI: '}
        {message.parts.map((part, i) => {
          switch (part.type) {
            case 'text':
              return <div>{part.text}</div>;
          }
        })}
      </div>
    ))}
    <form
      onSubmit={e => {
        e.preventDefault();
        sendMessage({ text: input });
        setInput('');
      }}
    >
      <input
        className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
        value={input}
        placeholder="Say something..."
        onChange={e => setInput(e.currentTarget.value)}
      />
    </form>
  </div>
);
}