@tcsk-ai/vercel

Vercel AI SDK provider for TCSK AI services

Overview

The TCSK Vercel AI SDK provider enables seamless integration between TCSK AI services and the Vercel AI SDK. This adapter allows you to use TCSK's language models with all Vercel AI SDK features including streaming, tool calling, and React hooks.

Features

• 🚀 Full Vercel AI SDK Integration - Works with all AI SDK features
• 📡 Streaming Support - Real-time response streaming
• 🛠️ Tool Calling - Function calling capabilities (coming soon)
• ⚛️ React Hooks - Use with useChat, useCompletion, etc.
• 🔄 Multiple Models - Support for various TCSK model providers
• 📦 TypeScript - Full type safety and IntelliSense

Installation

npm install @tcsk-ai/vercel ai
# or
pnpm add @tcsk-ai/vercel ai
# or
yarn add @tcsk-ai/vercel ai

Quick Start

Basic Usage

import { createTCSK } from '@tcsk-ai/vercel'
import { streamText } from 'ai'

// Initialize the TCSK provider
const tcsk = createTCSK({
  provider: 'head_office_deploy',
  user_account: 'your-account'
})

// Use with Vercel AI SDK
const { textStream } = await streamText({
  model: tcsk('head_office_deploy/claude-4-sonnet'),
  messages: [
    { role: 'user', content: 'Hello, how are you?' }
  ]
})

// Stream the response
for await (const textPart of textStream) {
  process.stdout.write(textPart)
}

React Integration

'use client'

import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'

export default function ChatComponent() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat'
    })
  })

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role}
          :
          {message.parts.map(part =>
            part.type === 'text' ? part.text : null
          )}
        </div>
      ))}
    </div>
  )
}

API Route (Next.js)

// app/api/chat/route.ts
import { createTCSK } from '@tcsk-ai/vercel'
import { streamText } from 'ai'

const tcsk = createTCSK({
  provider: 'head_office_deploy',
  user_account: 'biz-data-daas-sweb'
})

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = await streamText({
    model: tcsk('head_office_deploy/claude-4-sonnet'),
    messages,
    temperature: 0.7,
    maxOutputTokens: 2000
  })

  return result.toUIMessageStreamResponse()
}

Configuration

Provider Options

interface TCSKProviderConfig {
  provider: string // Model provider (e.g., 'head_office_deploy')
  user_account: string // Your TCSK account identifier
}

Supported Models

The adapter supports various TCSK model endpoints:

// Claude models
tcsk('head_office_deploy/claude-4-sonnet')
tcsk('head_office_deploy/claude-3-haiku')

// DeepSeek models
tcsk('head_office_deploy/deepseek-r1')
tcsk('head_office_deploy/deepseek-v3')

// Azure OpenAI models
tcsk('azure/gpt-35-turbo')
tcsk('azure/gpt-4')

// Custom models
tcsk('your-provider/your-model')

Advanced Usage

Custom Model Configuration

import { createTCSK } from '@tcsk-ai/vercel'
import { streamText } from 'ai'

const tcsk = createTCSK({
  provider: 'custom_provider',
  user_account: 'your-account'
})

const result = await streamText({
  model: tcsk('custom_provider/custom-model'),
  messages: [{ role: 'user', content: 'Hello' }],
  temperature: 0.8,
  maxOutputTokens: 1000,
  topP: 0.9
})

Error Handling

import { TCSKError } from '@tcsk-ai/core'

try {
  const result = await streamText({
    model: tcsk('head_office_deploy/claude-4-sonnet'),
    messages: [{ role: 'user', content: 'Hello' }]
  })

  return result.toUIMessageStreamResponse()
}
catch (error) {
  if (error instanceof TCSKError) {
    console.error('TCSK API Error:', error.message, error.code)
  }
  else {
    console.error('Unknown error:', error)
  }

  return new Response('Internal Server Error', { status: 500 })
}

Multiple Providers

// Different providers for different use cases
const headOffice = createTCSK({
  provider: 'head_office_deploy',
  user_account: 'account1'
})

const azure = createTCSK({
  provider: 'azure',
  user_account: 'account2'
})

// Use different models based on requirements
const fastModel = headOffice('head_office_deploy/claude-3-haiku')
const smartModel = headOffice('head_office_deploy/claude-4-sonnet')
const azureModel = azure('azure/gpt-4')

Examples

Streaming Chat with React

'use client'

import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'
import { useState } from 'react'

export default function StreamingChat() {
  const [input, setInput] = useState('')

  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
      body: {
        config: {
          provider: 'head_office_deploy',
          user_account: 'your-account',
          model: 'head_office_deploy/claude-4-sonnet'
        }
      }
    })
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (input.trim()) {
      sendMessage({ text: input })
      setInput('')
    }
  }

  const isLoading = status !== 'ready'

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map(message => (
          <div key={message.id} className={`message ${message.role}`}>
            {message.parts?.map((part, index) =>
              part.type === 'text'
                ? (
                    <span key={index}>{part.text}</span>
                  )
                : null
            )}
          </div>
        ))}
        {isLoading && <div className="loading">AI is thinking...</div>}
      </div>

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Type your message..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading || !input.trim()}>
          Send
        </button>
      </form>
    </div>
  )
}

Server-Side Generation

import { createTCSK } from '@tcsk-ai/vercel'
import { generateText } from 'ai'

const tcsk = createTCSK({
  provider: 'head_office_deploy',
  user_account: 'your-account'
})

async function generateSummary(content: string) {
  const { text } = await generateText({
    model: tcsk('head_office_deploy/claude-4-sonnet'),
    messages: [
      { role: 'system', content: 'You are a helpful assistant that creates concise summaries.' },
      { role: 'user', content: `Please summarize: ${content}` }
    ],
    temperature: 0.3,
    maxOutputTokens: 200
  })

  return text
}

API Reference

createTCSK(config)

Creates a TCSK provider instance.

Parameters:

• config.provider: The model provider identifier
• config.user_account: Your TCSK account identifier

Returns: A TCSK provider function that can be called with model IDs.

Provider Function

The provider function signature:

Parameters:

• modelId: The specific model identifier (e.g., 'head_office_deploy/claude-4-sonnet')

Returns: A language model compatible with Vercel AI SDK.

Troubleshooting

Common Issues

1. Missing content in responses

   • Ensure your API endpoint returns properly formatted streaming responses
   • Check that the TCSK backend is configured correctly

2. Type errors

   • Make sure you're using compatible versions of ai and @tcsk-ai/vercel
   • Install peer dependencies: npm install ai @ai-sdk/react

3. Authentication issues

   • Verify your user_account is correct
   • Check that your provider has access to the specified models

Debug Mode

Enable debug logging:

const tcsk = createTCSK({
  provider: 'head_office_deploy',
  user_account: 'your-account'
})

// The adapter will log detailed information in development mode
process.env.NODE_ENV = 'development'

Contributing

Contributions are welcome! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Related

• @tcsk-ai/core - Core TCSK AI functionality
• @tcsk/ai-langchain - LangChain integration
• Vercel AI SDK - Official Vercel AI SDK documentation