Vercel AI SDK 在 Svelte 中的快速入门指南

Vercel AI SDK 在 Svelte 中的快速入门指南

【免费下载链接】ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/GitHub_Trending/ai/ai

前言

Vercel AI SDK 是一个强大的 TypeScript 库，旨在帮助开发者构建 AI 驱动的应用程序。本指南将详细介绍如何在 Svelte 项目中快速集成 AI 聊天机器人功能，并实现实时流式响应。

环境准备

在开始之前，请确保满足以下条件：

• Node.js 18+ 版本
• pnpm 包管理器
• 第三方AI服务 API 密钥（用于访问 GPT 模型）

项目初始化

首先创建一个新的 SvelteKit 项目：

npx sv create my-ai-app
cd my-ai-app

安装依赖

安装必要的依赖包：

pnpm add -D ai @ai-sdk/third-party @ai-sdk/svelte zod

其中：

• ai 是核心 SDK 包
• @ai-sdk/third-party 提供第三方AI模型支持
• @ai-sdk/svelte 提供 Svelte 专用组件
• zod 用于数据验证

配置 API 密钥

在项目根目录创建 .env.local 文件：

THIRD_PARTY_API_KEY=your_api_key_here

创建 API 路由

在 src/routes/api/chat/+server.ts 文件中设置第三方AI接口：

import { createThirdPartyAI } from '@ai-sdk/third-party';
import { streamText } from 'ai';
import { THIRD_PARTY_API_KEY } from '$env/static/private';

const thirdPartyAI = createThirdPartyAI({
  apiKey: THIRD_PARTY_API_KEY,
});

export async function POST({ request }) {
  const { messages } = await request.json();

  const result = streamText({
    model: thirdPartyAI('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

这段代码完成了：

1. 初始化第三方AI客户端
2. 创建 POST 请求处理器
3. 使用流式文本生成
4. 返回流式响应

构建前端界面

在 src/routes/+page.svelte 中创建聊天界面：

<script>
  import { Chat } from '@ai-sdk/svelte';
  const chat = new Chat();
</script>

<main>
  <ul>
    {#each chat.messages as message}
      <li>
        <div>{message.role}</div>
        <div>
          {#each message.parts as part}
            {#if part.type === 'text'}
              <div>{part.text}</div>
            {/if}
          {/each}
        </div>
      </li>
    {/each}
  </ul>
  
  <form onsubmit={chat.handleSubmit}>
    <input bind:value={chat.input} />
    <button type="submit">发送</button>
  </form>
</main>

运行项目

启动开发服务器：

pnpm run dev

访问 http://localhost:5173 即可测试聊天功能。

高级功能：工具集成

LLM 在处理特定任务（如数学计算或获取实时数据）时存在局限，可以通过工具扩展其能力。

添加天气工具

更新 API 路由：

import { tool } from 'ai';
import { z } from 'zod';

// ...其他代码...

const result = streamText({
  model: thirdPartyAI('gpt-4o'),
  messages,
  tools: {
    weather: tool({
      description: '获取某地天气（华氏度）',
      parameters: z.object({
        location: z.string().describe('查询天气的地点')
      }),
      execute: async ({ location }) => ({
        location,
        temperature: Math.round(Math.random() * (90 - 32) + 32)
      })
    })
  }
});

更新 UI 显示工具调用

{#each message.parts as part}
  {#if part.type === 'text'}
    <div>{part.text}</div>
  {:else if part.type === 'tool-invocation'}
    <pre>{JSON.stringify(part.toolInvocation, null, 2)}</pre>
  {/if}
{/each}

启用多步骤工具调用

<script>
  const chat = new Chat({ maxSteps: 5 });
</script>

这样模型可以自动使用工具结果生成更完整的回答。

Svelte 与 React 实现的差异

1. 状态管理方式不同：

   • Svelte 使用类（Class）
   • React 使用钩子（Hooks）

2. 参数响应性：

   • Svelte 中类参数默认不响应变化
   • 需要通过 getter 函数实现响应式

3. 实例同步：

   • 需要显式创建上下文才能实现实例同步

总结

通过本指南，您已经学会了：

1. 在 Svelte 中集成 Vercel AI SDK
2. 实现流式聊天界面
3. 扩展模型能力通过工具集成
4. 处理多步骤工具调用

这些技术可以应用于各种 AI 增强的 Web 应用场景，如客服系统、智能助手等。

【免费下载链接】ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/GitHub_Trending/ai/ai