### Install FlowToken Library

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Instructions for installing the FlowToken React component library using npm or yarn package managers.

```bash
npm install flowtoken
```

```bash
yarn add flowtoken
```

--------------------------------

### Integrate AnimatedMarkdown with Vercel AI SDK Chat

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Example of integrating `AnimatedMarkdown` within a Vercel AI SDK `useChat` hook to animate streamed messages. It shows how to dynamically apply animations to LLM output.

```jsx
'use client'

import { useChat } from 'ai/react'
import { AnimatedMarkdown } from 'flowtoken';
import 'flowtoken/dist/styles.css';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: <AnimatedMarkdown content={m.content}
            animation="dropIn"
            animationDuration="0.5s"
            animationTimingFunction="ease-in-out"
            />
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            value={input}
            onChange={handleInputChange}
          />
        </label>
      </form>
    </div>
  )
}
```

--------------------------------

### AnimatedMarkdown Component Props Reference

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Detailed documentation for the properties available on the `AnimatedMarkdown` React component, including their types, descriptions, and examples of usage.

```APIDOC
AnimatedMarkdown Props:
- content (string): The text to be displayed.
- sep ("word" | "char"): How to split and animate the content. Defaults to "word".
- animation (string | null): Name of the CSS animation to apply (e.g. "fadeIn", "dropIn"). Set to null to disable animations on completed messages.
- animationDuration (string): CSS duration of the animation (e.g. "0.6s").
- animationTimingFunction (string): CSS timing function for the animation (e.g. "ease", "ease-in-out").
- codeStyle (object): The syntax-highlighter style object to use for code blocks.
- customComponents (Record<string, React.ComponentType>): Map of regex patterns or custom tag names to React components. Use this to render arbitrary LLM-emitted syntax.
- imgHeight (string): Default height for rendered images (e.g. "200px").
```

--------------------------------

### Basic Usage with AnimatedMarkdown Component

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Demonstrates how to import and use the `AnimatedMarkdown` component to display content with a `fadeIn` animation. It also shows the required CSS import.

```jsx
import React from 'react';

import { AnimatedMarkdown } from 'flowtoken';
// import the flowtoken css in order to use the animations
import 'flowtoken/dist/styles.css';

const App = () => {
  return (
    <AnimatedMarkdown
      content="## Hello, world!"
      animation="fadeIn"
      animationDuration="0.5s"
      animationTimingFunction="ease-in-out"
    />
  );
};

export default App;
```

--------------------------------

### Define and Apply Custom CSS Animations

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Demonstrates how to create custom CSS keyframe animations and then apply them to the `AnimatedMarkdown` component by importing the stylesheet and referencing the animation name.

```css
/* custom-styles.css */

@keyframes custom-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.custom-animation {
  animation: custom-animation 1s ease-in-out;
}
```

```jsx
import 'custom-styles.css';
...
<AnimatedMarkdown content="Hello, world!" animation="custom-animation" />
```

--------------------------------

### Define and Use Custom Components with AnimatedMarkdown

Source: https://github.com/ephibbs/flowtoken/blob/main/README.md

Illustrates how to pass custom React components to `AnimatedMarkdown` using the `customComponents` prop. This allows rendering specific LLM-emitted tags with custom logic and styling.

```jsx
const customComponents = {
  'customcomponent': ({ animateText, node, children, ...props }: any) => {
    return (
      <>
        {animateText(<div {...props}>{children}</div>)}
      </>
    )
  },
}
...
<AnimatedMarkdown content="Hello, world! <customcomponent>This is a custom component</customcomponent>" customComponents={customComponents} />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.