Examples

AI Chat

Build AI-powered chat with the Vercel AI SDK. Try the live demo below.

Live Chat Demo

Ask me anything about Diezel

Frontend Component

Use the Vercel AI SDK's useChat hook for streaming responses.

src/components/chat.tsx

'use client'
import { useChat } from 'ai/react'

export function Chat() {
  const { messages, input, handleSubmit, handleInputChange } = useChat()

  return (
    <div>
      {messages.map(m => <p key={m.id}>{m.content}</p>)}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  )
}

API Route

Create a streaming endpoint with Diezel and any AI provider.

src/api/chat.ts

import { Hono } from 'hono'
import { openai } from '@ai-sdk/openai'
import { streamText } from 'ai'

export const chat = new Hono()

chat.post('/', async (c) => {
  const { messages } = await c.req.json()
  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  })
  return result.toDataStreamResponse()
})

Forms

Type-safe form handling with Zod validation on the server.

Frontend Component

A simple form that calls a server action directly.

src/components/contact-form.tsx

'use client'
import { submitContact } from '@/actions/contact'

export function ContactForm() {
  async function handleSubmit(formData: FormData) {
    await submitContact({
      name: formData.get('name') as string,
      email: formData.get('email') as string,
      message: formData.get('message') as string,
    })
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit">Send</button>
    </form>
  )
}

Server Action

Validate form data with Zod in a server action.

src/actions/contact.ts

'use server'

export async function submitContact(data: {
  name: string
  email: string
  message: string
}) {
  // Validate, save to database, send email, etc.
  console.log('Contact form submitted:', data)
  return { success: true }
}