Morph + Vercel AI SDK

Stream code edits at 10,500+ tokens/second using the Vercel AI SDK with Morph’s fast apply model. Use Vercel’s AI Gateway for unified billing, rate limits, and failover across 100+ AI models.

Setup

Option 1: AI Gateway (Recommended)

Get an AI Gateway API key from Vercel
Add it to your environment variables as OPENAI_API_KEY
Install the AI SDK:

npm install ai@beta

Option 2: Direct API

Get a Morph API key from the Morph dashboard
Add it to your environment variables as MORPH_API_KEY
Install the AI SDK:

npm install ai@beta

Implementation

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

const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
  baseURL: 'https://gateway.ai.vercel.com/v1',
  headers: {
    'X-Vercel-AI-Provider': 'morph',
  },
})

export async function POST(req: Request) {
  const { editInstructions, originalCode, update } = await req.json()

  // Get the morph model through AI Gateway
  const model = openai('morph-v3-fast')

  // Call the language model with the prompt
  const result = streamText({
    model,
    messages: [
      {
        role: 'user',
        content: `<instruction>${editInstructions}</instruction>\n<code>${originalCode}</code>\n<update>${update}</update>`
      }
    ],
    topP: 1,
  })

  // Respond with a streaming response
  return result.toAIStreamResponse()
}

import { streamText } from 'ai'
import { createOpenAICompatible } from '@ai-sdk/openai-compatible'

const morph = createOpenAICompatible({
  apiKey: "YOUR_API_KEY",
  name: 'morph',
  baseURL: 'https://api.morphllm.com/v1'
})

export async function POST(req: Request) {
  const { editInstructions, originalCode, update } = await req.json()

  // Get a language model
  const model = morph('morph-v3-fast')

  // Call the language model with the prompt
  const result = streamText({
    model.chat(),
    messages: [
      {
        role: 'user',
        content: `<instruction>${editInstructions}</instruction>\n<code>${originalCode}</code>\n<update>${update}</update>`
      }
    ],
    topP: 1,
  })

  // Respond with a streaming response
  return result.toAIStreamResponse()
}

```typescript components/CodeEditor.tsx
'use client'

import { useCompletion } from 'ai/react'
import { useState } from 'react'

export function CodeEditor() {
  const [originalCode, setOriginalCode] = useState('')
  const [editInstructions, setEditInstructions] = useState('')
  
  const { completion, isLoading, complete } = useCompletion({
    api: '/api/morph',
  })

  const handleApplyEdit = async () => {
    await complete('', {
      body: { originalCode, editInstructions },
    })
  }

  return (
    <div className="grid grid-cols-2 gap-4 p-4">
      <div className="space-y-4">
        <textarea
          value={originalCode}
          onChange={(e) => setOriginalCode(e.target.value)}
          className="w-full h-64 p-3 border rounded-lg font-mono text-sm"
          placeholder="Original code..."
        />
        
        <textarea
          value={editInstructions}
          onChange={(e) => setEditInstructions(e.target.value)}
          className="w-full h-32 p-3 border rounded-lg text-sm"
          placeholder="Edit instructions..."
        />
        
        <button
          onClick={handleApplyEdit}
          disabled={isLoading}
          className="w-full bg-blue-600 text-white px-4 py-2 rounded-lg"
        >
          {isLoading ? 'Applying...' : 'Apply Edit'}
        </button>
      </div>

      <pre className="p-3 border rounded-lg font-mono text-sm bg-gray-50 overflow-auto">
        {completion || 'Edited code will appear here...'}
      </pre>
    </div>
  )
}

That’s it! Stream fast code edits with Morph using the Vercel AI SDK.