ai-app

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AI App Generator

AI应用生成器

Build full-stack AI applications with Next.js, AI SDK, and ai-elements.

使用Next.js、AI SDK和ai-elements构建全栈AI应用。

Quick Start

快速开始

1. Scaffold Project

1. 搭建项目

bash

bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=geist-sans&menuAccent=subtle&menuColor=default&radius=default" --template next my-ai-app
cd my-ai-app

bash

bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=geist-sans&menuAccent=subtle&menuColor=default&radius=default" --template next my-ai-app
cd my-ai-app

2. Install Dependencies

2. 安装依赖

bash

bun add ai @ai-sdk/react @ai-sdk/anthropic zod
bunx --bun ai-elements@latest

bash

bun add ai @ai-sdk/react @ai-sdk/anthropic zod
bunx --bun ai-elements@latest

3. Configure Environment

3. 配置环境

bash

undefined

bash

undefined

.env.local - Choose your provider

ANTHROPIC_API_KEY=sk-ant-...

OPENAI_API_KEY=sk-...

GOOGLE_GENERATIVE_AI_API_KEY=...

undefined

undefined

4. Generate Application

4. 生成应用

Based on user requirements, generate:

Chatbot: See references/chatbot.md
Agent Dashboard: See references/agent-dashboard.md
Custom: Combine patterns as needed

根据用户需求，生成以下类型的应用：

聊天机器人：查看 references/chatbot.md
Agent仪表板：查看 references/agent-dashboard.md
自定义：根据需要组合模式

Application Types

应用类型

Chatbot

聊天机器人

Simple conversational AI with streaming responses.

Feature	Implementation
Chat UI	Conversation + Message + PromptInput
API	streamText + toUIMessageStreamResponse
Extras	Reasoning, Sources, File attachments

支持流式响应的简单对话式AI。

特性	实现方式
聊天UI	Conversation + Message + PromptInput
API	streamText + toUIMessageStreamResponse
额外功能	推理过程、来源标注、文件附件

Agent Dashboard

Agent仪表板

Multi-agent interface with tool visualization.

Feature	Implementation
Agents	ToolLoopAgent with tools
UI	Dashboard layout + Tool components
API	createAgentUIStreamResponse
Extras	Status monitoring, tool approval

带有工具可视化的多Agent界面。

特性	实现方式
Agents	ToolLoopAgent 搭配工具
UI	仪表板布局 + 工具组件
API	createAgentUIStreamResponse
额外功能	状态监控、工具调用审批

Custom AI App

自定义AI应用

Mix and match based on user needs:

Web search chatbot
Code generation assistant
Document analyzer
Multi-modal chat

根据用户需求灵活组合：

网页搜索聊天机器人
代码生成助手
文档分析器
多模态聊天

Project Structure

项目结构

my-ai-app/
├── app/
│   ├── page.tsx                 # Main UI
│   ├── layout.tsx               # Root layout
│   ├── globals.css              # Theme
│   └── api/
│       └── chat/
│           └── route.ts         # AI endpoint
├── components/
│   ├── ai-elements/             # AI Elements components
│   ├── ui/                      # shadcn/ui components
│   └── chat.tsx                 # Chat component (if extracted)
├── lib/
│   ├── utils.ts                 # Utilities
│   └── ai.ts                    # AI configuration (optional)
├── ai/                          # Agent definitions (if needed)
│   └── assistant.ts
└── .env.local                   # API keys

See references/project-structure.md for details.

my-ai-app/
├── app/
│   ├── page.tsx                 # Main UI
│   ├── layout.tsx               # Root layout
│   ├── globals.css              # Theme
│   └── api/
│       └── chat/
│           └── route.ts         # AI endpoint
├── components/
│   ├── ai-elements/             # AI Elements components
│   ├── ui/                      # shadcn/ui components
│   └── chat.tsx                 # Chat component (if extracted)
├── lib/
│   ├── utils.ts                 # Utilities
│   └── ai.ts                    # AI configuration (optional)
├── ai/                          # Agent definitions (if needed)
│   └── assistant.ts
└── .env.local                   # API keys

详情请查看 references/project-structure.md。

Core Patterns

核心模式

API Route

API路由

typescript

// app/api/chat/route.ts
import { streamText, UIMessage, convertToModelMessages } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export const maxDuration = 30;

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

  const result = streamText({
    model: anthropic('claude-sonnet-4-5'),
    messages: convertToModelMessages(messages),
    system: 'You are a helpful assistant.',
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

typescript

// app/api/chat/route.ts
import { streamText, UIMessage, convertToModelMessages } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export const maxDuration = 30;

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

  const result = streamText({
    model: anthropic('claude-sonnet-4-5'),
    messages: convertToModelMessages(messages),
    system: 'You are a helpful assistant.',
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

Chat Page

聊天页面

tsx

// app/page.tsx
'use client';
import { useChat } from '@ai-sdk/react';
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import {
  Message,
  MessageContent,
  MessageResponse,
} from '@/components/ai-elements/message';
import {
  PromptInput,
  PromptInputBody,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
  type PromptInputMessage,
} from '@/components/ai-elements/prompt-input';
import { Loader } from '@/components/ai-elements/loader';
import { useState } from 'react';

export default function ChatPage() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat();

  const handleSubmit = (message: PromptInputMessage) => {
    if (!message.text.trim()) return;
    sendMessage({ text: message.text, files: message.files });
    setInput('');
  };

  return (
    <div className="flex h-screen flex-col p-4">
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.map((message) => (
            <div key={message.id}>
              {message.parts.map((part, i) => {
                if (part.type === 'text') {
                  return (
                    <Message key={i} from={message.role}>
                      <MessageContent>
                        <MessageResponse>{part.text}</MessageResponse>
                      </MessageContent>
                    </Message>
                  );
                }
                return null;
              })}
            </div>
          ))}
          {status === 'submitted' && <Loader />}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>

      <PromptInput onSubmit={handleSubmit} className="mt-4">
        <PromptInputBody>
          <PromptInputTextarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
        </PromptInputBody>
        <PromptInputFooter>
          <div />
          <PromptInputSubmit status={status} />
        </PromptInputFooter>
      </PromptInput>
    </div>
  );
}

tsx

// app/page.tsx
'use client';
import { useChat } from '@ai-sdk/react';
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import {
  Message,
  MessageContent,
  MessageResponse,
} from '@/components/ai-elements/message';
import {
  PromptInput,
  PromptInputBody,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
  type PromptInputMessage,
} from '@/components/ai-elements/prompt-input';
import { Loader } from '@/components/ai-elements/loader';
import { useState } from 'react';

export default function ChatPage() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat();

  const handleSubmit = (message: PromptInputMessage) => {
    if (!message.text.trim()) return;
    sendMessage({ text: message.text, files: message.files });
    setInput('');
  };

  return (
    <div className="flex h-screen flex-col p-4">
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.map((message) => (
            <div key={message.id}>
              {message.parts.map((part, i) => {
                if (part.type === 'text') {
                  return (
                    <Message key={i} from={message.role}>
                      <MessageContent>
                        <MessageResponse>{part.text}</MessageResponse>
                      </MessageContent>
                    </Message>
                  );
                }
                return null;
              })}
            </div>
          ))}
          {status === 'submitted' && <Loader />}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>

      <PromptInput onSubmit={handleSubmit} className="mt-4">
        <PromptInputBody>
          <PromptInputTextarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
        </PromptInputBody>
        <PromptInputFooter>
          <div />
          <PromptInputSubmit status={status} />
        </PromptInputFooter>
      </PromptInput>
    </div>
  );
}

Skill References

技能参考

For detailed patterns, see:

Need	Skill	Reference
Chat UI components	`/ai-elements`	chatbot.md
Next.js patterns	`/nextjs-shadcn`	architecture.md
AI SDK functions	`/ai-sdk-6`	core-functions.md
Agents & tools	`/ai-sdk-6`	agents.md
Caching	`/cache-components`	REFERENCE.md
Code review & cleanup	`/code-simplifier`	DRY/KISS/YAGNI validation

如需详细模式，请查看：

需求	技能	参考文档
聊天UI组件	`/ai-elements`	chatbot.md
Next.js模式	`/nextjs-shadcn`	architecture.md
AI SDK函数	`/ai-sdk-6`	core-functions.md
Agents与工具	`/ai-sdk-6`	agents.md
缓存	`/cache-components`	REFERENCE.md
代码审查与清理	`/code-simplifier`	DRY/KISS/YAGNI验证

Workflow

工作流

Phase 1: Understand Requirements

阶段1：理解需求

Ask user:

What type of AI app? (chatbot, agent, custom)
What features? (reasoning, sources, tools, file upload)
What style? (vega=classic, nova=compact, maia=soft/rounded, lyra=boxy/sharp, mira=dense) — default: nova
What font? (geist-sans, inter, jetbrains-mono, figtree, dm-sans, outfit, noto-sans, nunito-sans, roboto, raleway, public-sans) — default: geist-sans
What base color? (neutral, zinc, slate, gray, stone) — default: neutral
What theme accent? (neutral, blue, green, orange, red, rose, violet) — default: neutral
What border radius style? (default, sm, md, lg, xl)
Component library? (radix=default, base-ui)

询问用户：

要构建哪种类型的AI应用？（聊天机器人、Agent、自定义）
需要哪些功能？（推理过程、来源标注、工具调用、文件上传）
风格偏好？（vega=经典、nova=紧凑、maia=柔和/圆角、lyra=方正/锐利、mira=密集）—— 默认：nova
字体选择？（geist-sans、inter、jetbrains-mono、figtree、dm-sans、outfit、noto-sans、nunito-sans、roboto、raleway、public-sans）—— 默认：geist-sans
基础颜色？（neutral、zinc、slate、gray、stone）—— 默认：neutral
主题强调色？（neutral、blue、green、orange、red、rose、violet）—— 默认：neutral
边框圆角风格？（default、sm、md、lg、xl）
组件库？（radix=默认、base-ui）

Phase 2: Scaffold Project

阶段2：搭建项目

Run scaffolding commands based on requirements.

根据需求运行搭建命令。

Phase 3: Generate Files

阶段3：生成文件

Create files based on application type:

API route (
```
app/api/chat/route.ts
```
)
Main page (
```
app/page.tsx
```
)
Components (if needed)
Agents (if needed)

根据应用类型创建文件：

API路由（
```
app/api/chat/route.ts
```
）
主页面（
```
app/page.tsx
```
）
组件（如有需要）
Agents（如有需要）

Phase 4: Configure

阶段4：配置

Set up
```
.env.local
```
Configure
```
next.config.ts
```
if needed
Add any additional dependencies

设置
```
.env.local
```
如有需要配置
```
next.config.ts
```
添加额外依赖

Phase 5: Verify

阶段5：验证

bash

bun dev

Test the application works correctly.

bash

bun dev

测试应用是否正常运行。

References

参考资料

Chatbot Templates - Full chatbot implementation
Agent Dashboard Templates - Agent-based apps
Project Structure - Directory layout
Examples - Copy-paste examples

聊天机器人模板 - 完整聊天机器人实现
Agent仪表板模板 - 基于Agent的应用
项目结构 - 目录布局
示例 - 可直接复制使用的示例

Package Manager

包管理器

Always use bun, never npm:

```
bun add
```
(not npm install)
```
bunx --bun
```
(not npx)
```
bun dev
```
(not npm run dev)

始终使用bun，不要使用npm：

```
bun add
```
（不要用npm install）
```
bunx --bun
```
（不要用npx）
```
bun dev
```
（不要用npm run dev）