{"_id":"@boundaryml/baml-nextjs-plugin","name":"@boundaryml/baml-nextjs-plugin","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@boundaryml/baml-nextjs-plugin","version":"0.1.0","description":"BAML Next.js integration","repository":{"type":"git","url":"git+https://github.com/BoundaryML/baml.git","directory":"typescript/nextjs-plugin"},"license":"MIT","main":"./dist/index.js","types":"./dist/index.d.ts","engines":{"node":">= 18"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"scripts":{"dev":"tsc --watch","build":"tsc","format":"biome format --write .","lint":"biome check .","test":"jest"},"peerDependencies":{"next":"*","react":"*"},"dependencies":{},"devDependencies":{"@biomejs/biome":"^1.9.4","@types/jest":"^29.5.14","@types/node":"^22.10.6","@types/react":"^19.0.6","@types/webpack":"^5.28.5","jest":"^29.7.0","next":"^15.1.4","typescript":"^5.7.3","webpack":"^5.97.1"},"packageManager":"pnpm@9.12.0","bugs":{"url":"https://github.com/BoundaryML/baml/issues"},"homepage":"https://github.com/BoundaryML/baml#readme","_id":"@boundaryml/baml-nextjs-plugin@0.1.0","gitHead":"4e6368c1024682a92a067fc3c51b5f68c79548f7","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Vr9c7mvaAP7WiEZul39z+rbUSFEi9dOtH4C9lLxp+p6BHLpBJpqTeMGBVUL1YWsuTqR3a2FMebhmOOHQZVguXA==","shasum":"515ba9e28b46eb964578d6da7e00919030b7d588","tarball":"https://registry.npmjs.org/@boundaryml/baml-nextjs-plugin/-/baml-nextjs-plugin-0.1.0.tgz","fileCount":4,"unpackedSize":8905,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFO8NrNqSDQdQQNcXvOIioTHcH990+Q0SX+CSqZ7TV8+AiEAoD8ETsEpSsjbtSfWr+BJOJRZeVJlI/h9n2jc6JiwFw4="}]},"_npmUser":{"name":"aaronvg","email":"aaron@gloo.chat"},"directories":{},"maintainers":[{"name":"aaronvg","email":"aaron@gloo.chat"},{"name":"hellovai-boundary","email":"vbv@boundaryml.com"},{"name":"sxlijin","email":"npmjs@sxlijin.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/baml-nextjs-plugin_0.1.0_1739920735888_0.7237912648040499"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-18T23:18:55.818Z","0.1.0":"2025-02-18T23:18:56.071Z","modified":"2025-02-18T23:18:56.361Z"},"maintainers":[{"name":"aaronvg","email":"aaron@gloo.chat"},{"name":"hellovai-boundary","email":"vbv@boundaryml.com"},{"name":"sxlijin","email":"npmjs@sxlijin.com"}],"description":"BAML Next.js integration","homepage":"https://github.com/BoundaryML/baml#readme","repository":{"type":"git","url":"git+https://github.com/BoundaryML/baml.git","directory":"typescript/nextjs-plugin"},"bugs":{"url":"https://github.com/BoundaryML/baml/issues"},"license":"MIT","readme":"# @boundaryml/nextjs\n\nNext.js integration for BAML, providing seamless support for server components, server actions, and streaming responses.\n\n## Installation\n\n```bash\nnpm install @boundaryml/baml @boundaryml/nextjs\n```\n\n## Setup\n\n1. Update your Next.js configuration:\n\n```typescript\n// next.config.ts\nimport { withBaml } from '@boundaryml/nextjs';\nimport type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n  // ... your existing config\n};\n\nexport default withBaml()(nextConfig);\n```\n\n2. Use BAML functions in your Server Actions:\n\n```typescript\n// app/actions/story.ts\n'use server'\n\nimport { b } from \"@/baml_client\";\n\nexport async function writeMeAStoryAction(prompt: string) {\n  return b.WriteMeAStory.stream(prompt).toStreamable();\n}\n```\n\n3. Use the generated hooks in your React components:\n\n```typescript\n// app/components/story.tsx\n'use client'\n\nimport { useWriteMeAStoryAction } from \"@/baml_client/nextjs\";\n\nexport function StoryForm() {\n  const {\n    data: finalStory,\n    partialData: streamingStory,\n    isLoading,\n    isError,\n    error,\n    mutate\n  } = useWriteMeAStoryAction();\n\n  const story = isLoading ? streamingStory : finalStory;\n\n  return (\n    <div>\n      <button onClick={() => mutate(\"Once upon a time...\")}>\n        Generate Story\n      </button>\n      {isLoading && <p>Generating story...</p>}\n      {story && (\n        <div>\n          <h2>{story.title}</h2>\n          <p>{story.content}</p>\n        </div>\n      )}\n    </div>\n  );\n}\n```\n\n## Features\n\n- 🔒 Secure: Runs BAML functions on the server to keep API keys safe\n- 🌊 Streaming: Built-in support for streaming responses\n- 🎯 Type-safe: Full TypeScript support for all BAML functions\n- ⚡️ Fast: Optimized for Next.js App Router and React Server Components\n- 🛠 Easy: Zero-config setup with `withBaml`\n\n## API Reference\n\n### `withBaml(config?: BamlNextConfig)`\n\nWraps your Next.js configuration with BAML integration.\n\n```typescript\ninterface BamlNextConfig {\n  webpack?: NextConfig['webpack']; // Custom webpack configuration\n}\n```\n\n### Generated Hooks\n\nFor each BAML function, a corresponding React hook is generated with the following interface:\n\n```typescript\ninterface BamlStreamHookResult<T> {\n  data?: T;              // Final result\n  partialData?: T;       // Streaming result\n  isLoading: boolean;    // Loading state\n  error?: Error;         // Error state\n  mutate: (input: any) => Promise<void>; // Function to call the BAML function\n}\n```\n\n## License\n\nMIT","readmeFilename":"README.md"}