# AI SDK - React Core
*Built on the foundation of VN SDK - enhanced for Human-AI Interaction*
## ✨ Why AI SDK?
- Minutes to integrate - Get started quickly with our CLI
- Framework agnostic - Works with React, Next.js, AGUI and more
- Production-ready UI - Use customizable components or build with headless UI
- Built-in security - Prompt injection protection
- Open source - Full transparency and community-driven
## 🧑💻 Real life use cases
Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.
## 🖥️ Code Samples
Drop in these building blocks and tailor them to your needs.
Build with Headless APIs and Pre-Built Components
```ts
// Headless UI with full control
const { visibleMessages, appendMessage, setMessages, ... } = useAiChat();
// Pre-built components with deep customization options (CSS + pass custom sub-components)
```
```ts
// Frontend actions + generative UI, with full streaming support
useCopilotAction({
name: "appendToSpreadsheet",
description: "Append rows to the current spreadsheet",
parameters: [
{ name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
],
render: ({ status, args }) => ,
handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});
```
Integrate In-App CoAgents with LangGraph
```ts
// Share state between app and agent
const { agentState } = useCoAgent({
name: "basic_agent",
initialState: { input: "NYC" }
});
// agentic generative UI
useCoAgentStateRender({
name: "basic_agent",
render: ({ state }) => ,
});
// Human in the Loop (Approval)
useCopilotAction({
name: "email_tool",
parameters: [
{
name: "email_draft",
type: "string",
description: "The email content",
required: true,
},
],
renderAndWaitForResponse: ({ args, status, respond }) => {
return (
respond?.({ approved: false })}
onSend={() =>
respond?.({
approved: true,
metadata: { sentAt: new Date().toISOString() },
})
}
/>
);
},
});
```
```ts
// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
const modifiedConfig = aiCustomizeConfig(config, {
emitIntermediateState: [{
stateKey: "outline",
tool: "set_outline",
toolArgument: "outline"
}],
});
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);
```
## 🏆 Featured Examples
## Documentation
To get started with VN SDK, please check out the [documentation](https://docs.vn-sdk.ai).
