Skip to content

feat: Add Z.AI adapter (@tanstack/ai-zai) and update examples #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shakibdshy wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: Add Z.AI adapter (@tanstack/ai-zai) and update examples #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c5ff485
feat(zai): add Z.AI adapter for TanStack AI
shakibdshy Jan 15, 2026
84deb15
refactor(ai-zai): improve type safety and code quality
shakibdshy Jan 15, 2026
214d155
feat(tools): add tool support for Z.AI including web search and funct…
shakibdshy Jan 15, 2026
54bf059
feat(zai): add zai provider support across multiple examples
shakibdshy Jan 15, 2026
d6c7a64
feat(adapters): add multimodal support for image/video content in ZAI…
shakibdshy Jan 15, 2026
725fb92
chore: restructure examples, add e2e testing fixtures and update pack…
shakibdshy Apr 26, 2026
d44da17
feat(zai): add coding endpoint support and update to AG-UI protocol
shakibdshy Apr 26, 2026
1df8af1
feat(zai): add Z.AI provider support across examples and fix formatting
shakibdshy Apr 26, 2026
c0ef5a9
feat: add Z.AI provider support and model selection UI
shakibdshy Apr 28, 2026
c1cd797
chore(typescript/ai-zai): add vitest config and dev dependencies
shakibdshy Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/ts-code-mode-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@tanstack/ai-ollama": "workspace:*",
"@tanstack/ai-openai": "workspace:*",
"@tanstack/ai-react": "workspace:*",
"@tanstack/ai-zai": "workspace:*",
"@tanstack/nitro-v2-vite-plugin": "^1.154.7",
"@tanstack/react-router": "^1.158.4",
"@tanstack/react-start": "^1.159.0",
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_banking-demo/api.banking-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import { createCodeMode } from '@tanstack/ai-code-mode'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import type { AnyTextAdapter } from '@tanstack/ai'

import { allTools } from '@/lib/tools'
import { CODE_MODE_SYSTEM_PROMPT } from '@/lib/prompts'
import { reportTools } from '@/lib/reports/tools'
import { createReportBindings } from '@/lib/reports/create-report-bindings'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
4 changes: 3 additions & 1 deletion examples/ts-code-mode-web/src/routes/_banking-demo/banking-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const Route = createFileRoute('/_banking-demo/banking-demo' as any)({
component: BankingDemoPage,
})

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

interface ModelOption {
provider: Provider
Expand Down Expand Up @@ -254,6 +254,8 @@ const MODEL_OPTIONS: Array<ModelOption> = [
},
{ provider: 'openai', model: 'gpt-4o', label: 'GPT-4o' },
{ provider: 'gemini', model: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
{ provider: 'zai', model: 'glm-4.7', label: 'Z.AI GLM-4.7' },
{ provider: 'zai', model: 'glm-5-turbo', label: 'Z.AI GLM-5 Turbo' },
]

interface ToastItem {
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_database-demo/api.database-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,22 @@ import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import type { AnyTextAdapter, ServerTool, StreamChunk } from '@tanstack/ai'
import type { IsolateDriver } from '@tanstack/ai-code-mode'

import { databaseTools, getSchemaInfoTool } from '@/lib/tools/database-tools'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
10 changes: 4 additions & 6 deletions examples/ts-code-mode-web/src/routes/_database-demo/database-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const Route = createFileRoute('/_database-demo/database-demo' as any)({
component: DatabaseDemoPage,
})

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

interface ModelOption {
provider: Provider
Expand All @@ -48,11 +48,9 @@ const MODEL_OPTIONS: Array<ModelOption> = [
label: 'Claude Haiku 4',
},
{ provider: 'openai', model: 'gpt-4o', label: 'GPT-4o' },
{
provider: 'gemini',
model: 'gemini-2.5-flash',
label: 'Gemini 2.5 Flash',
},
{ provider: 'gemini', model: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
{ provider: 'zai', model: 'glm-4.7', label: 'Z.AI GLM-4.7' },
{ provider: 'zai', model: 'glm-5-turbo', label: 'Z.AI GLM-5 Turbo' },
]

interface SkillWithCode {
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_home/api.product-codemode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { createCodeMode } from '@tanstack/ai-code-mode'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import {
createAlwaysTrustedStrategy,
createSkillManagementTools,
Expand All @@ -17,14 +18,16 @@ import type { AnyTextAdapter, ServerTool, StreamChunk } from '@tanstack/ai'
import type { IsolateDriver } from '@tanstack/ai-code-mode'
import { productTools } from '@/lib/tools/product-tools'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_home/api.product-regular.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,20 @@ import { chat, maxIterations, toServerSentEventsStream } from '@tanstack/ai'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import type { AnyTextAdapter, StreamChunk } from '@tanstack/ai'
import { productTools } from '@/lib/tools/product-tools'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
4 changes: 3 additions & 1 deletion examples/ts-code-mode-web/src/routes/_home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Route = createFileRoute('/_home/')({
component: ProductDemoPage,
})

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

interface ModelOption {
provider: Provider
Expand Down Expand Up @@ -58,6 +58,8 @@ const MODEL_OPTIONS: Array<ModelOption> = [
model: 'gemini-2.5-flash',
label: 'Gemini 2.5 Flash',
},
{ provider: 'zai', model: 'glm-4.7', label: 'Z.AI GLM-4.7' },
{ provider: 'zai', model: 'glm-5-turbo', label: 'Z.AI GLM-5 Turbo' },
]

const PROMPT_SUGGESTIONS = [
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_npm-github-chat/api.codemode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,22 @@ import { createCodeMode } from '@tanstack/ai-code-mode'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import type { AnyTextAdapter, StreamChunk } from '@tanstack/ai'
import { allTools } from '@/lib/tools'
import { CODE_MODE_SYSTEM_PROMPT } from '@/lib/prompts'
import { exportConversationToPdfTool } from '@/lib/tools/export-pdf-tool'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
4 changes: 3 additions & 1 deletion examples/ts-code-mode-web/src/routes/_npm-github-chat/npm-github-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const Route = createFileRoute('/_npm-github-chat/npm-github-chat')({
component: CodeModePage,
})

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

interface ModelOption {
provider: Provider
Expand All @@ -53,6 +53,8 @@ const MODEL_OPTIONS: Array<ModelOption> = [
},
{ provider: 'openai', model: 'gpt-4o', label: 'GPT-4o' },
{ provider: 'gemini', model: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
{ provider: 'zai', model: 'glm-4.7', label: 'Z.AI GLM-4.7' },
{ provider: 'zai', model: 'glm-5-turbo', label: 'Z.AI GLM-5 Turbo' },
]

const PROMPT_SUGGESTIONS = [
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_reporting/api.reports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import { createCodeMode } from '@tanstack/ai-code-mode'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import type { AnyTextAdapter } from '@tanstack/ai'

import { allTools } from '@/lib/tools'
import { CODE_MODE_SYSTEM_PROMPT, REPORTS_SYSTEM_PROMPT } from '@/lib/prompts'
import { reportTools } from '@/lib/reports/tools'
import { createReportBindings } from '@/lib/reports/create-report-bindings'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
switch (provider) {
case 'openai':
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText((model || 'claude-haiku-4-5') as 'claude-haiku-4-5')
Expand Down
2 changes: 1 addition & 1 deletion examples/ts-code-mode-web/src/routes/_reporting/reporting-agent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const Route = createFileRoute('/_reporting/reporting-agent')({
component: ReportingAgentPage,
})

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

interface ModelOption {
provider: Provider
Expand Down
5 changes: 4 additions & 1 deletion examples/ts-code-mode-web/src/routes/_structured-output/api.structured-output.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
import { anthropicText } from '@tanstack/ai-anthropic'
import { openaiText } from '@tanstack/ai-openai'
import { geminiText } from '@tanstack/ai-gemini'
import { zaiText } from '@tanstack/ai-zai'
import { z } from 'zod'

import type { AnyTextAdapter } from '@tanstack/ai'
Expand All @@ -15,7 +16,7 @@ import type { IsolateDriver } from '@tanstack/ai-code-mode'
import { cityTools } from '@/lib/tools/city-tools'
import { structuredOutput } from '@/lib/structured-output'

type Provider = 'anthropic' | 'openai' | 'gemini'
type Provider = 'anthropic' | 'openai' | 'gemini' | 'zai'

const TravelReportSchema = z.object({
title: z.string().describe('Short title for the report'),
Expand Down Expand Up @@ -45,6 +46,8 @@ function getAdapter(provider: Provider, model?: string): AnyTextAdapter {
return openaiText((model || 'gpt-4o') as 'gpt-4o')
case 'gemini':
return geminiText((model || 'gemini-2.5-flash') as 'gemini-2.5-flash')
case 'zai':
return zaiText((model || 'glm-4.7') as 'glm-4.7')
case 'anthropic':
default:
return anthropicText(
Expand Down
1 change: 1 addition & 0 deletions examples/ts-group-chat/chat-server/claude-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Claude AI service for handling queued AI responses
import { anthropicText } from '@tanstack/ai-anthropic'
import { zaiText } from '@tanstack/ai-zai'
Copy link
Copy Markdown
Contributor

@jherr jherr Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simply importing the adapter isn't going to do anything.

Copy link
Copy Markdown
Author

@shakibdshy shakibdshy Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m still actively working on this PR and am currently wiring Z.AI into the examples and testing the updated examples directory to make sure the integration is actually used end-to-end.

Copy link
Copy Markdown
Contributor

@jherr jherr Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Just put [WIP] in the description so that I'm not looking at it like it's GTG. Thx.

Copy link
Copy Markdown
Author

@shakibdshy shakibdshy Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jherr Thanks again for the earlier feedback! I’ve now finished wiring the Z.AI adapter into the examples and verified the end‑to‑end integration, so it should be fully functional. When you have a moment, could you take another look, especially at how the examples are selecting and using the Z.AI provider, to see if the integration matches what you expect?

import { chat, toolDefinition } from '@tanstack/ai'
import type { JSONSchema, ModelMessage, StreamChunk } from '@tanstack/ai'

Expand Down
4 changes: 4 additions & 0 deletions examples/ts-react-chat/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
# Get yours at: https://platform.openai.com/api-keys
OPENAI_API_KEY=sk-...

# Z.AI API Key
# Get yours at: https://docs.z.ai/
ZAI_API_KEY=

# ElevenLabs API Key (for realtime voice)
# Get yours at: https://elevenlabs.io/app/settings/api-keys
ELEVENLABS_API_KEY=xi-...
Expand Down
1 change: 1 addition & 0 deletions examples/ts-react-chat/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@tanstack/ai-openrouter": "workspace:*",
"@tanstack/ai-react": "workspace:*",
"@tanstack/ai-react-ui": "workspace:*",
"@tanstack/ai-zai": "workspace:*",
"@tanstack/nitro-v2-vite-plugin": "^1.154.7",
"@tanstack/react-devtools": "^0.9.10",
"@tanstack/react-router": "^1.158.4",
Expand Down
10 changes: 10 additions & 0 deletions examples/ts-react-chat/src/lib/model-selection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type Provider =
| 'grok'
| 'groq'
| 'openrouter'
| 'zai'

export interface ModelOption {
provider: Provider
Expand Down Expand Up @@ -135,6 +136,15 @@ export const MODEL_OPTIONS: Array<ModelOption> = [
model: 'grok-3-mini',
label: 'Grok - Grok 3 Mini',
},

// Z.AI (GLM)
{ provider: 'zai', model: 'glm-5.1', label: 'Z.AI - GLM-5.1' },
{ provider: 'zai', model: 'glm-5-turbo', label: 'Z.AI - GLM-5 Turbo' },
{ provider: 'zai', model: 'glm-5', label: 'Z.AI - GLM-5' },
{ provider: 'zai', model: 'glm-5v-turbo', label: 'Z.AI - GLM-5V Turbo' },
{ provider: 'zai', model: 'glm-4.7', label: 'Z.AI - GLM-4.7' },
{ provider: 'zai', model: 'glm-4.6v', label: 'Z.AI - GLM-4.6V' },
{ provider: 'zai', model: 'glm-4.6', label: 'Z.AI - GLM-4.6' },
]

export const DEFAULT_MODEL_OPTION = MODEL_OPTIONS[0]
9 changes: 9 additions & 0 deletions examples/ts-react-chat/src/routes/api.tanchat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { anthropicText } from '@tanstack/ai-anthropic'
import { geminiText } from '@tanstack/ai-gemini'
import { openRouterText } from '@tanstack/ai-openrouter'
import { grokText } from '@tanstack/ai-grok'
import { zaiText } from '@tanstack/ai-zai'
import { groqText } from '@tanstack/ai-groq'
import type { AnyTextAdapter, ChatMiddleware } from '@tanstack/ai'
import {
Expand All @@ -32,6 +33,7 @@ type Provider =
| 'grok'
| 'groq'
| 'openrouter'
| 'zai'

const SYSTEM_PROMPT = `You are a helpful assistant for a guitar store.

Expand Down Expand Up @@ -185,6 +187,13 @@ export const Route = createFileRoute('/api/tanchat')({
adapter: openaiText((model || 'gpt-4o') as 'gpt-4o'),
modelOptions: {},
}),
zai: () =>
createChatOptions({
adapter: zaiText((model || 'glm-4.7') as 'glm-4.7', {
coding: true,
}),
modelOptions: {},
}),
}

try {
Expand Down
2 changes: 1 addition & 1 deletion examples/ts-react-search/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"@radix-ui/react-slot": "^1.2.4",
"@tailwindcss/vite": "^4.1.18",
"@tanstack/ai": "workspace:*",
"@tanstack/ai-groq": "workspace:*",
"@tanstack/ai-zai": "workspace:*",
"@tanstack/ai-react": "workspace:*",
"@tanstack/query-db-collection": "^1.0.6",
"@tanstack/react-db": "^0.1.55",
Expand Down
Loading