{"id":15507,"library":"agentick","title":"Agentick AI Component Framework","description":"Agentick is a component-based framework for building AI applications, currently at version 0.14.47. It operates on a rapid release cadence with frequent patch updates across its monorepo packages, indicating active development. A key differentiator is its novel approach as a React reconciler, where the render target is a language model itself. Developers construct the model's context window using familiar JSX syntax, React components, and hooks, abstracting away traditional prompt templating. The framework compiles this JSX into what the language model 'sees,' providing fine-grained control over the model's perception and interaction. This paradigm shifts AI application development from pipeline or chain configurations to a more declarative, component-driven style.","status":"active","version":"0.14.47","language":"javascript","source_language":"en","source_url":"https://github.com/agenticklabs/agentick","tags":["javascript","agent","ai","framework","jsx","react","typescript"],"install":[{"cmd":"npm install agentick","lang":"bash","label":"npm"},{"cmd":"yarn add agentick","lang":"bash","label":"yarn"},{"cmd":"pnpm add agentick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core functionality for the Agentick framework.","package":"@agentick/core","optional":false},{"reason":"Integration for OpenAI models.","package":"@agentick/openai","optional":true},{"reason":"Schema validation for defining tool inputs and outputs.","package":"zod","optional":false},{"reason":"Peer dependency for JSX reconciliation and hooks.","package":"react","optional":false}],"imports":[{"note":"Agentick is primarily an ESM-first framework, especially when used with modern Node.js and TypeScript.","wrong":"const { createApp } = require('@agentick/core');","symbol":"createApp","correct":"import { createApp } from '@agentick/core';"},{"note":"System is a named export from the @agentick/core package.","wrong":"import System from '@agentick/core';","symbol":"System","correct":"import { System } from '@agentick/core';"},{"note":"This function is central to defining custom AI tools within the Agentick JSX environment.","wrong":"const createTool = require('@agentick/core').createTool;","symbol":"createTool","correct":"import { createTool } from '@agentick/core';"},{"note":"Used to configure the OpenAI model integration for your Agentick application.","symbol":"openai","correct":"import { openai } from '@agentick/openai';"}],"quickstart":{"code":"import { createApp, System, Timeline, createTool, useContinuation } from \"@agentick/core\";\nimport { openai } from \"@agentick/openai\";\nimport { z } from \"zod\";\n\nconst knowledgeBase = {\n  search: async (query: string) => {\n    // Simulate a search against a knowledge base\n    console.log(`Searching for: ${query}`);\n    if (query.includes(\"quantum computing\")) {\n      return [{ title: \"Quantum computing advances\", snippet: \"Recent breakthroughs in error correction and qubit stability.\" }];\n    }\n    return [{ title: \"General AI trends\", snippet: \"Overview of current AI research directions.\" }];\n  }\n};\n\nconst Search = createTool({\n  name: \"search\",\n  description: \"Search the knowledge base\",\n  input: z.object({ query: z.string() }),\n  handler: async ({ query }) => {\n    const results = await knowledgeBase.search(query);\n    return [{ type: \"text\", text: JSON.stringify(results) }];\n  }\n});\n\nfunction ResearchAgent() {\n  useContinuation((result) => result.tick < 10); // Limit ticks to prevent infinite loops\n\n  return (\n    <>\n      <System>Search thoroughly, then write a summary based on the findings.</System>\n      <Timeline />\n      <Search />\n    </>\n  );\n}\n\n// Ensure process.env.OPENAI_API_KEY is set or passed securely\nconst openAIApiKey = process.env.OPENAI_API_KEY ?? ''; \n\nconst app = createApp(ResearchAgent, { model: openai({ model: \"gpt-4o\", apiKey: openAIApiKey }) });\n\n(async () => {\n  if (!openAIApiKey) {\n    console.error(\"OPENAI_API_KEY environment variable is not set. Please set it to run the example.\");\n    return;\n  }\n  const result = await app.run({\n    messages: [\n      { role: \"user\", content: [{ type: \"text\", text: \"What's new in quantum computing?\" }] }\n    ]\n  });\n  console.log(\"Agent Response:\", result.response);\n})();","lang":"typescript","description":"This quickstart demonstrates creating a simple research agent using Agentick's JSX components to define system instructions, include conversation history, and integrate a custom search tool, then running it with an OpenAI model."},"warnings":[{"fix":"Consult the official GitHub repository for recent changelogs and migration guides before updating dependencies. Pin exact versions in production.","message":"As a pre-1.0 package (currently 0.14.47), Agentick is under active development. Users should anticipate frequent breaking changes between minor versions as the API matures and stabilizes. Always review release notes when upgrading.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Add the following to your `tsconfig.json` under `compilerOptions`: `\"jsx\": \"react-jsx\"` and `\"jsxImportSource\": \"react\"`.","message":"To use Agentick's JSX syntax with TypeScript, your `tsconfig.json` must be correctly configured. Specifically, the `compilerOptions.jsx` and `compilerOptions.jsxImportSource` fields are critical.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Familiarize yourself with the core concepts of Agentick's 'React reconciler for LLMs' approach. Understand that components render directly into the model's perceived input, and hooks control execution flow.","message":"Agentick employs a novel paradigm where the AI model's context window is built declaratively with React-like JSX components. This differs significantly from traditional prompt engineering or chain-based AI frameworks, requiring a mental model shift.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your `tsconfig.json` includes `\"jsx\": \"react-jsx\"` and `\"jsxImportSource\": \"react\"` under `compilerOptions`.","cause":"The TypeScript compiler is not configured to process JSX syntax, or the `jsxImportSource` is missing.","error":"Cannot use JSX unless the '--jsx' flag is provided. ts(17004)"},{"fix":"Run `npm install agentick @agentick/openai zod react` to install the core framework, model integrations, schema validation, and React.","cause":"One or more of the required Agentick packages or its peer dependencies have not been installed in your project.","error":"Module not found: Error: Can't resolve '@agentick/core'"},{"fix":"Ensure the `OPENAI_API_KEY` environment variable is set or explicitly pass the `apiKey` property when initializing the OpenAI model in `createApp`.","cause":"The OpenAI API key (or other model provider key) required for the model integration is not provided or is invalid.","error":"TypeError: Cannot read properties of undefined (reading 'split') or similar runtime error related to missing API key."}],"ecosystem":"npm"}